圖片是Web提供的最基本的一種內(nèi)容類(lèi)型。人們都說(shuō)一張圖片勝過(guò)千言萬(wàn)語(yǔ)。但如果你一不小心，它也可能占用你好幾兆帶寬。

雖說(shuō)Web圖像應(yīng)該盡可能清晰明快，但文件大小必須是可管理的，以便保持較快的加載速度，并且應(yīng)該將數(shù)據(jù)使用保持在可接受的水平。

在我的網(wǎng)站上，我發(fā)現(xiàn)主頁(yè)的大小超過(guò)了1.1MB，其中圖像占了88％。我也意識(shí)到我提供的圖片比實(shí)際需要的要大（比如分辨率）。顯然，還有很大的優(yōu)化空間。

我開(kāi)始閱讀由Addy Osmani撰寫(xiě)的“Essential Image Optimization”電子書(shū)（），并開(kāi)始在我的網(wǎng)站上嘗試他的建議。然后我又研究了一些響應(yīng)式圖像方面的知識(shí)，并也將其應(yīng)用在我的網(wǎng)站上。

這樣就可以將頁(yè)面大小降至445KB，減少了約62％！

本文將介紹我如何優(yōu)化主頁(yè)大小，將其提升到更可管理的水平。

什么是圖像壓縮？

壓縮圖像是指在保持可接受的視覺(jué)質(zhì)量水平的同時(shí)減小圖像文件的大小。我使用imagemin來(lái)壓縮我網(wǎng)站上的圖像。

要使用imagemin，請(qǐng)確保已安裝了Node.js，然后打開(kāi)終端窗口，cd到項(xiàng)目的文件夾，并運(yùn)行以下命令：

npm install imagemin

然后創(chuàng)建一個(gè)名為imagemin.js的新文件，并粘貼以下內(nèi)容：

const imagemin = require('imagemin');const PNGImages = 'assets/images/*.png';const JPEGImages = 'assets/images/*.jpg';const output = 'build/images';

你可以根據(jù)具體的項(xiàng)目結(jié)構(gòu)隨意修改PNGImages、JPEGImages和output的值。

要進(jìn)行圖像壓縮，你需要根據(jù)要壓縮的圖像類(lèi)型安裝一些插件。

使用MozJPEG壓縮JPEG

為了壓縮JPEG圖像，我使用了Mozilla的MozJPEG，它可以通過(guò)imagemin-mozjpeg作為imagemin的插件使用。你可以通過(guò)運(yùn)行以下命令來(lái)安裝它：

npm install imagemin-mozjpeg

然后將以下內(nèi)容添加到imagemin.js文件中：

const imageminMozjpeg = require('imagemin-mozjpeg');const optimiseJPEGImages = () =\u0026gt;? imagemin([JPEGImages], output, {? ? plugins: [? ? ? imageminMozjpeg({? ? ? ? quality: 70,? ? ? }),? ? ]? });optimiseJPEGImages()? .catch(error =\u0026gt; console.log(error));

你可以在終端中輸入node imagemin.js來(lái)運(yùn)行這個(gè)腳本。這樣就會(huì)處理所有的JPEG圖像，并將優(yōu)化過(guò)的圖像放在build/images文件夾中。

我發(fā)現(xiàn)將質(zhì)量設(shè)置為70可以得到足夠好的圖像，但是你的要求可能會(huì)不一樣，所以請(qǐng)根據(jù)你的需要設(shè)置具體的值。

MozJPEG默認(rèn)會(huì)生成漸進(jìn)式JPEG，在加載圖像時(shí)，從低分辨率逐漸加載到高分辨率，直到圖像加載完畢。由于它們的編碼方式不一樣，所以往往會(huì)比基線JPEG小一些。

你可以使用這個(gè)命令行工具來(lái)檢查JPEG圖像是否是漸進(jìn)式的。

Addy Osmani已經(jīng)詳細(xì)介紹過(guò)使用漸進(jìn)式JPEG的優(yōu)點(diǎn)和缺點(diǎn)。

在我看來(lái)，它是利大于弊的，所以我使用了默認(rèn)設(shè)置。

如果你更喜歡使用基線JPEG，可以在選項(xiàng)對(duì)象中將progressive設(shè)置為false。此外，更多的選項(xiàng)設(shè)置請(qǐng)參考imagemin-mozjpeg頁(yè)面。

使用pngquant優(yōu)化PNG圖像

pngquant是我用來(lái)優(yōu)化PNG圖像的首選工具，你可以通過(guò)imagemin-pngquant插件來(lái)使用它：

npm install imagemin-pngquant

然后將以下內(nèi)容添加到imagemin.js文件中：

const imageminPngquant = require('imagemin-pngquant');const optimisePNGImages = () =\u0026gt;? imagemin([PNGImages], output, {? ? plugins: [? ? ? imageminPngquant({ quality: '65-80' })? ? ],? });optimiseJPEGImages()? .then(() =\u0026gt; optimisePNGImages())? .catch(error =\u0026gt; console.log(error));

我發(fā)現(xiàn)將quality設(shè)置為65到80可以在文件大小和圖像質(zhì)量之間獲得良好的折衷。

使用這些設(shè)置，我可以將網(wǎng)站截圖從913 KB減到到187 KB，而不會(huì)出現(xiàn)任何明顯的視覺(jué)方面的質(zhì)量損失。文件大小整整減少了79％！

下面是這兩個(gè)文件，可以下載下來(lái)自己去判斷：

原始圖像（913 KB）：

• 優(yōu)化過(guò)的圖像（187 KB）

使用WebP圖像（需要瀏覽器支持）

WebP是Google推出的一種相對(duì)較新的圖像格式，旨在通過(guò)編碼無(wú)損和有損格式的圖像獲得較小體積的圖像，這讓它成為JPEG和PNG的絕佳替代品。

WebP圖像的視覺(jué)質(zhì)量通常與JPEG和PNG相當(dāng)，但文件大小要小得多。例如，當(dāng)我將上面的屏幕截圖轉(zhuǎn)換為WebP時(shí)，我得到了一個(gè)88 KB的文件，其質(zhì)量與913 KB的原始圖像相當(dāng)。文件減小了90％！

看看這三張圖片，你能分辨出來(lái)嗎？

• 原始PNG圖像（913 KB)

• 優(yōu)化過(guò)的PNG圖像（187 KB)

• WebP圖像（88 KB)，可在Chrome或Opera中查看：https://freshman.tech/assets/dist/images/articles/freshman-1600.webp

我認(rèn)為它們?cè)谝曈X(jué)質(zhì)量方面是差不多的，但節(jié)省的文件大小卻是很可觀的。

現(xiàn)在我們知道，在可能的情況下盡可能使用WebP格式，但要注意，現(xiàn)在它還不能完全取代JPEG和PNG，因?yàn)闉g覽器對(duì)WebP的支持并不普遍。

在撰寫(xiě)本文時(shí)，Firefox、Safari和Edge還不支持WebP。

不過(guò)，caniuse.com網(wǎng)站的數(shù)據(jù)顯示，全球有超過(guò)70％的用戶在使用支持WebP的瀏覽器。這意味著你可以使用WebP圖像為大約70％的用戶提高網(wǎng)頁(yè)加載速度。

讓我們來(lái)看看在Web上提供WebP圖像的具體步驟。

將JPEG和PNG轉(zhuǎn)換為WebP

使用imagemin-webp插件將JPEG和PNG圖像轉(zhuǎn)換為WebP，這個(gè)非常簡(jiǎn)單。

在終端中運(yùn)行以下命令來(lái)安裝它：

npm install imagemin-webp

然后將以下內(nèi)容添加到imagemin.js文件中：

const imageminWebp = require('imagemin-webp');const convertPNGToWebp = () =\u0026gt;? imagemin([PNGImages], output, {? ? use: [? ? ? imageminWebp({? ? ? ? quality: 85,? ? ? }),? ? ]? });const convertJPGToWebp = () =\u0026gt;? imagemin([JPGImages], output, {? ? use: [? ? ? imageminWebp({? ? ? ? quality: 75,? ? ? }),? ? ]? });optimiseJPEGImages()? .then(() =\u0026gt; optimisePNGImages())? .then(() =\u0026gt; convertPNGToWebp())? .then(() =\u0026gt; convertJPGToWebp())? .catch(error =\u0026gt; console.log(error));

我發(fā)現(xiàn)，將quality設(shè)置為85可以得到與PNG質(zhì)量相當(dāng)?shù)腤ebP，但文件卻要小得多。對(duì)于JPEG，我發(fā)現(xiàn)將quality設(shè)置為75可以在視覺(jué)質(zhì)量和文件大小之間獲得適當(dāng)?shù)钠胶狻?/p>

說(shuō)實(shí)話，我還在試驗(yàn)這些值，所以不把它們作為推薦值，更多信息請(qǐng)查看imagemin-webp頁(yè)面。

在HTML中使用WebP圖像

在得到WebP圖像后，可以使用下面的標(biāo)簽為支持WebP的瀏覽器提供WebP圖像，同時(shí)為不支持WebP的瀏覽器提供等效（優(yōu)化）的JPEG或PNG后備。

\u0026lt;picture\u0026gt;? ? \u0026lt;source srcset=\u0026quot;sample_image.webp\u0026quot; type=\u0026quot;image/webp\u0026quot;\u0026gt;? ? \u0026lt;source srcset=\u0026quot;sample_image.jpg\u0026quot; type=\u0026quot;image/jpg\u0026quot;\u0026gt;? ? \u0026lt;img src=\u0026quot;sample_image.jpg\u0026quot; alt=\u0026quot;\u0026quot;\u0026gt;\u0026lt;/picture\u0026gt;

支持image/webp媒體類(lèi)型的瀏覽器將下載WebP圖像并顯示它，而其他瀏覽器將下載JPEG圖像。

不支持\u0026lt;picture\u0026gt;的瀏覽器將跳過(guò)所有source，并加載底部img標(biāo)簽的src屬性所定義的內(nèi)容。可以說(shuō)，我們已經(jīng)對(duì)我們的頁(yè)面進(jìn)行了漸進(jìn)式增強(qiáng)，可以支持各種瀏覽器。

請(qǐng)注意，不管怎樣，img標(biāo)簽是實(shí)際渲染在頁(yè)面上的內(nèi)容，因此它是語(yǔ)法的必需組成部分。如果省略img標(biāo)簽，就不會(huì)渲染任何圖像。

\u0026lt;picture\u0026gt;標(biāo)簽和所有source都在那里，瀏覽器可以選擇要使用的圖像版本。在選擇了需要使用的source后，URL將被提供給img標(biāo)簽，然后相應(yīng)的圖像就會(huì)被顯示在頁(yè)面上。

這意味著你無(wú)需為\u0026lt;picture\u0026gt;或source設(shè)置樣式，因?yàn)闉g覽器不會(huì)渲染這些標(biāo)簽。因此，你可以像以前一樣繼續(xù)為img標(biāo)簽設(shè)置樣式。

英文原文：https://medium.freecodecamp.org/image-optimization-558d9f449e3

更多內(nèi)容，請(qǐng)關(guān)注前端之巔。

會(huì)議推薦

2019年6月，GMTC全球大前端技術(shù)大會(huì)2019即將到來(lái)。小程序、Flutter、移動(dòng)AI、工程化、性能優(yōu)化…大前端的下一站在哪里？點(diǎn)擊下圖了解更多詳情。

總結(jié)

以上是生活随笔為你收集整理的通过图片优化，我将网站大小减少了62%的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。