GIF沒有.gif：目前最出色的圖像和視頻選項

告別GIF時代！高效網頁動畫的最佳實踐

還在使用過時的GIF動畫？其實，如今有更多高效、性能更佳的替代方案！本文將深入探討如何用更現代的技術實現流暢的循環視頻動畫，並兼顧瀏覽器兼容性和用戶體驗。

使用HTML <video></video> 元素

利用HTML的<video></video>元素，輕鬆重現GIF動畫效果：

<video autoplay="" loop="" muted="" playsinline="" src="cats.mp4"></video>

這段代碼實現自動播放、循環播放、靜音以及內聯播放（避免全屏播放）。然而，視頻格式的兼容性問題不容忽視。

視頻文件由容器和視頻編解碼器組成（含音頻則另有音頻編解碼器）。常見的視頻容器格式有MP4和WebM。瀏覽器需要同時支持容器和編解碼器才能播放視頻。

瀏覽器對視頻格式的支持情況復雜多樣，這也是YouTube嵌入式視頻如此流行的原因之一。讓我們看看有哪些值得考慮的視頻格式：

容器格式:

• MP4：自2001年發布，幾乎所有瀏覽器都支持。
• WebM：2010年發布，iOS Safari除外，其他瀏覽器均支持。

編解碼器:

• H.264：所有瀏覽器都支持。
• HEVC/H.265：H.264的繼任者，Safari、Edge和Chrome（105版及以上）支持。
• VP9：VP8的繼任者，所有支持WebM的瀏覽器都支持。
• AV1：Chrome自2018年起支持，Firefox自2019年起支持，Edge和Safari尚未支持。

使用H.264編碼的MP4文件兼容性最佳，但質量和文件大小並非最佳。 AV1雖然兼容性尚不完善，但作為最新的編解碼器，其效率和質量極高，Netflix、YouTube和Vimeo等平台已在部分視頻中使用。

為了兼顧新舊瀏覽器，可以使用多個<source></source>元素，優先指定理想的源文件，然後依次添加備選方案：

<video autoplay="" loop="" muted="" playsinline="">
  <source src="cats.webm" type="video/webm; codecs='vp9'">
  <source src="cats.mp4" type="video/mp4; codecs='avc1.42E01E'">
</source></source></video>

如果需要使用不同編解碼器的多個MP4文件，則需要使用複雜的codecs參數。

大多數視頻編輯軟件不支持直接導出AV1或WebM格式，需要使用FFmpeg等工具進行轉換：

ffmpeg -i yourSourceFile.mov -map_metadata -1 -c:a libopus -c:v librav1e -qp 80 -tile-columns 2 -tile-rows 2 -pix_fmt yuv420p -movflags +faststart -vf "scale=trunc(iw/2)*2:trunc(ih/2)*2" videoTitle.mp4

將GIF轉換為MP4：

ffmpeg -i cats.gif -map_metadata -1 -an opus -c:v librav1e -qp 80 -tile-columns 2 -tile-rows 2 -pix_fmt yuv420p -movflags +faststart -vf "scale=trunc(iw/2)*2:trunc(ih/2)*2" cats.mp4

將視頻用作背景，並疊加其他元素，需要使用CSS定位：

.video-parent {
  position: relative;
  width: 100vw;
  height: 100vh;
}

.video-parent video {
  object-fit: cover;
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
}

<video></video>元素的一個缺點是會阻止屏幕休眠。

圖片的優勢：WebP和AVIF

使用動畫WebP或AVIF圖像格式，具有以下優勢：

• 可以針對不同屏幕尺寸或主題模式（例如深色模式）使用不同的動畫圖像。
• 原生支持懶加載：<img src="/static/imghw/default1.png" data-src="https://img.php.cn/" class="lazy" alt="GIFs Without the .gif: The Most Performant Image and Video Options Right Now ">
• 更容易作為背景圖像使用：background-image: url("coolbackground.webp");

可以使用<img src="/static/imghw/default1.png" data-src="https://img.php.cn/" class="lazy" alt="GIFs Without the .gif: The Most Performant Image and Video Options Right Now ">

(表格略，與原文表格相同)

使用動畫AVIF

AVIF格式（2019年發布）是目前最佳的圖像格式之一，將GIF轉換為AVIF可以減少90%以上的字節數：

<video autoplay="" loop="" muted="" playsinline="" src="cats.mp4"></video>

AVIF基於AV1視頻編解碼器，支持靜態和動畫圖像。

(表格略，與原文表格相同)

使用<img src="/static/imghw/default1.png" data-src="https://img.php.cn/" class="lazy" alt="GIFs Without the .gif: The Most Performant Image and Video Options Right Now ">

這在Safari中可以實現視頻背景或邊框圖像等效果：

<video autoplay="" loop="" muted="" playsinline="">
  <source src="cats.webm" type="video/webm; codecs='vp9'">
  <source src="cats.mp4" type="video/mp4; codecs='avc1.42E01E'">
</source></source></video>

Safari聲稱此特性具有性能優勢，但Chrome已明確表示不會支持此特性。

尊重用戶偏好

視頻元素自動尊重用戶的自動播放設置和“減少動畫”設置。

檢查漸進增強

可以使用Chrome DevTools的“Rendering”選項卡來關閉對AVIF和WebP格式的支持，以測試代碼的兼容性。

Lottie 動畫庫

Lottie是一個開源動畫庫，可以從After Effects導出動畫數據（JSON文件）並渲染到網頁上。 它支持多種平台，並提供靈活的控制選項，例如播放、暫停、反向播放等。

ffmpeg -i yourSourceFile.mov -map_metadata -1 -c:a libopus -c:v librav1e -qp 80 -tile-columns 2 -tile-rows 2 -pix_fmt yuv420p -movflags +faststart -vf "scale=trunc(iw/2)*2:trunc(ih/2)*2" videoTitle.mp4

Lottie的性能取決於庫大小和JSON文件大小以及生成的DOM元素數量。

結論：沒有絕對的最佳方案，選擇需根據具體需求和項目情況權衡。

以上是GIF沒有.gif：目前最出色的圖像和視頻選項的詳細內容。更多資訊請關注PHP中文網其他相關文章！