本文最初由 Karanjeet Singh 在 Adobe Tech Blog上發表。已獲作者授權翻譯和發佈。
https://medium.com/adobetech/image-optimisation-with-next-gen-image-formats-webp-and-avif-248c75afacc4
網頁速度用來衡量網頁加載內容的速度。通常，網站的網頁速度應該在不損害用戶體驗的情況下足夠快。影響網頁速度的因素有很多，其中之一就有圖片優化。對於開發者來說，往往最大的挑戰總是圖片。當我們在討論網頁加載緩慢的問題時，圖片往往就是罪魁禍首。
無論是對於終端用戶、搜索引擎還是廣告來說，速度是第一要素。
谷歌認爲Core Web Vitals（核心網頁指標）對所有的網站體驗都至關重要。Core Web Vitals是谷歌用來衡量用戶真實體驗、以用戶爲中心的一套關鍵指標。谷歌有計劃將網頁體驗作爲一個谷歌官方排名的影響因素，網站的用戶體驗將對網站的排名產生更大的影響。Core Web Vitals的規範將使你持續接收新聞提要。對於我們大多數人來說，蘋果或谷歌的新聞閱讀器一直是我們的“晨報”。如果保持定期更新，谷歌的新聞閱讀器將是博客流量的一個重要來源。Core Web Vitals包含了網頁加載時間、可視化的穩定性和頁面交互性三個指標。
接下來，讓我們看看如何使用 AEM Dynamic Media（動態媒體）來獲得更高的谷歌排名，它可以實現更快的頁面加載，並且保留高質量的視覺效果。
*Adobe Experience Manager (AEM) 是一種用於構建網站、移動設備應用程序和表單的全面內容管理解決方案。
JPEG/PNG 是目前最常用的圖片格式（幾乎所有瀏覽器都支持），它們已經出現了將近20年。而WebP 則是一種現代的圖片格式，它可以對網絡上的圖片進行更加高性能的無損和有損壓縮。WebP 可以更顯著地壓縮網頁上照片的大小，使網站加載速度比以前更快。同時WebP也支持透明圖層和多圖片動圖，它是透明PNG圖片和GIF動圖絕佳的替代方案。
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修飾符。
基於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：
現在，人們可以很容易地開始使用這兩種格式中的任何一種。通過查看瀏覽器的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網站，它將使網站輕量化和加載速度更快，從而提升網站的性能。
