今天我們將討論 Web 響應式圖像，這是一個非常流行的話題，也有很多問題。

如果你搜索這個主題，你會發現無數的文章有各種各樣的解釋，但我不會重複這些，並以不同的方式教你。

正確加載圖像，提高您的 SEO 排名並為您的網站提供更好的用戶體驗。

什麼是響應式圖像？

響應式圖像將（應該）自動調整以適應屏幕尺寸。 但是……這是正確的做法嗎？ 嗯，是的，也不是。 如果您對此進行谷歌搜索或查看諸如 Bootstrap 之類的現代框架，您會注意到它們對“響應式圖像”的定義是一個簡單的 CSS，類似於：

1max-width:  100%;
2height:  auto;

雖然這“有效”，但並不完全正確。有幾個原因，但最重要的一個是圖像大小。我不是在談論圖像的“寬度/高度”，而是在談論以千字節/兆字節為單位的實際圖像大小。

大多數網站（就像這些年來我見過的 80% 的網站一樣）在他們的網站上使用非常大的圖像，然後簡單地“縮放”它們。這樣的圖像通常從 1000px 到 4000px，我什至看到了 8000px ！ （這有多瘋狂）。

這些圖像的大小往往非常大，從 1 MB 到 10 甚至 20 MB。我很少看到人們在導出圖像時會壓縮圖像。話雖如此，想像一下，當您有一個包含 5、10、20 或更多圖像的圖像重的網站並且用戶在移動設備上訪問您的網站時。即使在 5G 上，也需要為圖像下載大量數據，更不用說其餘的了。

如何創建響應式圖像？

瀏覽器在圖像源集（srcset）的支持方面提供幫助。使用此功能，我們可以有效地擁有不同尺寸的圖像的多個版本，瀏覽器將根據屏幕尺寸選擇正確的版本。現在這是響應式的！

然而，由於多種原因，大多數人無法處理圖像源集，從“我不知道”到“我不明白”等等。

隨著技術的發展，我們現在可以使用在線工具和 API 為我們自動創建這些源集。但是請記住，自動創建這些並不意味著您可以簡單地複制粘貼結果並期望它正常工作。

從我所做的所有工作和測試來看，沒有“一刀切”的解決方案，你總是需要做一些額外的工作。

選擇正確的圖像 HTML 標籤

這是您必須了解的第一件事，也是最重要的事情。您可以使用傳統的 <img /> 或現代的 <picture> 標籤。

每個人都有自己的陷阱，但根據我自己的經驗，<picture> 總是贏。這個標籤被瀏覽器廣泛支持，所以這不應該是一個問題。

沒有自動方法可以為動態網站生成正確的尺寸（據我所知）。以眾所周知的 WordPress 為例，它會根據您上傳的圖片和放置位置生成不規則和錯誤的大小。

使用 img 標籤

img 標籤在大多數網站上； 對於響應式圖像，<img /> 標籤與 srcset 屬性相結合，但我可以自信地告訴你，它們都不能正常工作。

問題之一是 <img /> 標記在某些瀏覽器（例如 Chrome）上無法正常運行。 實際上，我在 stackoverflow.com 上打開了一個問題，對此沒有任何解釋 為什麼。

另一個問題是正確設置“sizes”屬性是一件很痛苦的事情。 有很多文章的解釋非常生硬和不完整，坦率地說，我覺得非常沮喪。

話雖如此，我不會討論使用 <img /> 來處理響應式圖像，因為它毫無意義（在我看來）。

使用圖片標籤

我認為 picture 標籤是最好的，它允許我們操縱和指示瀏覽器加載圖像 我們想。

它還支持許多其他功能，例如指定藝術方向、替代圖像格式等。

不過沒問題，是時候讓這個瀏覽器[今年死掉](https://blogs.windows.com/windowsexperience/2021/05/19/the-future-of-internet-explorer-on-windows-10 -is-in-microsoft-edge/)。

生成響應式圖片尺寸

如上所述，我們可以使用許多在線工具來調整大小並為我們生成正確的圖像和源代碼，只需點擊幾下。

我建議你使用這個：https://responsivebreakpoints.com/ 作為起點。 該工具將調整您的圖像大小並生成斷點以具有響應圖像。

例如他們網站上的狗圖片，將有幾個不同的圖像調整大小和它們各自的 HTML 代碼：

 1<picture>
 2	<source
 3		media="(max-width: 767px)"
 4		sizes="(max-width: 1534px) 100vw, 1534px"
 5		srcset="
 6		dog_ar_1_1,c_fill,g_auto__c_scale,w_200.jpg 200w,
 7		dog_ar_1_1,c_fill,g_auto__c_scale,w_493.jpg 493w,
 8		dog_ar_1_1,c_fill,g_auto__c_scale,w_707.jpg 707w,
 9		dog_ar_1_1,c_fill,g_auto__c_scale,w_877.jpg 877w,
10		dog_ar_1_1,c_fill,g_auto__c_scale,w_1032.jpg 1032w,
11		dog_ar_1_1,c_fill,g_auto__c_scale,w_1108.jpg 1108w,
12		dog_ar_1_1,c_fill,g_auto__c_scale,w_1259.jpg 1259w,
13		dog_ar_1_1,c_fill,g_auto__c_scale,w_1353.jpg 1353w,
14		dog_ar_1_1,c_fill,g_auto__c_scale,w_1468.jpg 1468w,
15		dog_ar_1_1,c_fill,g_auto__c_scale,w_1534.jpg 1534w">
16	<source
17		media="(min-width: 768px) and (max-width: 991px)"
18		sizes="(max-width: 1983px) 70vw, 1388px"
19		srcset="
20		dog_ar_4_3,c_fill,g_auto__c_scale,w_538.jpg 538w,
21		dog_ar_4_3,c_fill,g_auto__c_scale,w_793.jpg 793w,
22		dog_ar_4_3,c_fill,g_auto__c_scale,w_1004.jpg 1004w,
23		dog_ar_4_3,c_fill,g_auto__c_scale,w_1198.jpg 1198w,
24		dog_ar_4_3,c_fill,g_auto__c_scale,w_1238.jpg 1238w,
25		dog_ar_4_3,c_fill,g_auto__c_scale,w_1384.jpg 1384w,
26		dog_ar_4_3,c_fill,g_auto__c_scale,w_1388.jpg 1388w">
27	<source
28		media="(min-width: 992px) and (max-width: 1199px)"
29		sizes="(max-width: 2400px) 60vw, 1440px"
30		srcset="
31		dog_ar_16_9,c_fill,g_auto__c_scale,w_596.jpg 596w,
32		dog_ar_16_9,c_fill,g_auto__c_scale,w_877.jpg 877w,
33		dog_ar_16_9,c_fill,g_auto__c_scale,w_1086.jpg 1086w,
34		dog_ar_16_9,c_fill,g_auto__c_scale,w_1314.jpg 1314w,
35		dog_ar_16_9,c_fill,g_auto__c_scale,w_1440.jpg 1440w">
36	<img
37		sizes="(max-width: 7000px) 40vw, 2800px"
38		srcset="
39		dog_c_scale,w_480.jpg 480w,
40		dog_c_scale,w_713.jpg 713w,
41		dog_c_scale,w_1036.jpg 1036w,
42		dog_c_scale,w_1180.jpg 1180w,
43		dog_c_scale,w_1313.jpg 1313w,
44		dog_c_scale,w_1433.jpg 1433w,
45		dog_c_scale,w_1606.jpg 1606w,
46		dog_c_scale,w_1748.jpg 1748w,
47		dog_c_scale,w_1884.jpg 1884w,
48		dog_c_scale,w_2015.jpg 2015w,
49		dog_c_scale,w_2133.jpg 2133w,
50		dog_c_scale,w_2260.jpg 2260w,
51		dog_c_scale,w_2377.jpg 2377w,
52		dog_c_scale,w_2345.jpg 2345w,
53		dog_c_scale,w_1871.jpg 1871w,
54		dog_c_scale,w_2800.jpg 2800w"
55		src="dog_c_scale,w_2800.jpg"
56		alt="">
57</picture>

注意它為我們覆蓋了多少屏幕尺寸，很酷吧？但是將其複制粘貼到您的網站是否足夠好？不。

這些圖像源集的最大問題是 sizes 和 media 屬性。理解起來非常複雜，使其正常工作更加複雜。

話雖如此，您需要做的是使代碼更短且更易於理解。在我的網站（你正在閱讀的那個）上，我使用了 Bootstrap 提供的通用響應斷點並創建了我自己的集合。

自己創建響應式圖像尺寸

最好的（坦率地說，唯一的解決方案）是自己創建圖像標籤。

當您從頭開始開發定製網站時，這對您非常有利，但是當您使用 WordPress 之類的東西時，那就是另一回事了，將會有另一篇關於此的文章。

作為起點，我需要一種清晰而簡單的方法來理解設備斷點；所以我使用了 Bootstrap 提供的非常可靠的：

斷點設備方面
X-小小型設備（人像手機，小於 576 像素）<576px
小的小型設備（橫向手機，576px 及以上）≥576px
中等的中型設備（平板電腦，768 像素及以上）≥768px
大的大型設備（台式機，992 像素及以上）≥992px
特大號大型設備（大型桌面，1200 像素及以上）≥1200px
特大號大型設備（更大的桌面，1400 像素及以上）≥1400px

通過以上內容，我創建了我的“自己的”圖像源集，根據上述設備尺寸加載適當的圖像：

1<picture>
2	<source srcset="" media="(min-width: 1400px)">
3	<source srcset="" media="(min-width: 1200px)">
4	<source srcset="" media="(min-width: 992px)">
5	<source srcset="" media="(min-width: 768px)">
6	<source srcset="" media="(min-width: 576px)">
7	<source srcset="" media="(min-width: 320px)">
8	<img src="" width="" height="" class="" alt="" >
9</picture>

這讓我對應該發生什麼以及如何發生有一個清晰的認識和理解。 換句話說，我知道每個設備上應該加載什麼圖像並且它會這樣做。

雖然這似乎可以使用，但它還沒有完全準備好。 在特定設備上加載這些圖像還不夠好，因為圖像可能仍然太大。

示例 1：

  • 在大型設備（大型桌面，1200 像素及以上）上，您嵌入圖像集的容器的固定大小為 800 像素
  • 瀏覽器將查看您的視口，例如 1920 像素，它將加載 1400 像素大小的圖像（實際上您需要 768 像素大小的圖像……）

示例 2：

  • 在任何設備上，您嵌入圖像集的容器是 400 像素的固定大小（例如，可以是卡片或簡單的盒子）
  • 瀏覽器將查看您的視口，例如 1920 像素，它將加載 1400 像素大小的圖像（實際上您需要 320 像素的圖像大小……）

話雖如此，您正在加載錯誤的圖像，這會讓您和您的用戶付出代價。首先，您會降低速度（順便會影響您的 SEO 排名），然後如果用戶使用移動設備或帶寬較慢，則您的用戶將永遠等待圖像加載。

正確的解決方案是調查您嵌入圖像的容器並確定合適的大小。

您可以通過檢查頁面並模擬不同的設備來非常輕鬆地做到這一點，通常容器或多或少保持相同。

因此，對於上述示例 1，我已將代碼修改如下：

1<picture>
2	<source srcset="" media="(min-width: 1200px), (min-width: 1400px), (min-width: 2500px)">
3	<source srcset="" media="(min-width: 992px)">
4	<source srcset="" media="(min-width: 768px)">
5	<source srcset="" media="(min-width: 576px)">
6	<source srcset="" media="(min-width: 320px)">
7	<img src="" width="" height="" class="" alt="">
8</picture>

這是什麼意思？ 這很不言自明，但無論如何我都會解釋：

  • 在最小寬度 320px 的設備上，加載 320px 的圖像
  • 在最小寬度 576px 的設備上，加載 576px 的圖像
  • 在最小寬度 768px 的設備上，加載 768px 的圖像
  • 在最小寬度 992px 的設備上，加載 992px 的圖像
  • 在最小寬度 1200px 或 1400px 或 2500px 的設備上加載 1200px 圖像

最後一行確保當容器大小僅為 800 像素（或在我的情況下單擊展開文章時為 1200 像素）時瀏覽器不會加載更大的圖像大小

我發現上述內容在加載正確的圖像尺寸方面幾乎是完美的。甚至 Google Pagespeed 也喜歡它並且不會產生任何警告，因為我們正在加載正確的圖像尺寸。

測試你的響應式圖片

我很確定在閱讀完上述內容後，您大致了解如何測試您的圖像是否正確加載，但是我仍然會解釋。

如果您有許多圖像，測試過程可能會令人生畏，但值得付出努力。

您需要做的很簡單，只需要一些時間：

  • 打開您想要的瀏覽器並加載您的頁面
  • 打開開發人員工具並轉到網絡選項卡並僅選擇“圖像”過濾器
  • 在多個設備（移動設備、平板電腦等）上刷新您的頁面並查看加載了哪些圖像

就是這樣，沒有什麼花哨的。

＃＃＃ 技巧和竅門

  • 如果您有很多圖像（不止一個標題），請使用 loading=lazy 屬性。您可以在 此處 閱讀更多相關信息。
  • 如果您不能自己導出圖像/調整它們的大小，您可以使用在線服務來執行此操作。他們還將提供 CDN，可以快速加載您的圖像。我建議您使用 Cloudflare Images 。
  • 正確命名您的圖像，這非常重要。如果您沒有正確命名您的圖像（例如 image-small.jpg 或 image-320.jpg），那麼您在測試時將無法輕鬆確定正在加載的圖像。

好了，就是這樣，希望這篇文章對你有所幫助。