注明：本人原創(chuàng)翻譯，原版為Essential Image Optimization電子書，這里將其拆分為幾篇文章發(fā)布。另外，文中部分鏈接可能會(huì)因?yàn)椤熬W(wǎng)絡(luò)”原因無法打開。不必著急，我會(huì)慢慢將其中一些比較好的內(nèi)容翻譯過來發(fā)表，都會(huì)在這個(gè)“Web圖像技術(shù)深究”專題中。
目錄
- ?介紹
- 如何判斷我的圖像是否需要優(yōu)化？
- 如何選擇正確的圖像格式？
- “素人”JPEG
- JPEG的壓縮模式
-
什么是WebP？
- WebP的表現(xiàn)如何？
- 誰在生產(chǎn)環(huán)境中使用WebP？
- WebP編碼如何執(zhí)行？
- WebP的瀏覽器支持
- 如何將我的圖像轉(zhuǎn)換為WebP？
- 如何在我的操作系統(tǒng)上查看WebP圖像？
- 如何提供WebP？
- SVG優(yōu)化
- 避免使用有損編解碼器重復(fù)壓縮圖像
-
減少不必要的圖像解碼和尺寸調(diào)整帶來的損耗
- 使用srcset提供HiDPI圖像
- 藝術(shù)化的響應(yīng)
- 顏色管理
- 圖像拼合技術(shù)
- 延遲加載非關(guān)鍵圖像
- 避免<code>display: none;</code>的陷阱
- 圖像CDN服務(wù)對(duì)你有意義嗎？
- 緩存圖像資源
- 預(yù)加載關(guān)鍵圖像資源
- 圖像的網(wǎng)絡(luò)性能預(yù)算
- 最后的建議
- 附注
正文：
介紹
圖片依然是加載緩慢的首要原因
圖片經(jīng)常占用大量的互聯(lián)網(wǎng)帶寬，因?yàn)樗鼈兺ǔ６挤浅４蟆８鶕?jù)HTTP Archive的統(tǒng)計(jì)結(jié)果顯示，網(wǎng)頁數(shù)據(jù)中平均60%的內(nèi)容都是有JPEG、PNG和GIF組成的圖像。截止至2017年7月，平均一個(gè)網(wǎng)站的內(nèi)容數(shù)據(jù)有3.0MB，而其中1.7MB是圖片。
根據(jù)Tammy Everts的研究表明，將圖片添加到網(wǎng)頁中或者將現(xiàn)有的圖片擴(kuò)大，已經(jīng)被證明可以提高網(wǎng)站的用戶轉(zhuǎn)化率。圖片是不可能消失的，所以花費(fèi)成本在有效的壓縮策略上以最小化這種帶寬占用將變得非常重要。
圖片優(yōu)化包括了可以減少圖片文件大小的多種不同方法。它最終取決于您的圖片需要什么視覺保真度。
通常的圖片優(yōu)化包括了壓縮，并且支持通過<picture>/<img srcset>標(biāo)簽響應(yīng)式的壓縮它們，并且調(diào)整圖片的尺寸以降低解碼消耗。
說明我們有足夠的空間來統(tǒng)一優(yōu)化我們的圖片。
ImageOptim是一個(gè)免費(fèi)的工具，可以通過現(xiàn)代壓縮技術(shù)和去除不必要的EXIF元數(shù)據(jù)的方法減少圖像文件體積。
如果你是個(gè)設(shè)計(jì)師，那么還有一個(gè)用于Sketch的ImageOptim插件，它在導(dǎo)出資源時(shí)會(huì)自動(dòng)優(yōu)化。你會(huì)發(fā)現(xiàn)它能最大化的節(jié)省你的時(shí)間。
如何判斷我的圖像是否需要優(yōu)化？
可以通過WebPageTest.org網(wǎng)站進(jìn)行圖片檢查，它將指導(dǎo)你如何更好的優(yōu)化圖片（注意“Compress Images”的內(nèi)容，即壓縮圖片）。
WebPageTest報(bào)告中的 "Compress Images" 部分列出了如何更有效地壓縮的圖像，以及能節(jié)省的文件大小。
在Chrome中，Lighthouse工具可以有效的幫助你的網(wǎng)站達(dá)到最佳體驗(yàn)。它包括了圖像優(yōu)化的審核，并且對(duì)是否可以進(jìn)一步壓縮圖片提出建議，或者指出哪些是屏幕外的圖片可以被延遲加載。
而對(duì)于Chrome60以上的版本，Lighthouse已經(jīng)默認(rèn)被嵌入到Chrome DevTools中的Audits面板中。
Lighthouse可以審核Web性能、找到最佳實(shí)踐，并測(cè)試漸進(jìn)式Web應(yīng)用程序的功能。
你也可以去了解一下其他的性能審核工具，比如PageSpeed Insights或者Cloudinary的Website Speed Test，這些工具都有豐富的圖片優(yōu)化審核功能。
如何選擇正確的圖像格式？
正如Ilya Grigorik在他出色的《圖像優(yōu)化指南》中指出的，所謂的“正確格式”一定是視覺效果和功能需求的統(tǒng)一。你是使用Raster（位圖）還是Vector（矢量圖）？
Raster Graphics（位圖）:通過對(duì)圖像的矩形網(wǎng)格內(nèi)的每個(gè)像素的值進(jìn)行編碼來表示圖像。它們?cè)诳s放時(shí)會(huì)失真。WebP格式或者應(yīng)用更廣泛的格式比如JPEG或PNG都可以處理為位圖，這種格式被應(yīng)用于要求真實(shí)感的地方。Guetzli，MozJPEG和我們討論的其他組件都適用于優(yōu)化位圖。
Vector graphics（矢量圖）：使用點(diǎn)、線和多邊形來表示圖像，并被應(yīng)用于使用簡(jiǎn)單幾何形狀表示的圖像（例如徽標(biāo)）。這種格式可以在高分辨率下顯示，并且縮放時(shí)不會(huì)失真。像SVG就是處理矢量圖的好選擇。
選擇了錯(cuò)誤的格式可能會(huì)浪費(fèi)你很多的寶貴時(shí)間。但選擇正確格式的過程可能一波三折，所以消耗一些時(shí)間去嘗試其他保存格式對(duì)于最終選擇正確的格式來說也是值得的。
杰里米·瓦格納（Jeremy Wagner）在描述他的圖像優(yōu)化理論時(shí)，已經(jīng)對(duì)圖像格式的權(quán)衡評(píng)估做出了討論。
