多媒體：影片

對於一般的網站，25% 的頻寬來自影片。最佳化影片有可能節省大量頻寬，從而提高網站效能。

以下部分描述了以下最佳化技術

• 壓縮所有影片
• 最佳化 <source> 順序
• 從靜音影片中刪除音訊
• 最佳化影片預載入
• 考慮流媒體

大多數影片壓縮工作比較影片中相鄰幀，目的是刪除兩幀中完全相同的細節。壓縮影片並匯出到多種影片格式，包括 WebM 和 MPEG-4/H.264。

您的影片編輯軟體可能具有減小檔案大小的功能。如果沒有，可以使用線上工具，例如 FFmpeg（在下面部分討論），它可以編碼、解碼、轉換和執行其他最佳化功能。

將影片源按從小到大排序。例如，給定 10MB 和 12MB 格式的影片壓縮，首先宣告 10MB 資源

<video width="400" height="300" controls="controls">
  <!-- WebM: 10 MB -->
  <source src="video.webm" type="video/webm" />
  <!-- MPEG-4/H.264: 12 MB -->
  <source src="video.mp4" type="video/mp4" />
</video>

瀏覽器會下載它理解的第一個格式。目標是提供較小版本的資源，然後再提供較大版本的資源。對於最小的版本，請確保壓縮程度最高的影片看起來仍然不錯。有些壓縮演算法可能會讓影片看起來像動畫 GIF（很差）。雖然 128 Kb 的影片看起來似乎比 10 MB 的下載可以提供更好的使用者體驗，但顆粒狀的 GIF 式影片可能會對品牌或專案產生負面影響。

對於英雄影片或其他沒有音訊的影片，刪除音訊是明智的。

<video autoplay="" loop="" muted playsinline="" id="hero-video">
  <source src="banner_video.webm" type='video/webm; codecs="vp8, vorbis"' />
  <source src="web_banner.mp4" type="video/mp4" />
</video>

此英雄影片程式碼（上面）在會議網站和公司主頁上很常見。它包含一個自動播放、迴圈播放和靜音的影片。沒有控制元件，因此無法聽到音訊。音訊通常為空，但仍然存在，並且仍然使用頻寬。沒有理由為始終靜音的影片提供音訊。**刪除音訊可以節省 20% 的頻寬。**

根據您選擇的軟體，您可能可以在匯出和壓縮期間刪除音訊。如果沒有，可以使用名為 FFmpeg 的免費實用程式來完成此操作。這是用於刪除音訊的 FFmpeg 命令字串

ffmpeg -i original.mp4 -an -c:v copy audioFreeVersion.mp4

preload 屬性有三個可用選項：auto、metadata 和 none。預設設定為 metadata。這些設定控制在頁面載入時下載多少影片檔案。您可以透過推遲下載不太流行的影片來節省資料。

設定 preload="none" 會導致在播放之前不下載任何影片。它會延遲啟動，但對於播放可能性較低的影片而言，可以節省大量資料。

設定 preload="metadata" 可以節省更多適度的頻寬，它可能會在頁面載入時下載多達 3% 的影片。對於某些小型或中等大小的檔案來說，這是一個有用的選項。

將設定更改為 auto 會告訴瀏覽器自動下載整個影片。僅當播放非常有可能時才執行此操作。否則，它會浪費大量頻寬。

影片流媒體允許將適當的影片大小和頻寬（根據網路速度）傳遞給終端使用者。類似於響應式影像，正確的尺寸影片會被傳遞到瀏覽器，確保影片快速啟動、緩衝少以及最佳化播放。

最佳化影片有可能顯著提高網站效能。與其他網站檔案相比，影片檔案相對較大，因此始終值得關注。本文介紹瞭如何透過減小檔案大小、使用（HTML）下載設定以及使用流媒體來最佳化網站影片。

• 上一個
• 概述：Web 效能
• 下一個