GIF サイズ最適化ガイド：WebP/APNG/動画による置き換えソリューションの比較

GIFは1987年に作成され、LZW圧縮コーディングを使用し、グローバルパレットが最大256色に対応しています。ネイティブで高色の動的コンテンツをサポートしていません。この圧縮技術の特許は1990年代に失効しましたが、色の制限により、現在のウェブページの表示要件を満たせなくなっています。

ほとんどのシナリオにおいて、運用担当者やデザイナーが出力する高ダイナミックGIFのサイズは10MBを超え、ページ読み込みを遅くしてウェブサイト訪問者の定着率を低下させます。そのため、GIFの置き換えが一般的な最適化要件となっています。

WebPアニメーションはVP8コード化されたキーフレームシーケンスに基づいて圧縮を実現します。キーフレームのみが完全なフレームを保存し、隣接するフレームは差分領域のみを保存するため、全フレームを保存するGIFと比較して多くの容量を節約できます。WebPアニメーションは24ビットトゥルーカラーをサポートしており、GIFのような256色の制限がありません。

同一サイズ・同一フレームレートでの比較テストでは、WebPアニメーションのサイズは元のGIFと比較して30%から70%小さくなります。高ダイナミックコンテンツの場合は圧縮率が高く、低フレームの静的グラデーションコンテンツの場合は下限に近づきます。

APNGはPNG形式の拡張として開発され、フルカラーアルファチャンネルをサポートしています。Google外のチームにより2008年に公開され、現在ではすべての主流なデスクトップおよびモバイルブラウザがネイティブサポートを実装しています。

APNGはWebPアニメーションよりも圧縮効率が低いですが、非圧縮のGIFよりは高くなります。同一コンテンツの場合、通常サイズはGIFより10%から30%小さくなるため、一部の古いPNG処理ツールとの互換性が必要なシナリオに適しています。

長さが3秒を超え、幅が800pxを超えるアニメーションの場合、H.264エンコードされたMP4動画をHTML5のvideoタグと共に使用して自動ループ再生を実現する方法が、最も圧縮効率の高いソリューションです。

HTTP Archiveの2024年のデータによると、60%以上のサイトがGIFアニメーションの置き換えにMP4を使用しています。同一の画質の場合、サイズは元のGIFの10%から20%にしかならず、サイトの帯域幅消費を大幅に削減することができます。

設定時には、autoplay、loop、mutedの各属性を有効にし、ポスターフレームを追加して読み込み体験を向上させる必要があります。すべての主流ブラウザがこの設定モードをサポートしています。