ブラウザ互換性の高いメディア形式の選択早見表

https://1.bp.blogspot.com/-11IY8US22b8/XXXOmmFKlRI/AAAAAAABUwI/q0vKcClXCAYAp2vvTMgZHwk7HUMKoq84QCLcBGAs/s400/kotowaza_enikaitamochi_man.png

Chrome や Firefox、Safari など主要なブラウザでサイズを可能な限り小さくしながらパフォーマンスとクオリティを得るためのメディア形式の選択方法の早見表

Lighthouse や Core Web Vitals のスコアを比較的簡単に向上できるので変換できそうなものは試すといいかも

🖼画像の場合

アルファチャンネルなしのアニメーション

→ Animated WebP

アルファチャンネルありのアニメーション

画像として組み込む必要がある (background-image など) / 圧縮を優先する

→ APNG、もしくは全フレームが blend: no な Animated WebP

動画として組み込める / 圧縮は優先しない

→ video タグを使用し HEVC と WebM を組み合わせる

アニメーションを含まない画像 → WebP

🎞動画の場合

ある程度圧縮しても構わないものや小さなパーツ

video タグを使用し HEVC と WebM を組み合わせる

もしくは Animated WebP や APNG にして画像として扱う

それ以外は基本的には YouTube にアップロードして組み込んでセルフホストは避ける

ストレージ容量を消費するし効率的な配信をするのは準備が難しいため

備考

Safari では以下の制約がある

フレームをブレンドするアルファチャンネル付き Animated WebP を正しくレンダリングできない

アルファチャンネル付き WebM は非対応

HEVC は現時点で Safari の系列でしか再生できない

WebP は圧縮率を上げると黄色からオレンジがくすむ傾向がある

圧縮率を下げるか、黄色が主体の画像の場合はロスレスを選択すると良い