WebP & AVIF 視頻探索
#002#
速度要求
頁(yè)面速度衡量頁(yè)面加載內(nèi)容的速度。一般來說，一個(gè)網(wǎng)站的頁(yè)面速度應(yīng)該足夠快而不影響用戶體驗(yàn)。影響網(wǎng)頁(yè)速度的因素有很多，其中之一就是圖像優(yōu)化。對(duì)于開發(fā)人員來說，最大的挑戰(zhàn)往往是圖像。當(dāng)我們談?wù)摼徛木W(wǎng)頁(yè)時(shí)，圖像通常是罪魁禍?zhǔn)住?/p>
無(wú)論是對(duì)于最終用戶、搜索引擎還是廣告，速度都是第一因素。
位于山峰之巔，即使寂寞，也值得
認(rèn)為 Core Web（Core Web ）對(duì)所有網(wǎng)站體驗(yàn)都至關(guān)重要。Core Web 是一組以用戶為中心的關(guān)鍵指標(biāo)， 使用它來衡量真實(shí)的用戶體驗(yàn)。谷歌計(jì)劃將頁(yè)面體驗(yàn)作為谷歌官方排名的一個(gè)因素，網(wǎng)站的用戶體驗(yàn)將對(duì)網(wǎng)站的排名產(chǎn)生更大的影響。Core Web 的規(guī)范將使您隨時(shí)了解新聞提要。對(duì)于我們大多數(shù)人來說，Apple 或 的新聞閱讀器一直是我們的“早報(bào)”。如果保持定期更新adobe軟件序列號(hào)在哪里查， 的新聞閱讀器將成為博客流量的重要來源。Core Web 包括網(wǎng)頁(yè)加載時(shí)間、視覺穩(wěn)定性和頁(yè)面交互性三個(gè)指標(biāo)。
接下來，讓我們看看如何使用 AEM Media（動(dòng)態(tài)媒體）來獲得更高的 排名，它可以實(shí)現(xiàn)更快的頁(yè)面加載并保留高質(zhì)量的視覺效果。
*Adobe (AEM) 是用于構(gòu)建網(wǎng)站、移動(dòng)應(yīng)用程序和表單的綜合內(nèi)容管理解決方案。
WebP 的出現(xiàn)
JPEG/PNG 是迄今為止最常用的圖像格式（幾乎所有瀏覽器都支持），它們已經(jīng)存在了將近 20 年。另一方面，WebP 是一種現(xiàn)代圖像格式，可以對(duì) Web 上的圖像執(zhí)行更高性能的無(wú)損和有損壓縮。WebP 更顯著地壓縮網(wǎng)頁(yè)上的照片大小，使網(wǎng)站加載速度比以前更快。同時(shí)，WebP還支持透明圖層和多圖動(dòng)畫，是透明PNG圖片和GIF動(dòng)畫的絕佳替代品。
AVIF 文件格式的開路
AVIF（AV1 Image File, AV1 Image File ）是一種圖片格式，用于將經(jīng)過AV1壓縮的圖片或圖片序列存儲(chǔ)為HEIF文件格式。目前谷歌、谷歌（ ）等主流流媒體公司都支持這種格式，AVIF圖像格式看起來很有前景。與 WebP 一樣，AVIF 也支持透明圖像和多圖像動(dòng)畫。因此，它也是PNG圖像和GIF動(dòng)畫的替代品。
AEM Media Smart 中的 WebP 和 AVIF 支持
在 AEM Media 中，我們從一開始就支持 WebP 圖像格式。我們?cè)谑褂?WebP 優(yōu)化網(wǎng)頁(yè)加載速度方面取得了長(zhǎng)足的進(jìn)步，從而為整個(gè)用戶群帶來了更好的體驗(yàn)。
這主要?dú)w功于智能成像（Smart）功能。這是 Adob??e 使用的一項(xiàng)專利技術(shù)，它通過根據(jù)用戶瀏覽器性能和最終用戶特征自動(dòng)優(yōu)化圖像格式、大小和質(zhì)量來提高圖像傳輸性能。所有 Media 和 AEM Media 用戶都支持此功能，無(wú)需額外付費(fèi)。
* 媒體是客戶創(chuàng)建、創(chuàng)作和交付富媒體內(nèi)容的中心。它是一個(gè)集成的富媒體管理、發(fā)布和服務(wù)環(huán)境。媒體是媒體功能的下一個(gè)演變。
在 Adob??e，我們希望盡快提供支持動(dòng)態(tài)媒體解決方案的 AVIF 圖像格式。我們現(xiàn)在支持 AVIF 格式的圖像傳輸（Image），與 AVIF 結(jié)合起來非?？?！我們將繼續(xù)嘗試將其作為 URL fmt 修飾符。
敬請(qǐng)期待 - 我們將很快在 Smart 中支持 AVIF
AEM Media 基于 AEM 網(wǎng)站
AEM Media 的 Smart 功能也可用于 AEM 網(wǎng)站，它可以通過使您的網(wǎng)站輕量級(jí)和加載更快來提高網(wǎng)站性能。如果您想為您在 AEM 網(wǎng)站上創(chuàng)作的數(shù)字資產(chǎn)添加動(dòng)態(tài)媒體功能，您可以直接在頁(yè)面上添加相關(guān)的動(dòng)態(tài)媒體組件。動(dòng)態(tài)媒體組件是智能的，它們可以識(shí)別您是在添加圖像還是視頻，并且可以相應(yīng)地更改可用的配置選項(xiàng)。只要在您的 Media 帳戶中激活了 Smart 功能，它就會(huì)在您的 AEM 網(wǎng)站頁(yè)面上啟用。
Media Image 功能目前也可用于 AEM 網(wǎng)站圖像和核心組件。
比較幾種圖像格式
在 AEM Media 中，PNG 格式的圖像通常被認(rèn)為是無(wú)損的。因此，所有 PNG 圖像始終以 100% 的質(zhì)量傳輸。在本次對(duì)比中，我們對(duì)比了質(zhì)量為90的JPEG/WebP格式的圖片和質(zhì)量為50的AVIF格式的圖片。值得一提的是，對(duì)于不同格式的圖片，圖片質(zhì)量的大小是主觀的。
那么我們?nèi)绾未_保圖像具有相同的視覺質(zhì)量呢？答案是 PSRN（峰值信噪比）。PSNR 是比較同一張圖片的恢復(fù)結(jié)果的好方法。為了在 PNG 格式中進(jìn)行比較，我計(jì)算了 JPEG/WebP/AVIF 格式圖像的 PSNR 值。
在這里，我們可以觀察到，與 90 質(zhì)量的 JPEG 格式圖像相比，90 質(zhì)量的 WebP 格式圖像和 50 質(zhì)量的 AVIF 格式圖像的 PSNR 值相似。
使用 WebP 和 AVIF 格式時(shí)圖像大小的優(yōu)化是驚人的。
壓縮結(jié)果
根據(jù)我們的實(shí)驗(yàn)結(jié)果，在使用 AEM Media 時(shí)，我們建議使用質(zhì)量為 50 的 AVIF 圖像來替換質(zhì)量為 90 的 WebP/JPEG 圖像（wid = 600).
（此建議基于我們對(duì)特定尺寸圖像的測(cè)試數(shù)據(jù)，并且會(huì)隨著圖像尺寸的顯著增加/減小而變化。我們計(jì)劃很快將 AVIF 與 Smart 結(jié)合使用，以利用 Adob??e 功能進(jìn)行自動(dòng)計(jì)算。）
在圖片視覺效果相同的情況下，AVIF與WebP相比，壓縮性能提升20%；與 JPEG 相比，WebP 的壓縮性能提高了 27%?？傮w而言，AVIF 壓縮的圖像大小平均比 JPEG 多 41%，在下面的示例 2 圖像中，我們甚至多壓縮了 76%。
我們對(duì)比了 WebP、AVIF 和 PNG，發(fā)現(xiàn)使用 WebP 可以提高 84% 的壓縮性能，使用 AVIF 可以提高 87% 的壓縮性能。由于 WebP 和 AVIF 都支持透明圖像和多圖像動(dòng)畫，因此它們是透明 PNG 圖像和 GIF 動(dòng)畫的良好替代品。
- PNG
- JPEG
-WebP
- AVIF
- PNG
- JPEG
-WebP
- AVIF
（此處僅展示部分圖片，更多圖片對(duì)比請(qǐng)瀏覽原文：
)
避免錯(cuò)過的恐懼癥（害怕錯(cuò)過）
想想是否所有的瀏覽器都提供了下一代圖像格式？目前，所有主流瀏覽器都支持 WebP，Apple 最近將其添加到 14+。 從 v85 開始在瀏覽器中完全支持 AVIF，從 v91 開始在移動(dòng)瀏覽器中完全支持。 也在努力增加對(duì) AVIF 的支持。我們來看看哪些瀏覽器支持WebP和AVIF：
WebP 支持（截至 2021.07)
AVIF 支持（截至 2021.07)
現(xiàn)在，人們可以輕松地開始使用這兩種格式。您可以通過查看瀏覽器輕松確定瀏覽器是否支持 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如果包含 image/avif，則表示它支持 AVIF 格式。同樣，如果包含 image/webp，這意味著它支持 WebP 格式。
這一切是不是讓你覺得太復(fù)雜了？然后讓 AEM Media 的智能成像技術(shù)自動(dòng)優(yōu)化網(wǎng)頁(yè)加載性能和 WebP 服務(wù)。在智能成像中支持 AVIF 也是未來路線圖的一部分。
總而言之adobe軟件序列號(hào)在哪里查，這些新的圖像格式真正解鎖了不斷增強(qiáng)的圖像壓縮功能。在保證相同畫質(zhì)的前提下，WebP的圖像尺寸平均縮小27%；AVIF在此基礎(chǔ)上進(jìn)一步縮小了20%的尺寸，可以在較低的質(zhì)量水平上保證圖像的視覺質(zhì)量。換句話說，它也可以在這個(gè)分辨率不斷提高的時(shí)代提供更高質(zhì)量的圖像。
AEM Media 的智能成像功能也可以應(yīng)用于 AEM 網(wǎng)站，這將通過使網(wǎng)站更輕、更快地加載來提高網(wǎng)站性能。