圖片該如何優(yōu)化來提高網(wǎng)站性能
概述
圖像是web上提供的最基本的內(nèi)容類型之一。他們說一張圖片勝過千言萬語(yǔ)。但是如果你不小心的話,圖片大小有時(shí)高達(dá)幾十兆。
因此,雖然網(wǎng)絡(luò)圖像需要清晰明快,但它們尺寸可以縮小壓縮的,使用加載時(shí)間保持在可接受的水平。
在我的網(wǎng)站上,我注意到我的主頁(yè)的頁(yè)面大小 超過了1.1MB,圖片占了約88%,我還注意到我提供的圖像比它們需要的大(在分辨率方面),顯然,還有很多改進(jìn)的空間。
我開始閱讀 Addy Osmani 的優(yōu)秀Essential Image Optimization電子書,并開始在我的網(wǎng)站上按照他們的建議做了一些圖片的優(yōu)化。,然后再對(duì)響應(yīng)式圖像進(jìn)行了一些研究并應(yīng)用了它。
這使得頁(yè)面大小減少到445kb,約62%!
什么是圖像壓縮
壓縮圖像就是在圖片保持在可接受的清晰度范圍內(nèi)同時(shí)減少文件大小,我使用imagemin來壓縮站點(diǎn)上的圖像。
要使用imagemin,確保你已經(jīng)安裝了 Node.js,然后打開一個(gè)終端窗口,cd進(jìn)入項(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ù)自己的需要更改PNGImages、JPEGImages和output的值,以符合你的項(xiàng)目結(jié)構(gòu)。
此外要執(zhí)行圖片壓縮,還需要根據(jù)要壓縮的圖像類型安裝對(duì)應(yīng)的插件。
JPEG/JPG
JPG 的優(yōu)點(diǎn)
JPG 最大的特點(diǎn)是有損壓縮。這種高效的壓縮算法使它成為了一種非常輕巧的圖片格式。另一方面,即使被稱為“有損”壓縮,JPG的壓縮方式仍然是一種高質(zhì)量的壓縮方式:當(dāng)我們把圖片體積壓縮至原有體積的 50% 以下時(shí),JPG 仍然可以保持住 60% 的品質(zhì)。此外,JPG 格式以 24 位存儲(chǔ)單個(gè)圖,可以呈現(xiàn)多達(dá) 1600 萬種顏色,足以應(yīng)對(duì)大多數(shù)場(chǎng)景下對(duì)色彩的要求,這一點(diǎn)決定了它壓縮前后的質(zhì)量損耗并不容易被我們?nèi)祟惖娜庋鬯煊X——前提是你用對(duì)了業(yè)務(wù)場(chǎng)景。
JPG 使用場(chǎng)景
JPG 適用于呈現(xiàn)色彩豐富的圖片,在我們?nèi)粘i_發(fā)中,JPG 圖片經(jīng)常作為大的背景圖、輪播圖或 Banner 圖出現(xiàn)。
JPG 的缺陷
有損壓縮在上文所展示的輪播圖上確實(shí)很難露出馬腳,但當(dāng)它處理矢量圖形和 Logo 等線條感較強(qiáng)、顏色對(duì)比強(qiáng)烈的圖像時(shí),人為壓縮導(dǎo)致的圖片模糊會(huì)相當(dāng)明顯。
此外,JPEG 圖像不支持透明度處理,透明圖片需要召喚 PNG 來呈現(xiàn)。
使用 MozJPEG 壓縮 jpeg
這里使用 Mozilla 的MozJPEG工具,該工具可以通過imagemin-mozjpeg作為 Imagemin 插件使用。你可以通過運(yùn)行以下命令來安裝它:
npm install imagemin-mozjpeg
然后將以下內(nèi)容添加到的imagemin.js中:
const imageminMozjpeg = require('imagemin-mozjpeg'); const optimiseJPEGImages = () => imagemin([JPEGImages], output, { plugins: [ imageminMozjpeg({ quality: 70, }), ] }); optimiseJPEGImages() .catch(error => console.log(error));
可以通過在終端中運(yùn)行node imagemin.js來運(yùn)行腳本。這將處理所有JPEG圖像,并將優(yōu)化后的版本放build/images文件夾中。
我發(fā)現(xiàn)將quality設(shè)置為 70 在大多數(shù)情況下可以產(chǎn)生足夠清晰的圖像,但你的項(xiàng)目需求可能不同,可以自行設(shè)置合適的值。
默認(rèn)情況下,MozJPEG生成漸進(jìn)式 jpeg,這會(huì)導(dǎo)致圖像從低分辨率逐漸加載到高分辨率,直到圖片完全加載為止。由于它們的編碼方式,它們也比原始的 jpeg 略小。
你可以使用 Sindre Sorhus 提供的這個(gè)命令行工具來檢查JPEG圖像是否是漸進(jìn)式的。
Addy Osmani 已經(jīng)很好地總結(jié)了使用漸進(jìn)式 jpeg 的優(yōu)缺點(diǎn)。對(duì)我來說,我覺得利大于弊,所以我堅(jiān)持使用默認(rèn)設(shè)置。
如果你更喜歡使用原始的jpeg,可以在options對(duì)象中將progressive設(shè)置為 false。另外,請(qǐng)確保imagemin-mozjpeg版本的變化,請(qǐng)重新查看對(duì)應(yīng)文檔。
PNG (PNG-8 與 PNG-24)
PNG 的優(yōu)缺點(diǎn)
PNG(可移植網(wǎng)絡(luò)圖形格式)是一種無損壓縮的高保真的圖片格式。8 和 24,這里都是二進(jìn)制數(shù)的位數(shù)。按照我們前置知識(shí)里提到的對(duì)應(yīng)關(guān)系,8 位的 PNG 最多支持 256 種顏色,而 24 位的可以呈現(xiàn)約 1600 萬種顏色。
PNG 圖片具有比 JPG 更強(qiáng)的色彩表現(xiàn)力,對(duì)線條的處理更加細(xì)膩,對(duì)透明度有良好的支持。它彌補(bǔ)了上文我們提到的 JPG 的局限性,唯一的缺點(diǎn)就是 體積太大。
PNG 應(yīng)用場(chǎng)景
前面我們提到,復(fù)雜的、色彩層次豐富的圖片,用 PNG 來處理的話,成本會(huì)比較高,我們一般會(huì)交給 JPG 去存儲(chǔ)。
考慮到 PNG 在處理線條和顏色對(duì)比度方面的優(yōu)勢(shì),我們主要用它來呈現(xiàn)小的 Logo、顏色簡(jiǎn)單且對(duì)比強(qiáng)烈的圖片或背景等。
使用 pngquant 優(yōu)化 PNG 圖像
pngquant是我優(yōu)化PNG圖像的首選工具,你可以通過imagemin-pngquant使用它:
npm install imagemin-pngquant
然后將以下內(nèi)容添加到imagemin.js文件中:
const imageminPngquant = require('imagemin-pngquant'); const optimisePNGImages = () => imagemin([PNGImages], output, { plugins: [ imageminPngquant({ quality: '65-80' }) ], }); optimiseJPEGImages() .then(() => optimisePNGImages()) .catch(error => console.log(error));
我發(fā)現(xiàn)將quality設(shè)置為65-80可以在文件大小和圖像質(zhì)量之間較好的折衷方案。
有了這些設(shè)置,我可以得到一個(gè)屏幕截圖,我的網(wǎng)站從 913kb 到 187kb,沒有任何明顯的視覺損失,驚人的79% 的降幅!
WebP
WebP 的優(yōu)點(diǎn)
WebP 像 JPEG 一樣對(duì)細(xì)節(jié)豐富的圖片信手拈來,像 PNG 一樣支持透明,像 GIF 一樣可以顯示動(dòng)態(tài)圖片——它集多種圖片文件格式的優(yōu)點(diǎn)于一身。
WebP 的官方介紹對(duì)這一點(diǎn)有著更權(quán)威的闡述:
與 PNG 相比,WebP 無損圖像的尺寸縮小了 26%。在等效的 SSIM 質(zhì)量指數(shù)下,WebP 有損圖像比同類 JPEG 圖像小25-34%。 無損 WebP 支持透明度(也稱為 alpha 通道),僅需 22% 的額外字節(jié)。對(duì)于有損 RGB 壓縮可接受的情況,有損 WebP 也支持透明度,與 PNG 相比,通常提供 3 倍的文件大小。
將 WebP 圖像提供給支持它們的瀏覽器
WebP是谷歌引入的一種相對(duì)較新的格式,它的目標(biāo)是通過以無損和有損格式編碼圖像來提供更小的文件大小,使其成為 JPEG 和 PNG 的一個(gè)很好的替代方案。
WebP 圖像的清晰度通??梢耘c JPEG 和 PNG相提并論,而且文件大小要小得多。例如,當(dāng)我將屏幕截圖從上面轉(zhuǎn)換到 WebP 時(shí),我得到了一個(gè) 88kb 的文件,其質(zhì)量與 913kb 的原始圖像相當(dāng),減少了90% !
就我個(gè)人而言,我認(rèn)為視覺效果是可以比較的,而且節(jié)省下來的大小是不容忽視的。
既然我們已經(jīng)認(rèn)識(shí)到在可能的情況下使用WebP格式是有價(jià)值的,那么很重要的一點(diǎn)是—它不能完全替代 JPEG 和 PNG,因?yàn)闉g覽器對(duì) WebP 支持并不普遍。
在撰寫本文時(shí),F(xiàn)irefox、Safari 和 Edge 都是不支持WebP的瀏覽器。
然而,根據(jù)caniuse.com的數(shù)據(jù),全球超過70%的用戶使用支持WebP的瀏覽器。這意味著,通過使用 WebP 圖像,可以為大約 70% 的客戶提供更快的 web 頁(yè)面及更好的體驗(yàn)。
安裝它,運(yùn)行以下命令:
npm install imagemin-webp
然后將以下內(nèi)容添加到你的imagemin.js文件中:
const imageminWebp = require('imagemin-webp'); const convertPNGToWebp = () => imagemin([PNGImages], output, { use: [ imageminWebp({ quality: 85, }), ] }); const convertJPGToWebp = () => imagemin([JPGImages], output, { use: [ imageminWebp({ quality: 75, }), ] }); optimiseJPEGImages() .then(() => optimisePNGImages()) .then(() => convertPNGToWebp()) .then(() => convertJPGToWebp()) .catch(error => console.log(error));
我發(fā)現(xiàn),將quality設(shè)置為85會(huì)生成質(zhì)量與 PNG 相當(dāng)?shù)〉枚嗟?WebP 圖像。對(duì)于 jpeg,我發(fā)現(xiàn)將quality設(shè)置為75可以在視覺和文件大小之間取得很好的平衡。
提供html格式的WebP圖像
一旦有了 WebP 圖像,可以使用以下標(biāo)記將它們提供給可以使用它們的瀏覽器,同時(shí)向不兼容 WebP 的瀏覽器使用 png 或者 jpeg。
<picture> <source srcset="sample_image.webp" type="image/webp"> <source srcset="sample_image.jpg" type="image/jpg"> <img src="sample_image.jpg" alt=""> </picture>
使用此標(biāo)記,理解image/webp媒體類型的瀏覽器將下載 Webp 圖片并顯示它,而其他瀏覽器將下載 JPEG 圖片。
任何不支持<picture>的瀏覽器都將跳過所有source標(biāo)簽,并加載底部img標(biāo)簽。因此,我們通過提供對(duì)所有瀏覽器類的支持,逐步增強(qiáng)了我們的頁(yè)面。
請(qǐng)注意,在所有情況下,img 標(biāo)記都是實(shí)際呈現(xiàn)給頁(yè)面的內(nèi)容,因此它確實(shí)是語(yǔ)法的必需部分。 如果省略 img 標(biāo)記,則不會(huì)渲染任何圖像。
<picture> 標(biāo)簽和其中定義的所有source都在那里,以便瀏覽器可以選擇要使用的圖片的路徑。 選擇源圖像后,其 URL 將傳給 img 標(biāo)記,這就是顯示的內(nèi)容。
這意味著你無需設(shè)置<picture>或source標(biāo)記的樣式,因?yàn)闉g覽器不會(huì)渲染這些標(biāo)記。 因此,你可以像以前一樣繼續(xù)使用img標(biāo)簽進(jìn)行樣式設(shè)置。
以上就是圖片該如何優(yōu)化來提高網(wǎng)站性能的詳細(xì)內(nèi)容,更多關(guān)于優(yōu)化圖片提高網(wǎng)站性能的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
- Javascript前端優(yōu)化代碼
- 通過循環(huán)優(yōu)化 JavaScript 程序
- js尾調(diào)用優(yōu)化的實(shí)現(xiàn)
- 淺析JavaScript異步代碼優(yōu)化
- JavaScript關(guān)于提高網(wǎng)站性能的幾點(diǎn)建議(一)
- JavaScript提高網(wǎng)站性能優(yōu)化的建議(二)
- JS 網(wǎng)站性能優(yōu)化筆記
- 網(wǎng)站性能提高實(shí)戰(zhàn)經(jīng)驗(yàn)點(diǎn)滴記錄
- 詳解網(wǎng)站中圖片日常使用以及優(yōu)化手法
- 利用javascript解決圖片縮放及其優(yōu)化的代碼
相關(guān)文章
如何實(shí)現(xiàn)iframe(嵌入式幀)的自適應(yīng)高度
[紅色]如何實(shí)現(xiàn)iframe(嵌入式幀)的自適應(yīng)高度...2006-07-07JS實(shí)現(xiàn)同一DOM元素上onClick事件與onDblClick事件并存的解決方法
這篇文章主要介紹了JS實(shí)現(xiàn)同一DOM元素上onClick事件與onDblClick事件并存的解決方法,結(jié)合實(shí)例形式分析了javascript通過針對(duì)單擊onclick事件增加定時(shí)器進(jìn)行onClick事件與onDblClick事件的區(qū)別判定操作,需要的朋友可以參考下2018-06-06基于iScroll實(shí)現(xiàn)內(nèi)容滾動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了基于iScroll實(shí)現(xiàn)內(nèi)容滾動(dòng)效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-03-03JS實(shí)現(xiàn)div內(nèi)部的文字或圖片自動(dòng)循環(huán)滾動(dòng)代碼
在某些情況下需要這樣的功能:使用JS實(shí)現(xiàn)div內(nèi)部的文字或圖片自動(dòng)循環(huán)滾動(dòng),接下來為大家詳細(xì)介紹下實(shí)現(xiàn)方法,感興趣的朋友可以參考下哈2013-04-04JavaScript打印網(wǎng)頁(yè)指定區(qū)域的例子
這篇文章主要介紹了JavaScript打印網(wǎng)頁(yè)指定區(qū)域的例子,需要的朋友可以參考下2014-05-05JavaScript判斷手機(jī)號(hào)運(yùn)營(yíng)商是移動(dòng)、聯(lián)通、電信還是其他(代碼簡(jiǎn)單)
本文由腳本之家小編給大家分享的基于js判斷手機(jī)號(hào)運(yùn)行商是移動(dòng)、聯(lián)通、電信還是其他的,然后根據(jù)不同的運(yùn)營(yíng)商做出對(duì)應(yīng)的處理,感興趣的朋友一起學(xué)習(xí)吧2015-09-09前端程序員必須知道的高性能Javascript知識(shí)
這篇文章主要為大家詳細(xì)介紹了前端程序員必須知道的高性能Javascript知識(shí),感興趣的小伙伴們可以參考一下2016-08-08跟我學(xué)習(xí)javascript的循環(huán)
跟我學(xué)習(xí)javascript的循環(huán),本文不僅針對(duì)javascript循環(huán)進(jìn)行講解,還對(duì)prototype補(bǔ)充了幾點(diǎn)小tips,歡迎大家閱讀。2015-11-11