注明：本人原創(chuàng)翻譯，原版為Essential Image Optimization電子書，這里將其拆分為幾篇文章發(fā)布。另外，文中部分鏈接可能會因為“網(wǎng)絡(luò)”原因無法打開。不必著急，我會慢慢將其中一些比較好的內(nèi)容翻譯過來發(fā)表，都會在這個“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ù)對你有意義嗎？
- 緩存圖像資源
- 預(yù)加載關(guān)鍵圖像資源
- 圖像的網(wǎng)絡(luò)性能預(yù)算
- 最后的建議
- 附注
正文：
避免使用有損編解碼器重復(fù)壓縮圖像
建議始終從原始圖像開始壓縮。重復(fù)壓縮圖像會帶來惡果。假設(shè)您拍攝的JPEG已經(jīng)被壓縮，質(zhì)量為60。如果再用有損編碼重新壓縮此圖像，那它看起來會更糟。每一輪的壓縮都會帶來代數(shù)損失 - 信息將會丟失，并且開始產(chǎn)生虛影。即使您在高質(zhì)量的環(huán)境下，重復(fù)壓縮依然會是不好的結(jié)果。
為了避免這個陷阱，首先你要設(shè)置愿意接受的最低質(zhì)量值，這樣你從一開始就可以節(jié)省最多的文件存儲空間。同時，您還可以避免這種陷阱，因為任何文件體積的降低必然帶來可視質(zhì)量的降低。
重新編碼有損文件幾乎總是給你一個更小的文件，但這并不意味著你可以像你所想的那樣獲得盡可能好的質(zhì)量。
因為網(wǎng)格量化的原理，MozJPEG（或許不小心）具有了更好的抗再壓縮性能。不同于精確的壓縮所有的DCT值，MozJPEG會檢查像素中+1/-1范圍內(nèi)的近似值，以查看相似的值是否壓縮到較少的字節(jié)。有損的FLIF在（重新）壓縮之前會有一個類似于有損PNG的黑科技，它可以查看文件的數(shù)據(jù)并決定丟棄什么。重新壓縮的PNG它具有可以檢測的“空洞”，以避免進一步的丟棄數(shù)據(jù)。
因此，編輯源文件時，請將其存儲為無損格式（如PNG或TIFF），以便盡可能保留質(zhì)量。這樣，您的構(gòu)建工具或圖像壓縮服務(wù)導(dǎo)出的壓縮圖像，才能在提供給你的用戶時保持最小的質(zhì)量損失。
減少不必要的圖像解碼和尺寸調(diào)整帶來的損耗
我們以前都盡量提供體積大的、高清晰的圖像給用戶，甚至根本就超過了用戶的需求。這樣做是有代價的。解碼和調(diào)整圖像尺寸，對于大多數(shù)的移動設(shè)備上的瀏覽器來說，是個昂貴的操作。如果發(fā)送大圖像，再使用CSS或width/height屬性重新調(diào)整尺寸，您可能會經(jīng)歷下面的等待，這是非常影響設(shè)備性能的。
當(dāng)瀏覽器獲取圖像的時候，它必須將圖像從原始源格式（例如JPEG）解碼為內(nèi)存中的位圖。而通常，圖像又需要調(diào)整尺寸（例如，寬度已設(shè)置為其容器的百分比）。圖像的解碼和調(diào)整尺寸的操作是昂貴的，將會很大程度上延遲圖片顯示的時間。
發(fā)送給瀏覽器可以渲染的圖像，并且不需要調(diào)整尺寸，才是最理想的情況。所以，要為你的用戶提供適合屏幕尺寸和分辨率的最小圖像，利用<img>的srcset和sizes屬性 - 我們將很快的覆蓋srcset，快速顯示出圖像。
忽略圖像（<img>）上的屬性width或height屬性也可能會對性能產(chǎn)生負面影響。因為沒有它們的話，瀏覽器會先為圖像分配一個較小的占位符區(qū)域，然后直到足夠的字節(jié)到達才能知道正確的尺寸。這種處理方式下，頁面的文檔布局就必須要更新，而更新可能會是一個昂貴的步驟，它被稱做回流。
當(dāng)然，更大的圖像也會帶來更大的內(nèi)存占用。解碼圖像每個像素需要占用4個字節(jié)。如果你不小心，你可以真正地讓瀏覽器崩潰; 在一些低端設(shè)備上，并沒有多大的空間來進行內(nèi)存交換。所以，請一定要注意您的圖像解碼、尺寸調(diào)整和內(nèi)存占用帶來的影響。
解碼圖像的成本在中低端的手機上，可能是非常昂貴的。在某些情況下，它的速度可能要慢上5倍還多。
Twitter（推特）在構(gòu)建它們新的移動網(wǎng)絡(luò)體驗時，通過確保向用戶提供最佳適配尺寸的圖像來提高圖像解碼的性能。這使得Twitter的許多圖像在時間軸上測試的解碼時間從400ms一直下降到19ms！
Chrome開發(fā)者工具中的時間軸/性能面板上，對比Twitter優(yōu)化其圖像管道之前和之后顯示的圖像解碼時間（綠色）。
使用srcset提供HiDPI圖像
用戶可以通過各種具有高分辨率屏幕的移動設(shè)備和桌面設(shè)備來訪問您的站點。在Web頁面中，設(shè)備像素比（DPR）（也稱為“CSS像素比”）被用來確定一個設(shè)備的屏幕分辨率如何被CSS來解釋。DPR是由電話制造商創(chuàng)建的，被用于在提高移動屏幕的分辨率和清晰度的情況下，不會使顯示的元素感覺太小。
而為了適配到用戶可能期望的圖像質(zhì)量，需要將最合適的分辨率的圖像提供到用戶的設(shè)備上。高DPR圖像（例如2x，3x）被聰明地提供給支持它們的設(shè)備，而較低或標準的DPR圖像則被提供給那些沒有高分辨率屏幕的用戶，因為這些所謂的2x+的圖像通常會顯著地占用更多的字節(jié)空間。
srcset屬性允許瀏覽器為每個設(shè)備選擇最佳可用的圖像，例如為2x移動設(shè)備顯示2x圖像。沒有srcset支持的瀏覽器則會使用<img>標簽中src指定的默認值。
<img srcset="paul-irish-320w.jpg,
paul-irish-640w.jpg 2x,
paul-irish-960w.jpg 3x"
src="paul-irish-960w.jpg" alt="Paul Irish cameo">
像Cloud和Imgix這樣的圖像CDN服務(wù)都支持控制圖像密度，并支持從單一的規(guī)范來源為用戶提供最佳密度的圖像。
<aside class="note"><b>注意:</b> 您可以通過這個免費的Udacity（優(yōu)達學(xué)城）課程和Web基礎(chǔ)知識中的圖像指南，了解有關(guān)設(shè)備像素比和響應(yīng)圖像的更多信息。</aside>
友好的提醒你，Client Hints也提供了一個替代的標記方案來指定每個可能的像素密度和圖像格式，借此來實現(xiàn)響應(yīng)圖像。不同的是，此信息是被附加到HTTP請求中，而Web服務(wù)器就可以通過它來選擇最適合當(dāng)前設(shè)備屏幕密度的圖像來返回回去。
藝術(shù)化的響應(yīng)
盡管向用戶提供適配分辨率的內(nèi)容很重要，但是有些網(wǎng)站可能會需要考慮藝術(shù)化的響應(yīng)圖像像是。如果用戶位于一個較小的屏幕上，則可能需要裁剪或放大圖像，以充分利用可用的空間突出圖像的主題內(nèi)容。雖然美術(shù)設(shè)計方面的內(nèi)容超出了這個寫作的范圍，但像Cloudinary的服務(wù)是提供了這樣的API，來盡可能地嘗試自動化的處理類似的需求。
