寫在前面
在本文中，我將介紹 4 種最新的圖像類型，以幫助您爲下一個項目選擇最佳的圖像類型。
WebP
這個應該是JPEG 和 PNG 令人興奮的替代品。
WebP是谷歌在2010年開發的一種開源圖片格式，雖然不是很流行，但是知名組織都在使用WebP。
例如，Facebook在 Android 應用程序中使用 WebP，將圖像尺寸縮小了:
-
25–35% 與 JPEG 相比。 -
80% 與 PNG 相比。
根據Google 的 WebP 研究，在有損壓縮方面，WebP 比 JPEG 小 25-34%。
此外，當谷歌將 Youtube 縮略圖移動到 WebP 時，他們觀察到頁面速度提高了 10%。
WebP的優點如下：
-
支持無損和有損壓縮。 -
與其他圖像格式相比，圖像文件大小大大減小。 -
支持無損透明。 -
支持網頁動畫。
網站WebP使用統計：https://w3techs.com/technologies/details/im-webp
瀏覽器支持方面的話，您可能想知道，爲什麼它還沒有在開發人員中流行？
主要原因在於其瀏覽器支持。儘管 Chrome、Firefox、opera mini 和 Edge 支持 WebP，但 Safari 直到最近才支持它。有了 safari 的支持，我們可以期待在未來幾年內快速採用 WebP。
更多內容點擊鏈接：https://caniuse.com/?search=webP
AVIF
這種格式將會是下一代圖像編碼格式。
AV1 圖像文件格式 (AVIF) 是一種由開放媒體聯盟 (AOM) 開發的免版稅開源文件格式。在某些情況下，AVIF 可以將圖像尺寸縮小：
-
50% 與 JPEG 相比。 -
30% 與 WebP 相比。
AVIF圖像類型的優點如下：
-
支持網頁動畫。 -
支持透明。 -
支持無損壓縮。 -
支持任何圖像編解碼器。 -
在全分辨率下支持 10 位和 12 位顏色。
瀏覽器支持方面上，雖然 Chrome85、Opera 和 Firefox（僅基礎）支持 AVIF，但它的瀏覽器支持比 WebP 少。
SVG
這是一種可擴展的高質量圖像。
SVG（可縮放矢量圖形）是一種用於二維圖形的基於 XML 的矢量文件類型。
SVG圖像類型的優點如下：
-
可以搜索、索引、縮放和壓縮 SVG 圖像。 -
支持使用 CSS 和 JavaScript 的網絡動畫。 -
在任何分辨率或尺寸下都保持清晰。 -
支持透明。
但是，SVG 圖像尺寸比其他圖像格式大，而且大多數人都知道，它不適合攝影圖像。
HEIF
該圖像的特點是快速編碼和解碼。（注意：目前僅支持原生 MacOS 和 iOS）
HEIF（高效圖像文件格式）是 JPEG 圖像格式的另一個主要競爭對手。HEIF 圖像格式由運動圖像專家組 (MPEG) 於 2015 年開發。
HEIF 壓縮尺寸較小但圖像質量高於 JPEG 的圖像。
HEIF圖像類型的優點如下：
-
與 JPEG 圖像相比大小減半，但保留了相同或更好的圖像質量。 -
採用高效視頻壓縮格式壓縮和快速編解碼。 -
支持網頁動畫。 -
支持有損和無損壓縮。 -
支持透明度和 16 位顏色。
對於瀏覽器支持方面來說，HEIF 支持 macOS Sierra 和 iOS 11 及更高版本的原生應用程序。目前，沒有可用的瀏覽器支持。
因此，如果您正在考慮將 HEIF 用於 Web 應用程序，我們必須等到適當的瀏覽器支持公告才能繼續。
如何選擇一個？
除了以上 4 種之外，一些常見的圖像格式如 JPEG、PNG 和 GIF 也經常用於 Web 應用程序中。因此，我準備了一個決策樹來幫助您根據您的要求選擇合適的格式。
另外，爲了便於比較，我總結了這些圖像格式的屬性如下。
關鍵要點
JPEG：這是彩色照片的理想圖像格式。
PNG：這是一種理想的圖像格式，可以保留精細的細節、最高分辨率圖形的透明度以及顏色較少的屏幕截圖。
GIF：這是動畫圖形的理想圖像格式。
SVG：這是高質量圖像的理想圖像格式，可以縮放到任何大小。
WebP：WebP 圖像格式是 JPEG 和 PNG 的一種更新的令人興奮的替代方案，支持無損和有損壓縮。
HEIF： HEIF 圖像格式是 JPEG 的替代品，具有快速編碼和解碼。
AVIF： AVIF 是即將推出的圖像格式，它是 JPEG 和 WebP 的最佳替代品
小結
現階段有許多圖像格式選項，至於哪一種需要你仔細考慮。很明顯目前還沒有完美的圖像格式選項，您需要根據自己的要求選擇類型，同時考慮好處和瀏覽器支持。
隨着最新的發展，WebP 的使用量穩步增加，隨着瀏覽器支持的增加，AVIF 可能是一個不錯的選擇。
是否還有其他領先的圖像格式沒有在此處展示？歡迎在下方發表評論。
本文分享自微信公衆號 - 前端自習課（FE-study）。
如有侵權，請聯繫 [email protected] 刪除。
本文參與“OSC源創計劃”，歡迎正在閱讀的你也加入，一起分享。