注明：本人原創(chuàng)翻譯陶因，原版為Essential Image Optimization電子書森枪，這里將其拆分為幾篇文章發(fā)布誉简。另外柄沮，文中部分鏈接可能會因?yàn)椤熬W(wǎng)絡(luò)”原因無法打開回梧。不必著急，我會慢慢將其中一些比較好的內(nèi)容翻譯過來發(fā)表祖搓，都會在這個“Web圖像技術(shù)深究”專題中狱意。
正文：
概要
我們都應(yīng)該讓圖片壓縮自動化！
在2017年拯欧，我們應(yīng)該開始讓圖片優(yōu)化自動化了∠甓冢現(xiàn)在，對于Web來說镐作，一個很容易被忽略的實(shí)踐準(zhǔn)則變化就是：一個不經(jīng)過構(gòu)建發(fā)布流程的內(nèi)容是很容易出問題的藏姐。那么圖片優(yōu)化如何自動化，可以在構(gòu)建過程中使用imagemin或者libvips该贾，另外還有很多解決方案包各。
大多數(shù)的CDN（如Akamai）和第三方解決方案如Cloudinary、imgix靶庙、Fastly's Image Optimizer问畅、Instart Logic's SmartVision或者ImageOptim API都提供了全面的自動化圖像優(yōu)化方案。
實(shí)際上六荒，如果你自己處理护姆，那么閱讀博客文章和調(diào)整配置的時間成本可能遠(yuǎn)遠(yuǎn)大于這些服務(wù)的每月費(fèi)用（Cloudinary是有免費(fèi)版本的）。如果你基于成本或延時問題掏击，不想將此工作外包給第三方卵皂，那么依然有開源項(xiàng)目可以替代，比如Imageflow或Thumbor都可以搭建自己的圖片優(yōu)化自動化服務(wù)砚亭。
譯者：中國國內(nèi)類似的CDN灯变，如七牛云殴玛。
每個人都應(yīng)該有效地壓縮圖片！
至少添祸，要使用ImageOptim滚粟。它可以顯著的減少圖片的大小，同時保持圖片的顯示質(zhì)量刃泌，并且支持Windows和Linux凡壤。
更進(jìn)一步的話，可以使用MozJPEG來處理你的JPEG圖片（最好設(shè)置質(zhì)量為80%或者更低）并考慮支持漸進(jìn)式的JPEG耙替；使用pngquant處理PNG圖片亚侠；使用SVGO處理SVG。通過這些組件可以明確的刪除圖片文件的元數(shù)據(jù)俗扇，使得圖片不會過于龐大（pngquant中使用--strip選項(xiàng)）硝烂。不要使用體積瘋狂的GIF動畫，取而代之提供H.264動畫（或者為Chrome铜幽，F(xiàn)irefox和Opera瀏覽器提供WebM）滞谢！如果不行，至少使用Giflossy對GIF進(jìn)行優(yōu)化啥酱。如果你有更強(qiáng)勁的CPU爹凹，需要高質(zhì)量的網(wǎng)絡(luò)圖片，并且接受比較緩慢的編碼速度镶殷，那么你可以嘗試使用：Guetzli禾酱。
一些瀏覽器可以通過HTTP請求的Header設(shè)置支持的圖片格式。這個可以用于有條件的提供圖片格式：比如為基于Blink的瀏覽器（Chrome）提供WebP绘趋，而為其他瀏覽器返回JPEG/PNG格式颤陶。
事實(shí)上，你總是可以做到更多陷遮。一些工具可以生成和提供srcset屬性中的斷點(diǎn)滓走。在基于Blink的瀏覽器中，你可以通過client-hints進(jìn)行自動化處理資源格式的選擇帽馋，并且你可以發(fā)送較少的字節(jié)給在瀏覽器中選擇了“數(shù)據(jù)節(jié)省”的用戶（通過Header中的Save-Data）搅方。
圖片的大小越小，你為你的用戶提供的網(wǎng)絡(luò)體驗(yàn)就越好绽族，尤其對于移動設(shè)備來說姨涡。在這本書中，我們將研究通過現(xiàn)代壓縮技術(shù)減少圖像大小并且對質(zhì)量影響最小的方法吧慢。
目錄
- ?介紹
- 如何判斷我的圖像是否需要優(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ù)算
- 最后的建議
- 附注
