如何優(yōu)化網(wǎng)站的圖片（網(wǎng)站圖片優(yōu)化效果）？

圖片是網(wǎng)站的重要視覺元素，無論是Banner.Icon.Logo.各種圖表等，占據(jù)了網(wǎng)站的大部分視覺空間，所以如何優(yōu)化圖片已經(jīng)成為前端開發(fā)的一個重要知識。本文主要介紹正確的圖片類型，并在各種設(shè)備上正確呈現(xiàn)圖片大小和像素，討論圖片的最佳過程。

Step1.選擇合適的照片類型

照片主要分為向量（Vector）和點陣照片（Raster）兩種：

點陣（Raster）照片：GIF.PNG.JPEG或JPEG-XR和WebP等。

向量（Vector）照片：以SVG為主。

實際上最常見的是PNG.JPG.SVG三，它們有什么區(qū)別？這里有三張不同照片類型的狗片。

<img src="./images/dog.jpg" alt="jpg" />

<img src="./images/dog.png" alt="png" />

<img src="./images/dog.svg" alt="svg" />

這三張狗的照片，第一張是JPG.第二張是PNG.第三張是SVG，看上去差別不大，但空間卻不同。

能夠看見Size欄位，同一張照片，從最小到最胖，分別是:SVG的2.5K>JPG的5.7K>PNG的9.9K，最大和最小差快四倍。

再比較一下分辨率，我們把三張圖放大兩倍，首先是JPG：

嗯，超糊，毛刺變得很明顯。我們再來看看。PNG：

稍微好一點，但還是有點糊。SVG：

基本上一點也不差，和小圖一樣清晰。因此，從清晰到模糊的分辨率是：SVG>PNG>JPG。

這是由于向量照片和點陣照片的結(jié)構(gòu)。向量照片（SVG）它由簡單的幾何圖形組成，輕巧清晰，缺點是無法處理復(fù)雜的圖像，如Banner等等。點陣照片（PNG.JPG）網(wǎng)格中會顯示完整的像素。兩者各有優(yōu)缺點。

因此，結(jié)論是：

優(yōu)先使用內(nèi)容照片=>PNG或JPG(查看正確的分辨率或網(wǎng)站Loading速度要求)。

Icon或Logo優(yōu)先使用=>SVG或PNG。

Step2.在每個裝置上呈現(xiàn)正確的圖片大小和像素

一些開發(fā)人員會直接放一張大圖片來適應(yīng)所有設(shè)備或屏幕的總寬度，可能是因為追求照片在任何設(shè)備中都有很高的分辨率，但這實際上是網(wǎng)站效果不太好，因為圖片尺寸越大，.像素越高加載速度越高，這種現(xiàn)象高M(jìn)obileDevcie會更明顯。

在正確的裝置中使用正確尺寸的照片，以免浪費圖片資源。

能夠充分利用這種效果img tag的srcset與sizes只有這兩個特點，才能呈現(xiàn)不同設(shè)備的照片。

假設(shè)我們想在頁面上做這個樣式：

頁面上需要放一張大圖，然后imgtag我們通常這樣寫：

<img src="./images/large.png" alt="這是一張海美soe圖片" />

這樣寫并非不可能，但必須考慮圖片的大小對不同設(shè)備的影響瀏覽器ctrl+U看一下Network的Img資訊：

images

圖片占1.7M同樣的空間大小假如也直接放進(jìn)去移動設(shè)備那就不太好了。此時可選擇這樣做：

<img 

   src="./images/large.png" 

   srcset="./images/large.png 1x, ./images/small.png 2x" 

   alt="這是一張圖片" 

/>

首先，這里將看到一個新的屬性srcset，可根據(jù)頁面上不同設(shè)備的像素比例(DPR)指定要放哪張照片。DPR一般來說PC一般都是1x，手機(jī)則是2x，可以在瀏覽器Tool的console下window.devicePixelRatio查詢。

這里srcset內(nèi)容指：若DPR為1x的時候使用large.png，若DPR為2x的時候使用small.png。不支持瀏覽器srcset特征會被抓住src。

回頭看看剛才的頁面，就能發(fā)現(xiàn)移動設(shè)備照片已改成small.png，所占空間已降至4288K。

近70%的空間釋放是優(yōu)化照片的好方法。

如果不知道DPR還有另一種寫法:

<img

  src="./images/large.png"

  srcset="./images/large.png 1000w, ./images/small.png 500w"

  sizes="(max-width: 500px) 60vw, 100vw"

  alt="這是一張圖片"

/>

這里srcset內(nèi)部單位w是指屏幕的總寬度，只要給w值瀏覽器，就會計算w乘以DPR取出對應(yīng)或最接近大小的照片。

而sizes什么？vw，在不同的情況下，sizes」

比如上一段Code屏幕總寬500px以下照片要改為60%，否則要保持100%的尺度：（DPR）乘以0.6（60vw）=600px，所以會有選擇small.png這張照片。

注意?。?！加到這里sizes若CSS喔。

另外還有一種彈性好的寫法:

media="(max-width:500px)"

srcset="./images/large.png1x,./images/small.png2x"

/>

<img 

    src="./images/large.png" 

    alt="這是一張網(wǎng)站seo優(yōu)化圖片" 

  />

為什么說比較有彈性？除了能把sizes跟srcset拆成另一個source tag除了易讀性高之外，還可以支持不同的照片類型，

<img src="./images/large.png" alt="這是一張圖片">

若是有支持webp類型就用source tag內(nèi)屬性，如果不行，就用imgtag。但目前picturetag尚未支持IE，因此，如果需要跨瀏覽器，仍然使用它src比較安全。

結(jié)論

不同的照片類型可以根據(jù)專案的不同需求放置。例如，如果網(wǎng)站追求速度快，它可以Banner就用JPG，若像素不能很差，則使用PNG。而Logo以及Icon請盡量使用SVG。

多多善用img tag的srcset特點，會給網(wǎng)站帶來更大的好處。

其實這里還是有照片壓縮的，但我覺得這應(yīng)該是常識，所以就不多說了。

事實上，如果照片來源保持在前端自己手中，上述方法更適合使用API或者后端，可能需要先和后端溝通規(guī)格。

www.yinyiprinting.cn 寧波海美seo網(wǎng)絡(luò)優(yōu)化公司 是網(wǎng)頁設(shè)計制作，網(wǎng)站優(yōu)化，企業(yè)關(guān)鍵詞排名，網(wǎng)絡(luò)營銷知識和開發(fā)愛好者的一站式目的地，提供豐富的信息、資源和工具來幫助用戶創(chuàng)建令人驚嘆的實用網(wǎng)站。 該平臺致力于提供實用、相關(guān)和最新的內(nèi)容，這使其成為初學(xué)者和經(jīng)驗豐富的專業(yè)人士的寶貴資源。