.gifなしのgif：現在最もパフォーマンスのある画像とビデオオプション-CSSチュートリアル-php.cn

.gifなしのgif：現在最もパフォーマンスのある画像とビデオオプション

William Shakespeare

リリース： 2025-03-10 09:46:09

オリジナル

123 人が閲覧しました

GIF時代に別れを告げる！効率的なWebアニメーションのベストプラクティス

GIFs Without the .gif: The Most Performant Image and Video Options Right Now

まだ時代遅れのGIFアニメーションを使用していますか？実際、より効率的でより良いパフォーマンスの代替品があります！この記事では、ブラウザの互換性とユーザーエクスペリエンスを考慮して、より近代的なテクニックを備えたスムーズなループビデオアニメーションを実現する方法について詳しく説明します。

html`<video></video>`要素を使用しています

htmlの<video></video>要素を使用して、GIFアニメーション効果を簡単に再現します。

このコードは、自動再生、ループ再生、ミュート、インライン再生を実装します（フル画面再生は避けてください）。ただし、ビデオ形式の互換性の問題は無視することはできません。

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

ログイン後にコピー

ビデオファイルは、コンテナとビデオコーデックで構成されています（オーディオを含む、オーディオコーデックも含まれています）。一般的なビデオコンテナ形式はMP4とWebmです。ブラウザは、ビデオを再生するためにコンテナとコーデックの両方をサポートする必要があります。

ブラウザは、さまざまな複雑で多様な方法でビデオ形式をサポートしています。これが、YouTube埋め込みビデオが非常に人気がある理由の1つです。どのビデオ形式を検討する価値があるかを見てみましょう：

コンテナ形式：

MP4：2001年のリリース以来、ほぼすべてのブラウザによってサポートされています。

Webm：iOS Safariを除き、2010年にリリースされ、その他のブラウザはそれをサポートしています。

codecode：

H.264：すべてのブラウザがサポートしています。

HEVC/H.265：Safari、Edge、およびChrome（バージョン105以降）でサポートされているH.264の後継者。
VP9：webmをサポートするすべてのブラウザによってサポートされているVP8の後継者。
AV1：Chromeは2018年からサポートされており、Firefoxは2019年からサポートされており、EdgeとSafariはまだサポートされていません。
H.264エンコーディングを備えた

古いブラウザと新しいブラウザを考慮に入れるには、複数の要素を使用して、理想的なソースファイルの指定を優先して、次の代替案を追加できます。

異なるコーデックを備えた複数のMP4ファイルを使用する必要がある場合は、複雑なパラメーターを使用する必要があります。 <source></source>

ほとんどのビデオ編集ソフトウェアは、AV1またはWebM形式の直接エクスポートをサポートせず、FFMPEGなどのツールを使用して変換を必要とします。

<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>

ログイン後にコピー

GIFをMP4：

に変換します codecs

ビデオを背景として使用し、他の要素を重ねるには、CSSの位置決めが必要です。

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

ログイン後にコピー

要素の欠点の1つは、画面の冬眠を防ぐことです。

写真の利点：webpとavif

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

ログイン後にコピー

アニメーション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形式（2019年にリリース）は現在最高の画像形式の1つです。GIFをAVIFに変換すると、バイト数を90％以上削減できます。

AVIFはAV1ビデオコーデックに基づいており、静的およびアニメーション画像をサポートしています。 
（フォームは省略されています。元のフォームと同じ）  
<video autoplay="" loop="" muted="" playsinline="" src="cats.mp4"></video>
ログイン後にコピー
ログイン後にコピー
 を使用しています
これは、サファリのビデオバックグラウンドやボーダー画像などの効果を実現できます。

Safariは、この機能にはパフォーマンスの利点があると主張していますが、Chromeはそれをサポートしないことを明らかにしました。 
ユーザーの好みを尊重します
<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およびWebP形式のサポートは、Chrome DevToolsの「レンダリング」タブを使用してオフにすることができ、コード互換性をテストできます。 
<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>
ログイン後にコピー
ログイン後にコピー
ロッティアニメーションライブラリ
Lottieは、After Effectsからアニメーションデータ（JSONファイル）をエクスポートし、Webページにレンダリングするオープンソースアニメーションライブラリです。  複数のプラットフォームをサポートし、再生、一時停止、逆再生などの柔軟な制御オプションを提供します。 

Lottieのパフォーマンスは、ライブラリサイズとJSONファイルサイズ、および生成されるDOM要素の数に依存します。 
結論：絶対的な最良の解決策はありません。特定のニーズとプロジェクト条件に基づいて、選択を検討する必要があります。