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

生產(chǎn)環(huán)境出現(xiàn)未優(yōu)化的圖片并顯著影響初次加載速度的現(xiàn)象還是挺常見的。缺乏經(jīng)驗的開發(fā)者通常沒有意識到這一潛在問題，也不了解各種優(yōu)化圖片的工具和方法。

本文的目標(biāo)是介紹優(yōu)化 web 圖片的主要工具和方法。

計算 JPG 文件尺寸

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

image_size = (image_width * image_height * 3) / 1048576 

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

1366 * 768 * 3 / 1048576 = 3Mb 

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

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

在線圖片優(yōu)化

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

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

•  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 個文件

自動化解決方案

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

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

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

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

圖片加載優(yōu)化

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

懶加載

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

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

•  原生懶加載 

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

•  基于 JavaScript 的方案

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

verlok/lazyload

yall.js

Blazy （現(xiàn)在沒有維護）

漸進式圖片

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

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

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

漸進式圖片有基于 JavaScript 實現(xiàn)的方案：

progressive-image。

響應(yīng)式圖片

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

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

好在我們可以通過 picture 元素告訴瀏覽器基于媒體查詢下載相應(yīng)的圖片。盡管現(xiàn)在 93% 的用戶使用的瀏覽器都支持這一特性，但是這個元素內(nèi)部還是包含了一個 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 服務(wù)可以在服務(wù)器上優(yōu)化圖片，將優(yōu)化后的圖片傳送給用戶。如果你的站點使用 CDN，可以看下靜態(tài)資源優(yōu)化選項。這樣我們就不用操心圖片優(yōu)化，由 CDN 在服務(wù)端完成優(yōu)化。我們只需要操心懶加載、漸進式圖片等前端的加載方案。

WebP 圖像格式

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

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

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

為高分屏優(yōu)化

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

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

為了解決這一問題，我們需要提供為高分屏優(yōu)化的圖片。我們需要單獨創(chuàng)建相當(dāng)于普通屏幕 2 倍或 3 倍分辨率的圖片，然后在 srcset 屬性上使用 2x 標(biāo)簽表明這是為高分屏準(zhǔn)備的圖片。 

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

例子

支持高分屏的響應(yīng)式 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> 

結(jié)語 —— 優(yōu)化優(yōu)先級

1.  使用優(yōu)化后的圖片（使用自動構(gòu)建工具、在線服務(wù)、CDN 優(yōu)化）
2.  使用懶加載（在瀏覽器有更好的原生支持前考慮使用 JS 方案）
3.  為高分屏優(yōu)化圖片
4.  使用 WebP 格式
5.  使用漸進式圖片

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

內(nèi)容經(jīng)授權(quán)轉(zhuǎn)載自 New Frontend 網(wǎng)站。