Fast load times系列翻譯——選擇正確的圖片格式
Fast load times系列翻譯——選擇正確的圖片格式
看到這個標題，你需要先自問一下，一張圖片是否真的達到了預期的效果？一個好的設計就是簡單，而且總能擁有最好的效能。你可以去儘量除掉圖片資源，因為相對於頁面上的 HTML、CSS、JavaScript 或其他資源，圖片通常佔據了更大的位元組，所以儘量要去除掉每一個圖片資源，這永遠是最好的優化策略。但是，一張合適位置的圖片傳達的資訊比千言萬語都要多，所以我們需要找到它們之間的平衡點。
所以，我們要開始考慮，是否存在另一種可以更有效地達到預期結果的技術：
- 使用CSS（例如陰影或漸變）和 CSS 動畫可以用來生成 解析度無關 的內容，這些內容在每個解析度和縮放等級上看起來都一樣清晰，它通常只是圖片內容中的一小部分。
- web fonts 使用字型的形式來實現。它同時保留了選中、查詢、重置大小等功能，這是對它可用性的重大突破。
如果你想要把文字編碼到圖片本身上，請三思。好的排版對於好的設計、品牌和可讀性來說是至關重要的，但是圖片上的文字對於使用者體驗是很糟的：文字不可選擇、不可搜尋、不可縮放、不可訪問，對高 DPI 的裝置也非常不友好。雖然 web font 的使用需要走自己的一套優化流程，但是 web font 解決了上述這些所有問題，並且永遠是顯示文字的最好選擇。
選擇正確的圖片格式
如果你確定圖片是最終的正確的選擇，你學要謹慎地選擇正確的圖片型別。
每個格式都有它們自己的優缺點。向量格式非常適合包含簡單幾何形狀（例如徽標，文字或圖示）的影象。它在每種解析度和縮放下都能保持清晰，這使得它成為了有高解析度螢幕和不同螢幕尺寸需求的產品的首選。
但是，遇到複雜場景時，向量圖形也有短板，例如：一張圖片，它可能用了大量的SVG 標記來描述目標圖形，但是看起來依然不是很“逼真”。當這種情況下，你可能就需要使用 PNG、JPEG或 WebP 格式了。
柵格影象沒有像向量圖形那樣的縮放無關的特性，當你對它進行縮放時，你可能會看到鋸齒和模糊的圖形。為了解決這個問題，你就需要個使用者準備多張不同解析度的版本，以便在不同解析度下展示。
高解析度螢幕的影響
有兩種不同的畫素：CSS 畫素和裝置畫素。一個CSS 畫素可能對應了一個或多個裝置畫素。這麼做的意義是什麼呢？裝置畫素越多，螢幕上顯示的內容細節就越豐富精細。
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片儲存下來直接上傳(img-91DuHFd5-1602775232031)(https://webdev.imgix.net/choose-the-right-image-format/css-vs-device-pixels.png)]
高 DPI(HiDPI) 的螢幕能呈現更漂亮的結果，但是這也有一個明顯的問題：為了更好地利用更高的裝置畫素，影象內容也需要新增更多細節。好訊息是，向量圖形非常適合用來解決這個問題，因為它們可以在任何解析度下得到相同清晰的結果。為了渲染更精細的細節，你也需要付出更高的效能成本，但是，你不再需要單獨適配那些裝置和不同解析度。
從另一個角度說，柵格圖形正面臨著巨大的挑戰，因為它們是安裝畫素對影象進行編碼的，因此，畫素數量越大，影象檔案的越大。例如，我們思考一下在 100x100 CSS畫素上圖片大小的區別：
| 螢幕分辯率 | 總畫素 | 未壓縮大小 (4位元組每畫素) |
|---|---|---|
| 1x | 100 x 100 = 10,000 | 40,000 bytes |
| 2x | 100 x 100 x 4 = 40,000 | 160,000 bytes |
| 3x | 100 x 100 x 9 = 90,000 | 360,000 bytes |
當我們使用兩倍解析度的螢幕時，總的畫素數量增加了 4 倍：兩倍數量的豎直方向畫素，兩倍數量的水平方向畫素。因此，“2x”螢幕並非只是兩倍，而是四倍畫素！
那麼，這在實踐時有什麼意義呢？高解析度螢幕能夠提供美麗的影象，這可能是一個偉大的功能。但是，高解析度螢幕也意味著需要高解析度影象，因此：
- 儘量選擇向量影象，因為它們與解析度無關，並且總能提供清晰的影象。
- 如果必須選用柵格圖形，則提供響應影象(不同畫素提供不同大小圖片)。
不同柵格影象格式的特點
除了不同的有損和無失真壓縮演算法，不同的影象格式支援不同的特性，如動畫和透明度(alpha)。因此，為特定影象選擇正確的格式是需要 期望的結果 和 功能需求 相結合的。
| 格式 | 透明 | 動畫 | 瀏覽器支援 |
|---|---|---|---|
| PNG | 是 | 否 | 所有 |
| JPEG | 否 | 否 | 所有 |
| WebP | 是 | 是 | 所有現代瀏覽器.點此查詢 |
這裡有兩個普遍支援的柵格影象格式：PNG和 JPG。此外，現代瀏覽器還支援更新的 WebP 格式，它提供了壓縮和其他更多特性。那麼，我應該選擇哪個呢？
WebP 格式相較於老格式提供了更好的壓縮特性，應該儘可能地使用。你可以將 WebP 和其他一種影象格式一起使用，詳情參見：使用WebP影象。
對於舊格式，可以思考以下問題：
- 是否需要動畫？請使用
<video>標籤- 有人會問，那 GIF 呢? GIF 限制了色彩範圍最多為 256 種顏色，並且檔案大小比
<video>檔案更大。詳情參考Replace animated GIFs with video。
- 有人會問，那 GIF 呢? GIF 限制了色彩範圍最多為 256 種顏色，並且檔案大小比
- 你需要保持使用高解析度時的圖片細節嗎? 請使用PNG。
- 除了色彩範圍外外，PNG 使用的是無失真壓縮演算法，所以，他的影象質量最高，但是相對應的體積也會更大。要謹慎地使用。
- 如果影象只是幾何圖形組成的，請考慮將其轉換為向量(SVG)格式
- 如果影象內容包括了文字，請三思而後行。圖片中的文字是不可選擇，不可搜尋，不可縮放的，如果你想要傳達一個定製的內容（商標或其他），請使用 web font。
- 如果你打算優化圖片，或是截圖，或者有類似的圖片資源，請使用 JPEG。
- JPEG結合使用了有損和無失真壓縮來減少影象檔案的大小。
最後，如果你在使用 WebView 來呈現特定於平臺的應用程式中的內容，那麼你可以完全控制客戶端，那麼你可以直接單獨使用 WebP！Facebook 和許多其他公司都已經在他們的應用程式的所有圖片使用 WebP 格式，相較於節省下來的費用，這絕對是值得的。
譯者的話
圖片佔用了一個頁面的絕大部分體積，所以選擇正確的圖片型別和格式對頁面的優化是最大的，圖片的優化也是效能優化中最被關注的點。這篇文章介紹的是圖片優化最基礎的部分，也就是選擇正確型別的圖片，這個優化最容易做並且效果也很直觀（體積的變化）。
文章還介紹了什麼是 CSS 畫素和裝置畫素，自從蘋果推出了視網膜屏後，裝置畫素也成為了前端必須瞭解的點。它也造成了另一個老生常談的問題：如何生成 1px 線，看了這篇文章一定就理解了為什麼 1px 線會出現問題。
最後普及了一下 png 和 jpg 的區別，並給出了選擇建議，並推行了一下 webP 格式。如果你的專案需要適配老瀏覽器，那還是算了，若只需要適配現代瀏覽器，那你完全可以嘗試一下！
關於 webfont 的推薦文章
關於1 px 線的推薦文章
歡迎關注我的個人微信公眾號：前端 stack，每週分享一篇外文技術翻譯哦
原文連結：https://web.dev/choose-the-right-image-format/