如何處理Web圖片優化？

作者：LeanCloud 2019-12-23 10:20:12

缺乏經驗的開發者通常沒有意識到這一潛在問題，也不了解各種優化圖片的工具和方法。本文的目標是介紹優化 web 圖片的主要工具和方法。

未優化的圖片是影響網站性能的主要因素之一，尤其會影響初次加載。取決于圖像的分辨率和畫質，圖片可能占據整個網站流量的 70%.

生產環境出現未優化的圖片并顯著影響初次加載速度的現象還是挺常見的。缺乏經驗的開發者通常沒有意識到這一潛在問題，也不了解各種優化圖片的工具和方法。

本文的目標是介紹優化 web 圖片的主要工具和方法。

計算 JPG 文件尺寸

未壓縮圖片的尺寸很容易計算，只需將圖片的長寬相乘（px 值），再乘以 3 字節（因為 RGB 色彩系統使用 24 個位元）。所得結果除以 1,048,576（1024 * 1024）即得到兆字節。

image_size = (image_width * image_height * 3) / 1048576

比如，計算分辨率為 1366px x 768px 的未壓縮圖片的大小：

1366 * 768 * 3 / 1048576 = 3Mb

現在網站的尺寸平均在 2Mb 和 3Mb 之間，想象一下，一張未壓縮的圖片就占掉了 80% 的流量。在網速較慢的移動網絡上，3Mb 大小的圖片要花很久才能加載完畢。如果等待網站加載的用戶大部分時間花在等待單張圖片加載，那網站會損失不少流量。想想就可怕，是嗎？

所以，在保證圖片分辨率和畫質可接受的前提下，我們可以做什么來優化下圖片呢？

在線圖片優化

如果你的項目是一個簡單的靜態網站，只有少量不經常變動（甚至從來不會變動）的圖片，那么你可以直接使用在線工具。這些工具使用各種算法壓縮圖像，效果很不錯，對簡單項目而言完全夠用。

就我個人所知，比較著名的在線工具有：

Compressor.io，支持 JPG、PNG、SVG、GIF，每次上傳 1 個文件
Squoosh，支持 JPG、PNG、SVG、GIF，每次上傳 1 個文件
Optimizilla，支持 JPG、PNG，最多每次上傳 20 個文件
TinyPNG，支持 JPG、PNG，最多每次上傳 20 個文件
SVGMinify，支持 SVG，每次上傳 1 個文件
svgomg，支持 SVG，每次上傳 1 個文件

自動化解決方案

然而，如果你做的是多人協作的復雜項目，使用大量圖片，在加入每張圖片時都手動操作一下很乏味。同時，還存在由于人為錯誤或其他因素導致一些圖片沒有優化的風險。

復雜項目常常使用同樣復雜的構建系統，比如 Gulp、Webpack、Parcel。配置一下這類構建系統，加入圖片優化插件很方便。這樣就可以完全自動化圖片優化過程，在項目中加入圖片后就可以優化它們。

就我所知，最有名的插件是 imagemin，可以作為命令行工具使用，也可以作為構建工具的插件使用：

imagemin-cli
gulp-imagemin
imagemin-webpack
parcel-plugin-imagemin

圖片加載優化

我們前面介紹了如何通過壓縮圖片降低文件尺寸，但不過多改變圖片分辨率和影響畫質。盡管優化圖片后文件尺寸能降低不少，但一次性加載大量優化過的圖片（比如電商網站的商品列表頁面）還是會影響性能。

懶加載

懶加載也叫按需加載，意思是僅加載當前視圖（用戶屏幕顯示范圍）內的圖片，不加載其他圖片（直到它們出現在當前視圖內時才加載）。

只有較新版本的瀏覽器才支持原生的懶加載特性，不過有許多基于 JavaScript 的方案。

原生懶加載

<img src="image.jpg" loading="lazy" alt="Sample image" />

基于 JavaScript 的方案

就我所知，最知名的方案有：

verlok/lazyload

yall.js

Blazy （現在沒有維護）

漸進式圖片

盡管懶加載在性能方面表現出色，但是用戶滾動屏幕后需要盯著空白區域等待圖片加載，這樣的用戶體驗不太好。網速慢的情況下，下載圖片會非常慢。所以我們還需要漸進式圖片。

漸進式圖片的意思是在高畫質圖像加載完之前會先顯示低畫質版本。低畫質版本由于畫質低、壓縮率高，尺寸很小，加載很快。在兩者之間我們也可以根據需要顯示不同畫質的版本。

類似于先加載頁面的骨架，漸進式圖片這一技術讓用戶產生圖片加載變快的印象。用戶不再盯著一片空白區域等待事情發生，而能看到圖像變得越來越清晰。

漸進式圖片有基于 JavaScript 實現的方案：

progressive-image。

響應式圖片

我們還需要留意使用尺寸合適的圖片。

例如，假設圖片在桌面瀏覽器上顯示的最大寬度為 1920px，平板上的最大寬度為 1024px，手機上的最大寬度為 568px，那么最簡單的方案是使用 1920px 的圖片，這樣可以滿足所有場景。不過，這種情況下，網速慢、網絡不穩定的智能手機用戶需要等很久圖片才能加載完畢，這就又碰到了我們文章開頭提到的問題。

好在我們可以通過 picture 元素告訴瀏覽器基于媒體查詢下載相應的圖片。盡管現在 93% 的用戶使用的瀏覽器都支持這一特性，但是這個元素內部還是包含了一個 img 元素，以兼容不支持這一特性的瀏覽器。

<picture>  <source media="(min-width: 1025px)" srcset="image_desktop.jpg">  <source media="(min-width: 769px)" srcset="image_tablet.jpg">  <img src="image_mobile.jpg" alt="Sample image"></picture>

使用 CDN

Cloudinary、Cloudflare 之類的 CDN 服務可以在服務器上優化圖片，將優化后的圖片傳送給用戶。如果你的站點使用 CDN，可以看下靜態資源優化選項。這樣我們就不用操心圖片優化，由 CDN 在服務端完成優化。我們只需要操心懶加載、漸進式圖片等前端的加載方案。

WebP 圖像格式

WebP 是由 Google 開發的專為 web 優化的圖像格式。根據 canIUse 的數據，大部分用戶使用的瀏覽器支持 WebP 格式。另外使用 picture 元素也可以很方便地兼容不支持 WebP 的瀏覽器。

<picture>  <source type="image/webp" srcset="image.webp" />  <source srcset="image.jpg" />  <img src="image.jpg" alt="Sample image" /></picture>

有很多在線文件格式轉換工具可以把圖片轉為 WebP 格式，不過 CDN 服務可以在服務端完成這一格式轉化。

為高分屏優化

考慮高分屏很有必要，不過這個更多的是用戶體驗優化。

例如，假定我們在 768px 的屏幕上顯示一張 768px x 320px 的圖片。但是屏幕有 2x 的密度，也就是說屏幕寬度實際是 2 x 768 = 1536 px。這就意味著我們將 768 px 的圖片拉升到 1536 px，這就導致高分屏上的圖片看起來很模糊。

為了解決這一問題，我們需要提供為高分屏優化的圖片。我們需要單獨創建相當于普通屏幕 2 倍或 3 倍分辨率的圖片，然后在 srcset 屬性上使用 2x 標簽表明這是為高分屏準備的圖片。

<img src="image-1x.jpg" srcset="image-2x.jpg 2x" alt="Sample image" />

例子

支持高分屏的響應式 WebP/PNG 圖片：

<picture>    <source srcset="./images/webp/hero-image-420-min.webp 1x, ./images/webp/hero-image-760-min.webp 2x" type="image/webp" media="(max-width: 440px)">    <source srcset="./images/minified/hero-image-420-min.png 1x, ./images/minified/hero-image-760-min.png 2x" media="(max-width: 440px)">    <source srcset="./images/webp/hero-image-550-min.webp 1x, ./images/webp/hero-image-960-min.webp 2x" type="image/webp" media="(max-width: 767px)">    <source srcset="./images/minified/hero-image-550-min.png 1x, ./images/minified/hero-image-960-min.png 2x" media="(max-width: 767px)">    <source srcset="./images/webp/hero-image-420-min.webp 1x, ./images/webp/hero-image-760-min.webp 2x" type="image/webp" media="(max-width: 1023px)">    <source srcset="./images/minified/hero-image-420-min.png 1x, ./images/minified/hero-image-760-min.png 2x" media="(max-width: 1023px)">    <source srcset="./images/webp/hero-image-760-min.webp 1x, ./images/webp/hero-image-960-min.webp 2x" type="image/webp" media="(max-width: 1919px)">    <source srcset="./images/minified/hero-image-760-min.png 1x, ./images/minified/hero-image-960-min.png 2x" media="(max-width: 1919px)">    <source srcset="./images/webp/hero-image-960-min.webp" type="image/webp">    <source srcset="./images/minified/hero-image-960-min.png">    <img  src="./images/minified/hero-image-960-min.png" alt="Example"></picture>

結語 —— 優化優先級

使用優化后的圖片（使用自動構建工具、在線服務、CDN 優化）
使用懶加載（在瀏覽器有更好的原生支持前考慮使用 JS 方案）
為高分屏優化圖片
使用 WebP 格式
使用漸進式圖片

可選：如果條件允許，記得使用 CDN 加速圖片（和其他靜態資源）。

內容經授權轉載自 New Frontend 網站。

責任編輯：龐桂玉來源： segmentfault

Web 圖片優化前端