多媒體：影片

為什麼需要最佳化您的多媒體？

對於平均網站而言，25% 的頻寬來自影片。最佳化影片具有巨大的頻寬節省潛力，可以轉化為更好的網站效能。

最佳化影片傳輸

以下各節將介紹以下最佳化技術：

• 壓縮所有影片
• 最佳化 <source> 順序
• 為靜音影片移除音訊
• 最佳化影片預載入
• 考慮流式傳輸

壓縮所有影片

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

您的影片編輯軟體可能有一個減小檔案大小的功能。如果沒有，還有線上工具，例如 FFmpeg（在下一節中討論），它可以進行編碼、解碼、轉換以及執行其他最佳化功能。

最佳化 <source> 順序

按從最小到最大的順序排列影片源。例如，給定 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 動畫。雖然 128KB 的影片可能比下載 10MB 的影片能提供更好的使用者體驗，但一個顆粒狀的 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 效能
• 下一頁