日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢(xún)
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問(wèn)題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷(xiāo)解決方案
如何處理Web圖片優(yōu)化？

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

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

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

計(jì)算 JPG 文件尺寸

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

 
 
 
 
    
  
  
  
  
  1. image_size = (image_width * image_height * 3) / 1048576 
    2.

比如，計(jì)算分辨率為 1366px x 768px 的未壓縮圖片的大?。?nbsp;

 
 
 
 
    
  
  
  
  
  1. 1366 * 768 * 3 / 1048576 = 3Mb 
    2.

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

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

在線圖片優(yōu)化

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

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

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

自動(dòng)化解決方案

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

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

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

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

圖片加載優(yōu)化

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

懶加載

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

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

  •  原生懶加載 
 
 
 
 
    
  
  
  
  
  1.  
    2.
  •  基于 JavaScript 的方案

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

verlok/lazyload

yall.js

Blazy （現(xiàn)在沒(méi)有維護(hù)）

漸進(jìn)式圖片

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

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

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

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

progressive-image。

響應(yīng)式圖片

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

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

好在我們可以通過(guò) picture 元素告訴瀏覽器基于媒體查詢(xún)下載相應(yīng)的圖片。盡管現(xiàn)在 93% 的用戶(hù)使用的瀏覽器都支持這一特性，但是這個(gè)元素內(nèi)部還是包含了一個(gè) img 元素，以兼容不支持這一特性的瀏覽器。 

 
 
 
 
    
  
  
  
  
  1.        
    2.

使用 CDN

Cloudinary、Cloudflare 之類(lèi)的 CDN 服務(wù)可以在服務(wù)器上優(yōu)化圖片，將優(yōu)化后的圖片傳送給用戶(hù)。如果你的站點(diǎn)使用 CDN，可以看下靜態(tài)資源優(yōu)化選項(xiàng)。這樣我們就不用操心圖片優(yōu)化，由 CDN 在服務(wù)端完成優(yōu)化。我們只需要操心懶加載、漸進(jìn)式圖片等前端的加載方案。

WebP 圖像格式

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

 
 
 
 
    
  
  
  
  
  1.        
    2.

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

為高分屏優(yōu)化

考慮高分屏很有必要，不過(guò)這個(gè)更多的是用戶(hù)體驗(yàn)優(yōu)化。

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

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

 
 
 
 
    
  
  
  
  
  1.  
    2.

例子

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

 
 
 
 
    
  
  
  
  
  1.                                              
    2.

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

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

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

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


網(wǎng)頁(yè)題目：如何處理Web圖片優(yōu)化？
標(biāo)題鏈接：http://m.5511xx.com/article/cdgepgo.html