ブラウザ互換性の高いメディア形式の選択早見表
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
Safariで表示できるアルファチャンネル付きAnimated WebPの作り方
動画として組み込める / 圧縮は優先しない
→ video タグを使用し HEVC と WebM を組み合わせる
アニメーションを含まない画像 → WebP
🎞動画の場合
ある程度圧縮しても構わないものや小さなパーツ
video タグを使用し HEVC と WebM を組み合わせる
もしくは Animated WebP や APNG にして画像として扱う
それ以外は基本的には YouTube にアップロードして組み込んでセルフホストは避ける
ストレージ容量を消費するし効率的な配信をするのは準備が難しいため
備考
Safari では以下の制約がある
フレームをブレンドするアルファチャンネル付き Animated WebP を正しくレンダリングできない
アルファチャンネル付き WebM は非対応
HEVC は 現時点で Safari の系列でしか再生できない
WebP は圧縮率を上げると 黄色からオレンジがくすむ傾向がある
圧縮率を下げるか、黄色が主体の画像の場合はロスレスを選択すると良い
関連
Safariはアルファチャンネル付きAnimated WebPを正しくレンダリングできない場合がある