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