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

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

まだ時代遅れの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ファイルには最高の互換性がありますが、品質とファイルのサイズは最適ではありません。 AV1の互換性はまだ完璧ではありませんが、最新のコーデックはNetflix、YouTube、Vimeoなどのプラットフォームが非常に高くなっています。

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

異なるコーデックを備えた複数の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画像形式の使用には、次の利点があります。

さまざまな画面サイズやテーマモード（ダークモードなど）には、さまざまなアニメーション画像を使用できます。
怠zyな荷重のネイティブサポート：
• <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要素の数に依存します。

結論：絶対的な最良の解決策はありません。特定のニーズとプロジェクト条件に基づいて、選択を検討する必要があります。

以上が.gifなしのgif：現在最もパフォーマンスのある画像とビデオオプションの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。