图片优化之下一代图片格式WebP和AVIF
點擊上方“LiveVideoStack”關注我們
本文最初由 Karanjeet Singh 在 Adobe Tech Blog上發表。已獲作者授權翻譯和發布。
原文網址：
https://medium.com/adobetech/image-optimisation-with-next-gen-image-formats-webp-and-avif-248c75afacc4
翻譯：姜金元
審校：LiveVideoStack特邀技術審校
編輯：Alex
WebP &?AVIF
?影音探索
#002#
?
?速度需求
網頁速度用來衡量網頁加載內容的速度。通常，網站的網頁速度應該在不損害用戶體驗的情況下足夠快。影響網頁速度的因素有很多，其中之一就有圖片優化。對于開發者來說，往往最大的挑戰總是圖片。當我們在討論網頁加載緩慢的問題時，圖片往往就是罪魁禍首。
無論是對于終端用戶、搜索引擎還是廣告來說，速度是第一要素。
??
?位于山峰，即使孤獨，也不虛此行
谷歌認為Core Web Vitals（核心網頁指標）對所有的網站體驗都至關重要。Core Web Vitals是谷歌用來衡量用戶真實體驗、以用戶為中心的一套關鍵指標。谷歌有計劃將網頁體驗作為一個谷歌官方排名的影響因素，網站的用戶體驗將對網站的排名產生更大的影響。Core Web Vitals的規范將使你持續接收新聞提要。對于我們大多數人來說，蘋果或谷歌的新聞閱讀器一直是我們的“晨報”。如果保持定期更新，谷歌的新聞閱讀器將是博客流量的一個重要來源。Core Web Vitals包含了網頁加載時間、可視化的穩定性和頁面交互性三個指標。
?
接下來，讓我們看看如何使用 AEM Dynamic Media（動態媒體）來獲得更高的谷歌排名，它可以實現更快的頁面加載，并且保留高質量的視覺效果。
?
*Adobe Experience Manager (AEM) 是一種用于構建網站、移動設備應用程序和表單的全面內容管理解決方案。
?WebP的出現
JPEG/PNG 是目前最常用的圖片格式（幾乎所有瀏覽器都支持），它們已經出現了將近20年。而WebP 則是一種現代的圖片格式，它可以對網絡上的圖片進行更加高性能的無損和有損壓縮。WebP 可以更顯著地壓縮網頁上照片的大小，使網站加載速度比以前更快。同時WebP也支持透明圖層和多圖片動圖，它是透明PNG圖片和GIF動圖絕佳的替代方案。
?
?為AVIF文件格式開路
AVIF (AV1 Image File Format，AV1圖像文件格式)是一種圖片格式，用于將AV1壓縮的圖片或圖片序列存儲為HEIF文件格式。目前主流流媒體公司如 NETFLIX 和谷歌（谷歌瀏覽器）都支持這種格式，AVIF圖片格式看起來前途無限。像WebP一樣，AVIF 也支持透明圖片和多圖片動圖。因此也是PNG圖片和GIF動圖的替代方案。
?在AEM?Dynamic Media智能成像中支持WebP和AVIF
在AEM Dynamic Media中，我們從一開始就支持了WebP圖片格式。在利用 WebP 優化網頁加載速度方面，我們已經取得了很大進步，使整個用戶群體獲得了更好的體驗。
這主要是得益于智能成像（Smart Imaging）功能。這是一項應用于Adobe Sensei的專利技術，它可以根據用戶瀏覽器性能和終端用戶特征來自動優化圖像格式、大小和質量，從而提高圖像傳輸的性能。所有的Dynamic Media Classic 和AEM Dynamic Media用戶都支持這一功能，并且不會收取額外的費用。
?
*Dynamic Media Classic是客戶創建、創作和交付富媒體內容的中心。它是一個集成的富媒體管理、發布和服務環境。Dynamic Media 是 Dynamic Media Classic功能的下一代演變。
?
在 Adobe，我們希望能盡早提供支持動態媒體解決方案的AVIF圖像格式。我們現在支持AVIF格式的圖像傳遞（Image Delivery），它和AVIF結合是非常酷炫的！我們將繼續嘗試把它作為一個URL fmt修飾符。
敬請期待——我們很快會在智能成像中支持AVIF
?基于AEM網站的AEM Dynamic Media
AEM Dynamic Media的智能成像功能也可以用于AEM網站，它可以使你的網站輕量級且加載速度更快，從而提高網站性能。如果要將動態媒體功能添加到您在AEM網站上創作的數字資產中，您可以直接在頁面上添加相關的動態媒體組件。動態媒體組件是智能化的，它們能識別你是在添加圖像還是視頻，并且能隨之更改可用的配置選項。只要在您的動態媒體賬戶中激活了智能成像功能，它將在您的AEM網站頁面上啟用。
動態媒體圖像功能目前也可用于AEM網站圖片和Carousel核心組件。
?
?對比幾種圖片格式
在AEM Dynamic Media中，PNG格式的圖片常被認為是無損的。因此，所有PNG圖片總是以百分百的質量傳輸。在這次的比較中，我們對比了將質量設為90的JPEG/WebP格式圖片和質量設為50的AVIF格式圖片。值得一提的是，對于不同格式的圖片來說，圖片質量的大小都是主觀的。
那我們如何確保圖片具有相同的視覺質量呢？答案是PSRN（峰值信噪比）。PSNR 是比較同一圖片恢復結果的好方法。以PNG格式做對比，我計算了JPEG/WebP/AVIF格式圖片的PSNR值。
?
在這里，我們可以觀察到，與質量為90的JPEG格式圖片相比，質量為90的WebP格式圖片和質量為50的AVIF格式圖片的PSNR值差不多。
使用WebP格式和AVIF格式時，在圖片大小上的優化是驚人的。
?
?
?
?
壓縮結果
根據我們的實驗結果，在使用AEM Dynamic Media時，我們推薦使用質量為50的AVIF格式圖片來替換質量為90的 WebP/JPEG格式圖片( wid = 600)。
（該推薦根據我們對特定尺寸圖像的測試數據所得出，且隨著圖像尺寸大幅增加/減少而發生變化。我們計劃很快會將AVIF和智能成像結合使用，從而利用Adobe Sensei功能來完成自動計算。）
?
在圖片視覺效果一樣的情況下，AVIF與WebP相比，提升了20%的壓縮性能；WebP與JPEG相比，提升了27%的壓縮性能。總的來說，AVIF比JPEG平均多壓縮了41%的圖片大小，在下面的樣例2圖片中，我們甚至多壓縮了76%。
?
我們將WebP、AVIF和PNG進行對比，結果發現，使用WebP提升84%的壓縮性能，使用AVIF可以提升87%的壓縮性能。由于WebP和AVIF也都支持透明圖片和多圖片動圖，所以它們是透明PNG格式圖片和GIF動圖的一個很好的替代方案。
請隨意滑動下面的圖片進行比較。
AdobeStock_115033825 - PNG
AdobeStock_115033825 - JPEG
AdobeStock_115033825 - WebP
AdobeStock_115033825 - AVIF
滑動查看更多
AdobeStock_148039072 - PNG
AdobeStock_148039072 - JPEG
AdobeStock_148039072 - WebP
AdobeStock_148039072 - AVIF
滑動查看更多
（此處僅展示了部分圖片，更多圖片對比請瀏覽原文：
https://medium.com/adobetech/image-optimisation-with-next-gen-image-formats-webp-and-avif-248c75afacc4）
?避免錯失恐懼癥（害怕錯過）
想一想是否所有的瀏覽器都提供下一代的圖像格式呢？目前，所有的主流瀏覽器都支持WebP，蘋果最近也將其添加到 Safari 14+中了。谷歌從v85開始就已經完全在Chrome瀏覽器中支持AVIF，并且從 v91開始支持移動瀏覽器。火狐瀏覽器也在努力增加對AVIF的支持。下面我們來看看有哪些瀏覽器支持WebP和AVIF：
?
支持WebP(截至2021.07)
?
支持AVIF（截至2021.07)
??
現在，人們可以很容易地開始使用這兩種格式中的任何一種。通過查看瀏覽器的Accept Header，你可以很容易地確定瀏覽器是否支持 AVIF/WebP。如：
?
> accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9如果Accept Header中包含image/avif，這表示它支持AVIF格式。同樣，如果Accept Header包含 image/ webp，這表示它支持 WebP 格式。
這一切是否讓你覺得太復雜？那就讓AEM Dynamic Media智能成像技術來自動優化網頁加載性能和WebP服務吧。在智能成像中支持AVIF也是未來路線圖的一部分。
?
總而言之，這些新的圖片格式真正解鎖了壓縮圖片愈加強大的功能。在保證相同的圖片質量的前提下，WebP的圖片大小平均減少了27%；AVIF則在此基礎上進一步減少了20%的大小，并且能夠在較低的質量水平下，保證圖片的視覺質量。換句話說，在這個分辨率不斷提高的時代，它還可以提供更高質量的圖像。
?
AEM Dynamic Media的智能成像功能也可以應用于AEM網站，它將使網站輕量化和加載速度更快，從而提升網站的性能。
掃描圖中二維碼或點擊閱讀原文
了解大會更多信息
喜歡我們的內容就點個“在看”吧！
總結
以上是生活随笔為你收集整理的图片优化之下一代图片格式WebP和AVIF的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 来，一起搞AV，LiveVideoSt
- 下一篇： 在线问答专栏开启