圖庫網(wǎng)站SEO（搜索引擎優(yōu)化）案例

個網(wǎng)站要在各大搜索引擎中位于前面的位置，需要對其SEO進行優(yōu)化，搜索不同關(guān)鍵詞下的搜索排名，從而獲客。本文以圖庫網(wǎng)站為例，談?wù)剝?yōu)化思路，希望對你有所啟發(fā)。

背景

我司主營素材版權(quán)代理銷售業(yè)務(wù)，包括圖片、視頻、音樂、字體，主要面向大B端客戶。現(xiàn)為提高銷售數(shù)據(jù)，需要從多方面入手完成網(wǎng)站產(chǎn)品優(yōu)化，整體方向是“開源節(jié)流”，即增加訪問網(wǎng)站的用戶量，同時提高關(guān)鍵路徑上各個重要環(huán)節(jié)的轉(zhuǎn)化率從而提高整體指標(biāo)的數(shù)據(jù)表現(xiàn)。

通過對歷史多年數(shù)據(jù)分析，60%用戶訪問設(shè)備為PC端Windows系統(tǒng)，18%來自于安卓，13%來自于Mac OS。并對來源渠道進行分析，2022年全年數(shù)據(jù)43%用戶來源于SEO（自然搜索流量），29%來源于直接訪問域名，24%來自于SEM投放。

綜上，想要進行開源，重點是從SEO、SEM著手（直接訪問域名多為老客戶，指直接在瀏覽器輸入域名后訪問網(wǎng)站）。而SEM投放的廣告費用每年水漲船高，主要方向為投放策略的優(yōu)化，在我其他文章中會有描述，這里不贅述。那么SEO是本文主要討論的流量獲取方式。

本文主要講我們是如何在1年的時間內(nèi)容，通過針對網(wǎng)站的SEO優(yōu)化，提高網(wǎng)站在搜索引擎各關(guān)鍵詞下的搜索排名從而獲得流量、商機數(shù)量提升的，作為一種免費的流量獲取方式，需要的同學(xué)感興趣可以參考。

目標(biāo)：

SEO的目標(biāo)是提高網(wǎng)站在各大搜索引擎中，搜索不同關(guān)鍵詞下的搜索排名，從而獲客。

一、SEO基本原理

SEO本質(zhì)上是優(yōu)化網(wǎng)站結(jié)構(gòu)、體驗，讓網(wǎng)站頁面被搜索引擎爬蟲更好的爬取、收錄，同時借助搜索引擎的投票評分機制、用戶體驗檢測機制獲得一個很好的網(wǎng)站搜索引擎評分，從而在用戶搜索某些關(guān)鍵詞時自己的網(wǎng)站能夠得到搜索引擎提供的不錯排序位置，提高曝光量從而實現(xiàn)獲客。

搜索引擎工作原理其實很簡單，各大搜索引擎公司會定期/不定期的派出多個爬蟲爬取互聯(lián)網(wǎng)上的所有網(wǎng)站頁面，對于符合標(biāo)準(zhǔn)，有收錄價值的頁面會進行收錄（一般除明顯作弊網(wǎng)站、違法違規(guī)網(wǎng)站以外都會有所收錄）。并對收錄的頁面進行評分，在用戶通過搜索引擎搜索相關(guān)內(nèi)容時，搜索引擎根據(jù)命中的關(guān)鍵詞返回相關(guān)頁面給用戶，返回結(jié)果的排序（不考慮投放SEM廣告情況下）主要取決于被召回結(jié)果與用戶搜索內(nèi)容的關(guān)聯(lián)度、被召回結(jié)果各自的評分權(quán)重。

二、關(guān)鍵詞優(yōu)化

做SEO最重要的一點莫過于關(guān)鍵詞的優(yōu)化，搜索引擎會根據(jù)頁面中各關(guān)鍵詞出現(xiàn)的頻次、位置、重要程度給予評分，這個關(guān)鍵詞將會用于與搜索引擎用戶的搜索需求匹配。因此如何讓你希望用戶搜到的關(guān)鍵詞正確、合適的出現(xiàn)在頁面中，幫助頁面在對應(yīng)關(guān)鍵詞下獲得不錯排名，是個非常重要的SEO工作。

首先堆詞，要確保關(guān)鍵詞與頁面內(nèi)容是匹配的，不能出現(xiàn)風(fēng)馬牛不相及的情況。

其次，頁面中關(guān)鍵詞是有重要層級的，例如從上至下，上方權(quán)重更高。H1（標(biāo)題）標(biāo)簽內(nèi)的內(nèi)容權(quán)重比p（段落）標(biāo)簽內(nèi)的高。

頁面中核心關(guān)鍵詞最好合理的多出現(xiàn)幾次，注意，需要合理。因為搜索引擎經(jīng)過多年的發(fā)展，是有一套反作弊的算法機制的，當(dāng)發(fā)現(xiàn)頁面中有惡意堆詞的情況，可能會降低頁面評分、不收錄，甚至Ban掉整個域名。

以我們做圖庫網(wǎng)站為例，我們希望圖片詳情頁被收錄，同時我們希望用戶在百度搜索“圖片”時我們的頁面有不錯的排名。那么我們的標(biāo)題可以從原來的“一個女人”，經(jīng)過代碼邏輯拼裝成“一個女人的圖片”。而下方關(guān)鍵詞，可以從人、女人、人類，擴展為：人圖片、女人圖片、人類圖片。這樣一方面保證關(guān)鍵詞、標(biāo)題和頁面內(nèi)容是匹配的，另一方面提高了圖片這一主題在頁面出現(xiàn)的頻次，從而搜索引擎會判定這個頁面是主要講“圖片”的。在搜索引擎的用戶搜索“圖片”時，可能我們的頁面會有不錯的權(quán)重。

三、元標(biāo)簽優(yōu)化

元標(biāo)簽優(yōu)化，又稱為TDK優(yōu)化。做過前端開發(fā)的同學(xué)可能比較清楚，或者你打開瀏覽器，點擊F12或者開發(fā)者工具可以看到。我們所看到的網(wǎng)頁是一堆HTML代碼渲染得來的。HTML代碼是用來描述頁面的，正如一篇文章，HTML中也有Title（標(biāo)題）、Description（描述）、Keyword（關(guān)鍵詞）三個關(guān)鍵的頁面描述。

TDK必須要簡潔、精準(zhǔn)的描述當(dāng)前頁面的主要內(nèi)容，搜索引擎在收錄頁面時，會給到TDK中出現(xiàn)的內(nèi)容極高的權(quán)重，就像你讀一篇文章，往往是從文章的標(biāo)題入手，文章的標(biāo)題通常是文章的核心內(nèi)容。

例如，我們圖片詳情頁的Title可能是“一個美麗模特的圖片”，Description可能是“XXXX，正版圖片購買”，而Keyword可能是“圖片，素材，正版圖片，模特，美麗”。

四、URL結(jié)構(gòu)優(yōu)化

頁面的地址，也就是URL也是搜索引擎收錄的重要內(nèi)容。我們需要盡可能的保證URL層級明晰、簡介，如果可以，盡量包含頁面的關(guān)鍵詞。

例如我們的首頁www.xxx.com，圖片搜索頁（搜索關(guān)鍵詞城市時）是www.xxx.com/image-search/chengshi，而圖片詳情頁是www.xxx.com/image/123513，是很明確的層級結(jié)構(gòu)，可讀性很強，并且包含了關(guān)鍵詞或者圖片ID。

五、網(wǎng)站導(dǎo)航和內(nèi)鏈

搜索引擎給頁面評分有一個很重要的機制，叫投票評分機制。比如A頁面搜索引擎給到了很高的評分，而A頁面中給到了超鏈接到B頁面，那么搜索引擎會認(rèn)為“A頁面這么重要，都鏈到了B頁面，那么B頁面一定也很重要”。而A頁面、C頁面、D頁面…都鏈到了B頁面，搜索引擎給到B頁面的評分則會更高。

這就是為什么，很多網(wǎng)站會在不同文章、頁面、欄目之間給到便捷的超鏈接。

而導(dǎo)航，則是方便爬蟲爬取使用的。爬蟲爬取頁面有深度優(yōu)先和廣度優(yōu)先兩種形式。一種是在頁面發(fā)現(xiàn)一個頁面就往下爬，然后找到下級頁面再往下，爬到一定深度再回到最初頁面。廣度優(yōu)先呢，則是把一個頁面所有鏈接都訪問了，再往下一層爬取。但是兩種方式都有一個特點，就是需要頁面之間有鏈接，作為蜘蛛爬行的路徑。而網(wǎng)頁的導(dǎo)航則是最適合干這個事的。

因此需要非常清晰的導(dǎo)航設(shè)置，比如圖片首頁、視頻首頁、音樂首頁等等，都在網(wǎng)站的大首頁有明確的導(dǎo)航。

并且由于所有網(wǎng)站的首頁權(quán)重都是最高的，所以盡可能的把想要被搜索引擎爬到、收錄到的頁面掛到首頁。

我們的實現(xiàn)方式是在大首頁，會放很多精選專題的推薦，精選圖片的鏈接，用戶下載最多的圖片的展示和鏈接，最新上傳入庫的圖片的展示和鏈接。通過首頁給他們投票，而這些子頁面之間又互相有鏈接互相投票的方式，達到提高相關(guān)頁面搜索引擎評分和權(quán)重的目的。

六、外鏈

上文中所謂的投票邏輯，不僅是站內(nèi)會有，站外到站內(nèi)的外鏈也是一個重要的評分機制。例如A站搜索引擎權(quán)重更高，如果A站首頁掛了B站的鏈接，會認(rèn)為B站也是優(yōu)質(zhì)網(wǎng)站（是在這一維度上給到較高評分）。因此往往會有站長聯(lián)盟，大家互相交換有價值的網(wǎng)站外鏈，互相投票從而提高SEO。

我們在實際SEO過程中沒有進行這一項的優(yōu)化，因為作為一個行業(yè)內(nèi)頭部的產(chǎn)品，在選擇外鏈上會很謹(jǐn)慎，因此無法純從SEO考慮出發(fā)去做友鏈交換。

七、速度優(yōu)化

搜索引擎召回網(wǎng)站結(jié)果之后，實際會有邏輯去監(jiān)控每個網(wǎng)站的打開率、跳出率。例如百度提供了免費的百度統(tǒng)計功能，相當(dāng)于0埋點的頁面數(shù)據(jù)統(tǒng)計，網(wǎng)站站長只需要在HTML的頭部引入百度統(tǒng)計的代碼，則可以方便統(tǒng)計站內(nèi)用戶的訪問數(shù)據(jù)，免費相應(yīng)的交換，就是每個頁面的跳出率對方也就知道了。

搜索引擎監(jiān)控網(wǎng)頁的打開率，是指用戶搜索關(guān)鍵詞召回10個結(jié)果，更多的用戶點擊了其中的哪一個，則是搜索/點擊轉(zhuǎn)換率，即點擊率。點擊率較高，則認(rèn)為網(wǎng)頁和用戶搜索詞的相關(guān)度較高，會獲得更好的排位。

而跳出率，則是搜索引擎判斷一個網(wǎng)頁用戶體驗的重要依據(jù)，如果跳出率（用戶打開之后，沒有進行同域名下下個頁面訪問，直接關(guān)閉頁面則算作挑出）高，則一定程度上證明要么這個頁面和搜索內(nèi)容不符合，要么這個頁面的體驗特別差。如果跳出率高，搜索引擎會降低這個頁面在對應(yīng)關(guān)鍵詞下的搜索權(quán)重評分，使排名下降。

另外一方面，搜索引擎的爬蟲爬取頁面時，也會評估頁面的加載速度（實際的渲染）。按理說搜索引擎的爬蟲不會像瀏覽器一樣加載頁面資源，因此不會直接測量頁面的加載速度。但是搜索引擎有一些從側(cè)面評估頁面加載速度的方式方法，例如可以評估HTML下載時間、評估頁面資源（JS、HTML、CSS、圖片）大小從而推測加載時間、一些內(nèi)部測試頁面加載速度的工具等。

簡而言之，頁面速度影響兩個方面搜索引擎的工作。

一是搜索引擎的爬蟲，爬取每個網(wǎng)站的時間往往是固定的，比如只給你2小時，2小時爬到多少內(nèi)容可能評估、收錄多少內(nèi)容，那么加載速度越快，被爬到、收錄的到頁面就會越多。

二是評估網(wǎng)站體驗，如果網(wǎng)站體驗較差，可能會降低網(wǎng)站的權(quán)重和收錄可能。

在這方面，我們產(chǎn)品重點的工作從以下幾方面入手：

優(yōu)化圖片大小：網(wǎng)站中以圖片為主要內(nèi)容，搜索頁、詳情頁都有很多的圖片，這個是頁面資源中加載耗時最長的內(nèi)容。我們采取的做法是無論jpg還是png，一律壓縮成webp格式，大大縮小存儲大小。（由于部分瀏覽器版本不支持webp格式，需要在頁面中通過js檢測頁面是否支持webp再決定本次瀏覽加載jpg還是webp圖片）
減少HTTP請求：盡量的減少頁面中需要進行的HTTP請求數(shù)量。比如可以合并文件（將多個CSS或則JS合并成一個單獨文件）、使用CSS Sprites將多個頁面點綴元素合并到一個圖像文件中、雅座資源（壓縮CSS、JS）、對于非常小的JS和CSS文件，進行HTML內(nèi)聯(lián)、盡量合理利用緩存。對于圖片列表展示的區(qū)域，進行懶加載，即頁面加載到特定部分才發(fā)出請求加載后面的圖片內(nèi)容
非首屏延遲加載：非首屏的內(nèi)容延遲加載，優(yōu)先保證首屏的高速加載和展示
精簡代碼：生產(chǎn)代碼去除無用的代碼、多余的注釋

八、移動端優(yōu)化

前文提到，20%左右的流量來自于移動端。搜索引擎的桌面端和移動端權(quán)重是分開評分的。移動端有一套單獨的評分標(biāo)準(zhǔn)。

由于移動端的網(wǎng)絡(luò)、設(shè)備限制，移動端對于頁面的大小、加載速度有更為嚴(yán)苛的評分標(biāo)準(zhǔn)。因此移動端優(yōu)化主要是針對移動端，簡化頁面功能，更好的適配屏幕滿足移動端的交互需求。

九、創(chuàng)建站點地圖

爬蟲會來網(wǎng)站爬取、收錄，但是光被動等著肯定是不合適的，把整個網(wǎng)站上所有主要、次要頁面收錄制作成站點地圖然后提交給搜索引擎，是一個非常高效的方式。

首先確定好網(wǎng)站結(jié)構(gòu)，例如我們產(chǎn)品有首頁、二級首頁、搜索頁、詳情頁、專題頁，這些頁面是主要的內(nèi)容呈現(xiàn)頁面。然后通過站點地圖生成工具，生成XML形式的站點地圖。到百度、Google等搜索引擎的站長工具中提交制作好的站點地圖。

站點地圖需要定期的更新，尤其是如果有新的頁面增加、舊的頁面刪除，都需要及時更新。大量頁面突發(fā)性的刪除變成404，如果沒有主動上報，被搜索引擎發(fā)現(xiàn)，會被視為非常嚴(yán)重的情況，搜索引擎會降低對站點的信任，導(dǎo)致降權(quán)。

對于刪除頁面，我們主要做了以下的措施：

設(shè)置自定義404頁面，提供有用的信息和導(dǎo)航鏈接，幫助用戶找到想要的內(nèi)容
對一些有邏輯可以跳轉(zhuǎn)的頁面，進行有效準(zhǔn)確的301重定向
更新網(wǎng)站地圖上報到搜索引擎
定期檢查網(wǎng)站中的死鏈接，進行修復(fù)或者清理

十、落地頁優(yōu)化

在頁面被收錄之后，其實重要的工作有兩個點：

本質(zhì)上，都是需要對落地頁（進站后訪問的第一個頁面）進行優(yōu)化。落地頁需要有符合用戶預(yù)期的高質(zhì)量內(nèi)容，同時還通過相關(guān)圖片、相關(guān)專題推薦的形式，去擴展用戶的瀏覽邊界，讓用戶沉浸的持續(xù)的在站內(nèi)各頁面流轉(zhuǎn)。

放刪除實例開發(fā)。

創(chuàng)建拖放刪除html文件，快速生成文檔結(jié)構(gòu)。

·通過ul li元素創(chuàng)建若干拖放元素，并設(shè)置相應(yīng)樣式。

·通過div delete元素創(chuàng)建回收站元素。

·在JS中聲明變量items獲取所有拖放元素，聲明變量del獲取回收站元素，聲明變量dragEl備用。

·通過循環(huán)為每個拖放元素添加draggable屬性，值為true。

·然后為每個拖放元素添加ondragstart事件，并將當(dāng)下正在被拖放的元素賦值到變量dragEl中。

·為回收站元素del添加ondragover事件。

·當(dāng)被拖放元素進入回收站元素范圍時，清除瀏覽器中的樣式，消除不至播放效果。

·最后當(dāng)拖放釋放鼠標(biāo)按鍵時，將被拖放元素移除。

到這里一個將元素拖到回收站時會移除當(dāng)前元素的拖放刪除效果就做好啦。

總結(jié)一下，今天我們了解了draggable屬性、ondragover事件、ondragstart事件以及ondrop事件。

·其中draggable屬性的屬性值設(shè)置為true，可以使目標(biāo)元素成為可拖動元素。

·ondragover事件可以在開始拖動元素時觸發(fā)。

·ondragover事件可以在被拖動的元素在被放置容器范圍內(nèi)拖動時觸發(fā)。

·ondrop事件可以在拖動時釋放鼠標(biāo)按鍵時觸發(fā)。

你學(xué)會了嗎？

端開發(fā)人員在構(gòu)建網(wǎng)站時需要做的一個決定是引入圖片的方式。它可以是<img>標(biāo)簽，或者是通過CSS background 屬性，還可以使用 SVG<image>。選擇正確的方式是很重要的，它對性能和可訪問性有很大的影響。

在本文中，我們會學(xué)習(xí)引入圖像的各種方式，以及每種方式的優(yōu)點和缺點，以及何時使用和為什么使用它們。

HTML img 元素

最簡單的情況下，img元素必須包含src屬性:

<img src="cool.jpg" alt="">

設(shè)置寬度和高度屬性

在頁面加載時，它們會在頁面圖像加載時發(fā)生一些布局變化。為了避免這種情況，我們可以為它設(shè)置width和height屬性:

<img src="cool.jpg" width="200" height="100" alt="">

雖然對某些人來說，這可能看起來太過簡單了，但它是有用的。我們用圖例的方式來理清這個概念：

我們看到到右側(cè)圖片即使尚未加載仍保留了空間？那是因為設(shè)置了寬度和高度。

通過 CSS 隱藏圖像

圖像可以用 CSS 隱藏。但是，它仍將加載在頁面中。因此，在執(zhí)行此操作時請小心。如果一個圖像應(yīng)該被隱藏，那么它可能是出于裝飾的目的。

img {
    display: none;
}

同樣，上面的方法也不能阻止瀏覽器加載圖像，即使它在視覺上是隱藏的。原因是<img>被認(rèn)為是一個被替換的元素，所以我們無法控制它所加載的內(nèi)容。

可訪問性問題

通過將alt屬性設(shè)置為有意義的描述，用來訪問 HTML 圖像，這對于屏幕閱讀器用戶非常有幫助。

然而，如果一個alt描述是不需要的，請不要刪除它，如果你這樣做，圖像src將被讀出,這對可訪問性非常不利。

不僅如此，如果圖像因為某種原因沒有加載，并且它有一個清晰的alt，它將作為一個回退顯示。同樣通過圖例來演示一下。

假設(shè)我們有以下圖片：

<img class="food-thumb" width="300" height="200" src="cheescake.jpg">

<img class="food-thumb" width="300" height="200" src="cheescake.jpg" alt="">

當(dāng)src無效，圖片沒有加載時。第一個沒有alt屬性，而第二個是空的alt屬性，下面是它們的視覺效果：

沒有alt的圖片仍然保留了它的空間，這很混亂，而且不利于訪問。而另一個alt為空的圖片，會折疊起來看起來像一個小點，這里因為它有邊框。

但是，當(dāng)alt屬性有值，它看起來是這樣的：

這不是一個很好的反饋嗎?此外，當(dāng)圖像源失敗時，可以向它們添加偽元素。

響應(yīng)式圖像

<img>的優(yōu)點在于可以針對特定視口大小將其擴展為具有多個版本的照片。我們有兩種不同的方式來生成一組響應(yīng)式圖像：

1.srcset屬性

<img src="small.jpg" srcset="medium.jpg 500w, large.jpg 800w" alt="">

這很簡單。對我來說，srcset可以根據(jù)屏幕寬度顯示多個圖像尺寸，這并不是一種完美的解決方案。它讓瀏覽器選擇合適的圖像，而我們對此無能為力。

2.picture 標(biāo)簽

另一種選擇是使用<picture>元素。我更喜歡這種方式，因為它更容易預(yù)測。

事例源碼：https://codepen.io/shadeed/pen/d703aee137f38c138f2323a0252548ac?editors=1100

調(diào)整圖像大小

對于<img>，我們還可以使用的一組很好的特性object-fit和object-position。它們可以控制<img>的大小和定位，就像CSS背景圖像。

object-fit 值有：fill, contain, cover, none, scale-down。例如：

img {
    object-fit: cover;
    object-position: 50% 50%;
}

CSS背景圖片

使用CSS背景顯示圖像時，它需要一個具有內(nèi)容或特定寬度或高度的元素。通常，背景圖像的主要用途應(yīng)該是用于裝飾目的。

何使用 CSS 背景圖片

首先，我們需要一個元素

// html
<div class="element">Some content</div>

// css
.element {
    background: url('cool.jpg');
}

多個背景

使用CSS背景圖片的好處是可以設(shè)置多個背景。考慮以下示例：

.element {
    background: url('cool-1.jpg'), url('cool-2.jpg');
}

隱藏圖像

我們可以在特定視口中隱藏和顯示圖像，如果未使用CSS設(shè)置圖片，則不會下載該圖片。與使用<img>相比，這是一個額外的好處。

在上面的示例中，我們有一個背景圖像，僅在視口寬度大于700px時顯示。

可訪問性問題

如果使用不當(dāng)，背景圖像可能會影響可訪問性。例如，將其用于文章主題，這對于文章至關(guān)重要。

非開發(fā)人員無法下載

普通人知道，如果要保存圖像，只需單擊鼠標(biāo)左鍵，然后選擇保存即可。CSS　背景圖片并非如此，我們必須先檢查元素，然后在DevTools中的url中打開鏈接，然后才能下載隨CSS添加的圖像。

偽元素

可以將偽元素與CSS背景圖像一起使用，例如在圖像頂部顯示覆蓋圖。對于<img>這是不可能的，直到我們?yōu)榀B加層添加單獨的元素。

SVG Image

SVG被認(rèn)為是一種圖像，它最大的功能是在不影響質(zhì)量的情況下進行縮放。此外，使用SVG，我們可以嵌入JPG、PNG或SVG圖像。參見下面的 HTML:

你是否注意到了prepareAspectRatio？它的作用是可以讓圖像占據(jù)SVG的整個寬度和高度，而不會被拉伸或壓縮。

當(dāng)<image>寬度較大時，它將填充其父級（SVG）寬度而不會拉伸。

這非常類似于 CSS 中的object-fit: cover或background-size: cover。

可訪問性問題

關(guān)于SVG 的可訪問性，這使我想起了<title>元素。例如，我們可以像下面這樣添加它：

我們還可以使用<desc>元素

非開發(fā)人員無法下載

必須先檢查元素并復(fù)制圖像的URL，然后才能下載嵌入SVG的圖像。但是，如果我們要防止用戶下載特定的圖像，這可能是一件好事。

用例

Hero Section

在構(gòu)建hero section時，有時我們需要在標(biāo)題和其他內(nèi)容下方的圖像。參見下圖：

一些要求：

背景圖片能夠動態(tài)替換
圖片有一個覆蓋層，讓閱讀更容易
圖像有三種尺寸:小號、中號和大號。每一個都是針對一個特定的視口。

在開始解決方案之前，讓我們先問問自己這種背景的性質(zhì)。這是一些入門問題：

為用戶保留這個圖像很重要嗎，還是可以跳過它？
我們是否需要在所有視口尺寸上使用它？
它是靜態(tài)的還是動態(tài)變化的？

解決方案1

通過使用多個CSS背景，我們可以將一個背景作為疊加層，將另一個背景作為實際圖像。請看下面的CSS：

.hero {
    background-image: linear-gradient(rgba(0, 0, 0, 0.4), 
                                      rgba(0, 0, 0, 0.4)), var('landscape.jpg');
    background-repeat: no-repeat;
    background-size: 100%, cover;
}

雖然此解決方案有效，但可以使用 JavaScript 動態(tài)更改背景圖片。見下面：

<section class="hero" 
   style="background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('landscape.jpg');">
  <!-- Hero content -->
</section>

這里添加了一個內(nèi)聯(lián)樣式。雖然這是可行的，但它看起來很丑，而且不實用。

也許我們可以使用CSS變量？讓我們來探索一下。

<section class="hero" style="--bg-url: url('landscape.jpg')">
  <!-- Hero content -->
</section>

現(xiàn)在，我們可以輕松地更新--bg-url變量來動態(tài)更改背，這比內(nèi)聯(lián)的東西好一百萬倍。

小結(jié)：

這種方案只有在圖片不重要才適用
這種方案只適合一些靜態(tài)網(wǎng)站，因為沒有從后臺拉取圖片

事例源碼：https://codepen.io/shadeed/pen/17978a2d824fd51a3b27c2c2d099a522

解決方案2

該方案是可以使用一個 img 標(biāo)簽：

<section class="hero">
  <h2 class="hero__title">Using Images in CSS</h2>
  <p class="hero__desc">An article about which and when to use</p>
  <img src="landscape.jpg" alt="">
</section>

在CSS中，我們需要將圖片絕對定位在內(nèi)容下方，并且還需要使用偽元素作為疊加層。

此解決方案的優(yōu)點在于，可以輕松更改圖片的src屬性。同樣，如果圖像很重要，它將會更加有用。

另外，我喜歡使用HTML <img>的功能是能夠在未加載圖片的情況下添加回退。回退至少可以使內(nèi)容保持可讀性。

.hero img {
    /* Other styles */
    background: #2962ff;
  }

在圖片源路徑不對時，背景顏色是一個代替方面。

事例源碼：https://codepen.io/shadeed/pen/73a2ca78141fcab39d6db9d5bd982728?editors=1100

網(wǎng)站 Logo

網(wǎng)站 Logo是很重要的，因為它可以將網(wǎng)站與其他網(wǎng)站區(qū)分開。要嵌入徽標(biāo)，我們有一些選擇：

img -> png,jpg, orsvg
內(nèi)聯(lián)SVG
背景圖

接下來，我們來看看哪種方式更合適。

帶有很多細節(jié)的 Logo

當(dāng)徽標(biāo)具有許多細節(jié)或形狀時，將其用作嵌入式SVG可能沒有好處。我建議使用<img>，圖像類型可以是png，jpg或svg。

需要動畫的簡單 Logo

我們有一個簡單的logo ，其中包含形狀和文字。懸停時，形狀和文本需要更改顏色。怎么做？對我來說最好的解決方案是使用嵌入式SVG。

HTML

CSS

.logo rect,
.logo text {
  transition: 0.3s ease-out;
}

.logo:hover rect,
.logo:hover text {
  fill: #4a7def;
}

事例源碼：https://codepen.io/shadeed/pen/4005077cc543647148007f4834c0585c?editors=0100

響應(yīng) Logo

這讓我想起了Smashing Magazine的logo。我喜歡它從一個小圖標(biāo)變成一個完整的徽標(biāo)。參見下面的模型：

完美的解決方案是使用<picture>元素，可以在其中添加logo 的兩個版本。如下所示：

<a class="logo" href="/">
    <picture>
      <source media="(min-width: 1350px)" srcset="sm-logo--full.svg">
        <img src="sm-logo.svg" alt="Smashing Magazine">
        </picture>
  </a>

在CSS中，我們需要將視口的寬度更改為等于或大于1350px。

.logo {
  display: inline-block;
  width: 45px;
}

@media (min-width: 1350px) {
  .logo {
    width: 180px;
  }
}

這是簡單而直接的解決方案。

事例源碼：https://codepen.io/shadeed/pen/6cf55d4e87b7c443820bd5f8694587a8?editors=1100

帶有漸變的Logo

當(dāng) logo 具有漸變時，從Illustrator或Sketch等設(shè)計應(yīng)用程序?qū)⑵鋵?dǎo)出的過程可能并不完美，有時會中斷。

使用SVG，我們可以輕松地為logo添加漸變。我添加了<linearGradient>并將其用作文本填充。

事例源碼：https://codepen.io/shadeed/pen/9bf3bee3d08a40411effb5d65f25b5c1?editors=1100

用戶頭像

對于用戶頭像，它們具有很多形狀，但最常見的是矩形或圓形。在此用例中，會介紹一個對你有用的重要技巧。

首先，讓我們看下面的模型。請注意，我們有一個完美的化身，并且100％清晰。

但是，當(dāng)用戶上傳半白色頭像或非常淺的頭像時，這個設(shè)計就不太好了。

請注意，在上面的模型中，除非真正專注看，否則尚不清楚其中是否有一個圓圈。這是一個問題。為了解決這個問題，我們應(yīng)該在頭像內(nèi)添加邊框，以防圖像太亮看不清除。

我們有幾個選擇

img元素
img 和 div 元素
div與CSS背景
SVG image

哪一個最好？我們來探索探索。

使用 HTML `<img>`

你可能首先想到的是添加一個邊框，對吧?讓我們來探討一下這個問題。

.avatar {
    border: 2px solid #f2f2f2;
}

我們的目標(biāo)是使內(nèi)部邊框與圖像融合在一起，這種不太實用。

使用 `<img>` 和 `<div>` 元素

現(xiàn)在的問題是，要添加內(nèi)部邊框，我們不能使用box-shadow，因為它無法在圖像上使用。解決方案用<div>包裹頭像中，并添加專用于內(nèi)部邊框的元素。

HTML

<div class="avatar-wrapper">
     <img class="avatar" src="shadeed2.jpg" alt="A photo of Ahmad Shadeed">
     <div class="avatar-border"></div>
</div>

CSS

.avatar-wrapper {
  position: relative;
  width: 150px;
  height: 150px;
}

.avatar-border {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid rgba(0, 0, 0, 0.1);
}

通過在<div>上使用透明度10%黑色的邊框，我們可以確保邊框與深色圖像融合，并且只有在圖像較亮的情況下才可見。參見下面的模型：

事例地址：https://codepen.io/shadeed/pen/da23d9a18dac14692a97e1bc6e86a5ff?editors=1100

使用`<div>`與CSS背景

如果我要使用<div>來顯示頭像，則可能表示該圖像具有裝飾性。我記得一個用例，它是分散在頁面中的隨機頭像。

HTML

<div class="avatar" style="--img-url: url(shadeed2.jpg)"></div>

CSS

.avatar {
  background: var(--img-url) center/cover;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px rgba(#000, 0.1);
}

事例地址:https://codepen.io/shadeed/pen/39eb9dac364ec15b9ab9bae7fe3a7148?editors=0100

使用 SVG `<image>`

對我來說，這是最有趣的解決方案。我在檢查Facebook的新設(shè)計時注意到了它。

先對其進行剖析，它包含以下內(nèi)容：

用于將圖像剪切為圓形(circle )的蒙版(mask )
對其應(yīng)用了蒙版的組
image本身帶有preserveAspectRatio=“ xMidYMid”
用于內(nèi)邊界的圓

circle {
  stroke-width: 2;
  stroke: rgba(0, 0, 0, 0.1);
  fill: none;
}

事例地址：https://codepen.io/shadeed/pen/b17d34b5c23cc90fdc4573779544c8c7?editors=0100

作者：ahmad shadeed 譯者：前端小智

原文：https://developers.google.com/web/fundamentals/design-and-ux/responsive/images

在線咨詢

上一篇：零基礎(chǔ)一篇文章實現(xiàn)網(wǎng)頁輪播圖效果，我太難了
下一篇：「css」BFC-塊級格式化上下文的消化與吸收

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

圖庫網(wǎng)站SEO（搜索引擎優(yōu)化）案例

背景

一、SEO基本原理

二、關(guān)鍵詞優(yōu)化

三、元標(biāo)簽優(yōu)化

四、URL結(jié)構(gòu)優(yōu)化

五、網(wǎng)站導(dǎo)航和內(nèi)鏈

六、外鏈

七、速度優(yōu)化

八、移動端優(yōu)化

九、創(chuàng)建站點地圖

十、落地頁優(yōu)化

HTML img 元素

設(shè)置寬度和高度屬性

通過 CSS 隱藏圖像

可訪問性問題

響應(yīng)式圖像

調(diào)整圖像大小

CSS背景圖片

何使用 CSS 背景圖片

多個背景

隱藏圖像

可訪問性問題

非開發(fā)人員無法下載

偽元素

SVG Image

可訪問性問題

非開發(fā)人員無法下載

用例

Hero Section

解決方案1

解決方案2

網(wǎng)站 Logo

帶有很多細節(jié)的 Logo

需要動畫的簡單 Logo

響應(yīng) Logo

帶有漸變的Logo

用戶頭像

使用 HTML `<img>`

使用 `<img>` 和 `<div>` 元素

使用`<div>`與CSS背景

使用 SVG `<image>`

您的項目需求