如何處理 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>

結語 —— 優化優先級

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

可選： 若是條件容許，記得使用 CDN 加速圖片（和其餘靜態資源）。

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