注明：本人原創(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)化
- 避免使用有損編解碼器重復壓縮圖像
-
減少不必要的圖像解碼和尺寸調(diào)整帶來的損耗
- 使用srcset提供HiDPI圖像
- 藝術(shù)化的響應(yīng)
- 顏色管理
- 圖像拼合技術(shù)
- 延遲加載非關(guān)鍵圖像
- 避免<code>display: none;</code>的陷阱
- 圖像CDN服務(wù)對你有意義嗎纱耻？
- 緩存圖像資源
- 預加載關(guān)鍵圖像資源
- 圖像的網(wǎng)絡(luò)性能預算
- 最后的建議
- 附注
正文：
SVG的優(yōu)化
保持SVG的優(yōu)良芭梯，意味著要清除任何不必要的東西。使用編輯器創(chuàng)建的SVG文件通常包含大量冗余信息（元數(shù)據(jù)弄喘、注釋玖喘、隱藏層等）。通衬⒅荆可以安全地刪除此內(nèi)容累奈，或?qū)⑵滢D(zhuǎn)換為更小的形式，而不影響當前要顯示的最終SVG急但。
SVG優(yōu)化的一些通用規(guī)則（SVGO）：
- 使用Minify和gzip壓縮您的SVG文件戒努。SVG實際上只是以XML格式表示的文本資源，和CSS突委、HTML以及JavaScript是一樣的柏卤，我們應(yīng)該使用Minify和gzip壓縮它以提高性能。
- 使用預定義的SVG圖形如
<rect>匀油，<circle>缘缚，<ellipse>，<line>和<polygon>取代路徑敌蚜。優(yōu)選預定義的形狀有助于減少生成最終圖像所需的標簽量桥滨，也意味著較少的瀏覽器解析和點陣描述代碼。減少SVG復雜度也意味著瀏覽器可以更快地顯示它弛车。 - 如果您必須使用路徑（Path）齐媒，請嘗試減少曲線路徑，盡量簡化和合并它們纷跛。Illustrator的簡化工具可以幫助您在復雜的藝術(shù)品中消除多余的點喻括，同時平滑不規(guī)則的曲線。
- 避免使用組（Group）贫奠。如果不能唬血，請嘗試簡化它們望蜡。
- 刪除不可見的圖層。
- 避免使用任何Photoshop或Illustrator效果拷恨。它們會使生成較大的位圖圖像脖律。
- 仔細檢查SVG中任何非友好的嵌入的位圖圖像。
- 使用工具優(yōu)化SVG腕侄。 SVGOMG是一個Jake Archibald為SVGO編寫的一個方便的Web端操作界面小泉。如果你使用Sketch，可以在導出時使用[SVGO壓縮插件](Sketch plugin for running SVGO)以減小導出文件的體積冕杠。
使用SVGO高精度模式（體積減少29%）和低精度模式（體積減少38%）處理SVG原圖后的對比示例微姊。
SVGO是一種Node.js環(huán)境下優(yōu)化SVG的工具。SVGO可以通過減少你的路徑（Path）中的精度點數(shù)分预，來減少最終文件的體積柒桑。每增加一個點位數(shù)后就會增加一個字節(jié)，這就是為什么更改精度（位數(shù)）會嚴重影響文件的體積噪舀。但是，改變精度需要非常小心飘诗，因為它會影響你的圖形的視覺效果与倡。
需要注意的是，雖然SVGO在前面的例子中都表現(xiàn)良好昆稿，并不會過分簡化曲線和形狀纺座，但是有很多情況下可能不是這樣。如上圖溉潭，觀察火箭上的線條可以看到在較低的經(jīng)度下净响，線條是如何產(chǎn)生了變形。
在命令行中使用SVGO：
如果您更喜歡GUI喳瓣，SVGO可以作為全局的npm CLI安裝：
npm i -g svgo
然后可以對本地的SVG文件執(zhí)行馋贤，如下所示：
svgo input.svg -o output.svg
它支持您可能期望的所有選項，包括調(diào)整浮點精度：
svgo input.svg --precision=1 -o output.svg
有關(guān)支持選項的完整列表畏陕，請參閱SVGO 說明文件配乓。
不要忘了壓縮SVG！
此外惠毁，不要忘記使用Gzip壓縮你的SVG資源或者使用Brotli來提供服務(wù)犹芹。因為SVG是文本的，所以壓縮率會非常高（可以減少50%）鞠绰。
當Google發(fā)布了一個新徽標時腰埂，我們宣布其最小版本的大小只有305個字節(jié)。
有很多高級的SVG技巧可以用來將其進一步刪減體積（一直到146個字節(jié)）蜈膨！可以說屿笼，無論是通過工具還是手動清理牺荠，可能你都有可能將SVG的體積再刮掉一些。
SVG Sprite
SVG在制作圖標時非常強大刁卜，它就像一個精靈一樣志电，提供了一種表示可視化圖形的方式，在這種方式里沒有奇怪的必須使用的字體蛔趴。它有著比圖標字體（SVG筆觸屬性）更精準的CSS樣式控制挑辆，更好的定位控制（不需要各種偽元素和CSS display），并且SVG 更容易理解孝情。
像svg-sprite和IcoMoon這樣的工具鱼蝉，可以自動將SVG組合成sprite，并可以通過CSS Sprite箫荡，Symbol Sprite或Stacked Sprite來使用魁亦。Una Kravetz有一篇實用的文章值得看一下，其中說明了如何使用gulp-svg-sprite進行SVG Sprite工作流程羔挡。Sara Soudein也曾在她的博客中表述轉(zhuǎn)變圖標字體到SVG洁奈。
進一步閱讀
Sara Soueidan的網(wǎng)頁交付中的優(yōu)化SVG技巧和Chris Coyier的實用SVG電子書都非常好。我還發(fā)現(xiàn)Andreas Larsen的優(yōu)化SVG帖子很有啟發(fā)（第1 部分绞灼，第2部分）利术。另外，在Sketch中準備和導出SVG圖標也是一個很好的借鑒低矮。
