網站效能的重要提示

使用 srcset 即可自動選擇合適的圖片大小。

根據 HTTP 封存, 一般行動網頁的檔案大小超過 2.6 MB,超過三分之二 重量是圖片這就是最佳化的大好機會!

依內容類型區分的行動版網頁平均位元組數

摘要

  • 不要儲存大於顯示大小的圖片。
  • 為每張圖片儲存多種尺寸,然後使用 srcset敬上 屬性讓瀏覽器能夠選擇最小尺寸。 w 值會向瀏覽器指出各個版本的寬度:
<img src="small.jpg"
     srcset="small.jpg 500w,
             medium.jpg 1000w,
             large.jpg 1500w"
     alt="…">

儲存適當大小的圖片

您可使用 符合顯示大小的尺寸換句話說,在圖片上 設定時,請使用寬度和高度屬性。

請看下方的圖片。

這兩個檔案看起來幾乎完全相同,但只有一個檔案大小超過 10 次 因此大於 100%

小狗與連帽:兩名 10 週的不老虎小貓。
儲存寬度:1000 px,檔案大小 184 KB
小狗與連帽:兩名 10 週的不老虎小貓。
儲存寬度:300 像素,檔案大小 16 KB

第一張圖片是依尺寸儲存,因此檔案較大 遠大於顯示大小兩張圖片都顯示固定 寬度為 300 像素,因此建議使用儲存在相同裝置的映像檔 大小

如果是固定寬度,請使用儲存尺寸與 顯示大小

但是...如果顯示大小不同,該怎麼辦?

在多款裝置中,圖片不一定是以固定大小顯示。

圖片元素可能有百分比寬度,或屬於回應式版面配置的一部分 其中圖片顯示大小會配合螢幕大小調整尺寸。

...對 Retina 螢幕這類容易飢餓的裝置有什麼影響呢?

協助瀏覽器選擇適當的圖片大小

如果您可以讓每張圖片不同大小,那就太棒了 要讓瀏覽器選擇最適合裝置的尺寸和顯示大小? catch-22 並找出成效最佳的圖片。瀏覽器會根據 但是如果不下載圖片進行檢查,就無法得知圖片的寬度。

這時 srcset 能夠派上用場。您儲存了不同大小的圖片 向瀏覽器指出每個版本的寬度:

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

w 值會顯示每張圖片的寬度 (以像素為單位)。例如: small.jpg 500w 會告知瀏覽器 small.jpg 為 500 像素寬。讓瀏覽器能選擇最小的圖片大小 實際情況取決於螢幕類型和可視區域大小 然後下載圖片來檢查其大小

您可以從下方圖片查看「srcset」的實際運作情形。如果你使用筆記型電腦 請變更瀏覽器視窗大小,然後重新開啟這個網頁。 然後使用瀏覽器工具的「網路」面板查看使用的圖片。 (您必須在無痕或私人視窗中進行,否則 即可快取原始圖片檔)。

獅子和小精靈:20 週前的灰色小袋鼠

如何建立多種圖片大小?

您需要為要使用的每張圖片提供多種尺寸 只在 srcset

針對一次性圖片 (例如主頁橫幅),您可以手動儲存不同大小。如果 例如產品相片等大量圖片 就必須自動化 為此,有兩種方法

在建構程序中加入圖片處理機制

在建構程序中,您可以新增步驟,以建立不同大小 或是映像檔的版本請參閱「使用 Imagemin 壓縮圖片」 。

使用圖片服務

您可以使用以下商業服務自動製作及提交圖片: Cloudinary,或同等的開放原始碼,例如 您自行安裝與經營的幽默感

你會自動上傳高解析度圖片,而且圖片服務會自動顯示。 根據網址建立並放送不同的圖片格式和大小 參數。舉例來說,請開啟 Cloudinary 上的這個範例圖片,然後嘗試變更 w 值或網址列中的副檔名。

圖片服務還提供更進階的功能,例如 「智慧裁剪」,並自動提交 WebP 圖片 如此不必變更 JPEG 檔案,而是支援此格式的瀏覽器 。

Chrome 開發人員工具顯示 Cloudinary 所提供檔案的 WebP 內容類型標頭

如果圖片在不同大小的情況下無法呈現最佳效果,該怎麼辦?

在這種情況下,您必須使用 <picture> 元素做為「藝術方向」: 提供不同大小的圖片或圖片裁剪。瞭解詳情 請查看「圖片方向」程式碼研究室。

那像素密度呢?

高階裝置的實體像素較小 (密度較高)。舉例來說 高階手機的每一列像素 像素化的裝置中。

這可能會影響圖片儲存的大小。我們不會離開 詳細說明,但你也可以前往 「使用密度描述元」程式碼研究室。

圖片的顯示大小怎麼辦?

您可以使用 sizessrcset 更臻完善。

如果沒有這個視窗,瀏覽器在選擇 擷取自 srcset 的圖片sizes 屬性會向瀏覽器指出 圖片元素就會顯示 圖片檔案,再進行版面配置計算。

在以下範例中,sizes="50vw" 會告知瀏覽器此圖片將 顯示在可視區域寬度的 50% 處

<img src="small.jpg"
     srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w"
     sizes="50vw"
     alt="…">

您可以在下列網址查看實際運作情況: simpl.info/sizes 和「指定多個運算單元寬度」程式碼研究室。

瀏覽器支援呢?

srcsetsizes 支援超過 90% 全域瀏覽器

如果瀏覽器不支援 srcsetsizes,就會改回使用 src 屬性。

這會讓 srcsetsizes 的漸進式強化功能更臻完善!

瞭解詳情

查看「最佳化圖片」一節 的 web.dev 中,以便深入瞭解圖片最佳化作業。如需更多指引 不妨試試免費的「回應式」設計 圖片"課程,提供者: Udacity.