使用 srcset 自動選擇適當的圖片大小。
根據 HTTP 封存檔,一般行動版網頁大小超過 2.6 MB,其中超過三分之二的權重是圖片。這是最佳化的絕佳機會!
摘要
- 請勿儲存大於顯示大小的圖片。
- 請為每張圖片儲存多個尺寸,並使用
srcset
屬性,讓瀏覽器選擇最小的大小。w
值會告知瀏覽器每個版本的寬度:
<img src="small.jpg"
srcset="small.jpg 500w,
medium.jpg 1000w,
large.jpg 1500w"
alt="…">
儲存適當大小的圖片
只要使用符合螢幕大小的圖片,就能加快網站速度,並減少資料飢餓感。換句話說,請在儲存圖片時提供適當的寬度和高度
請看看下方的圖片。
兩者看起來幾乎相同,但其中一個檔案大小比另一個檔案大小高出 10 倍以上。
第一張圖片在儲存時大於顯示尺寸,因此檔案要大很多。兩張圖片的固定寬度為 300 像素,因此使用相同大小儲存的圖片會很合理。
如果是固定寬度,請使用與顯示大小相同尺寸儲存的圖片。
不過,如果顯示比例不同,該怎麼辦?
在多裝置時代,圖片不一定會以單一固定尺寸顯示。
圖片元素可能具有百分比寬度,或者屬於回應式版面配置,能根據螢幕大小變更圖片顯示大小。
...以及 Retina 等 Pixel 飢餓裝置呢?
協助瀏覽器選擇正確的圖片大小
如果您可以呈現不同尺寸的圖片,再讓瀏覽器選擇最適合裝置和螢幕大小的尺寸,那該有多好?很可惜的是,還有 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
對下圖的運作情形。如果使用筆記型電腦或桌上型電腦,請變更瀏覽器視窗大小,然後重新開啟這個頁面。然後使用瀏覽器工具的「網路」面板查看所用圖片。
(您必須在無痕或私密視窗中進行操作,否則系統會快取原始圖片檔)。
如何建立多種大小的圖片?
您必須針對要與 srcset
搭配使用的每個圖片,提供多種尺寸。
如果是一次性圖片 (例如主頁橫幅),您可以手動儲存不同大小的圖片。如果您有大量圖片 (例如產品相片),就需要自動進行處理。解決方法有兩種
將圖片處理功能納入建構程序
在建構過程中,您可以新增步驟,建立不同大小的映像檔版本。詳情請參閱「使用 Imagemin 壓縮圖片」。
使用圖片服務
使用 Cloudinary 等商業服務,或是您自行安裝並執行的 Thumbor 等開放原始碼軟體,即可自動建立及傳送映像檔。
只要上傳高解析度圖片,該圖片服務就會自動根據網址參數,建立及提供不同的圖片格式和大小。舉例來說,請開啟 Cloudinary 中的這張範例圖片,然後嘗試變更網址列中的 w
值或副檔名。
圖片服務還有其他進階功能,例如可以針對不同圖片大小自動進行「智慧裁剪」,以及自動向支援此格式 (而非 JPEG) 的瀏覽器傳送 WebP 圖片,而無須變更副檔名。
如果圖片繪製成不同大小,該怎麼辦?
在這種情況下,您必須使用 <picture>
元素做為「藝術方向」:提供不同大小的圖片或裁剪圖片。詳情請參閱「藝術方向」程式碼研究室。
那像素密度呢?
高階裝置的實體像素較小 (密集)。舉例來說,高階手機每列的像素數量可能高達兩或三倍,是較便宜的裝置。
這可能會影響您儲存圖片所需的大小。我們不會在這裡詳細說明,但您可以參閱「使用密度描述元」程式碼研究室,瞭解更多資訊。
圖片的顯示大小如何?
您可以使用 sizes
讓 srcset
更臻完善。
如果不使用此屬性,瀏覽器從 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 和「指定多個版位寬度」程式碼研究室中瞭解實際運作情形。
瀏覽器是否支援?
全球超過 90% 的瀏覽器支援 srcset
和 sizes
。
如果瀏覽器不支援 srcset
或 sizes
,系統將改回使用 src
屬性。
這會讓 srcset
和 sizes
有出色的進展!
瞭解詳情
請查看 web.dev 的「將圖片最佳化」一節,深入瞭解圖片最佳化作業。如需更多引導式體驗,請考慮使用 Udacity 提供的免費「回應式圖片」(回應式圖片) 課程。