日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

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

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

本文的目標是介紹優(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 的未壓縮圖片的大?。?nbsp;

 
 
 
 

  
  
  
  
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)站的商品列表頁面）還是會影響性能。

懶加載

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

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

•  原生懶加載 

•  基于 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 元素，以兼容不支持這一特性的瀏覽器。 

使用 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 的瀏覽器。 

有很多在線文件格式轉(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)建相當于普通屏幕 2 倍或 3 倍分辨率的圖片，然后在 srcset 屬性上使用 2x 標簽表明這是為高分屏準備的圖片。 

例子

支持高分屏的響應(yīng)式 WebP/PNG 圖片： 

結(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)站。

網(wǎng)站名稱：如何處理Web圖片優(yōu)化？
網(wǎng)站網(wǎng)址：http://www.dlmjj.cn/article/cdgepgo.html