怎么處理Web圖片優化

小編給大家分享一下怎么處理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>

以上是“怎么處理Web圖片優化”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！