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