画像が果たすべき役割で選ぶ
拡張子ではなくアセットから始めてください。写真は連続階調コンテンツなので、表示サイズに応じて一部のロスは許容できます。スクリーンショット、チャート、ロゴ、線画はエッジやテキストが鋭く、アーティファクトが目立ちます。これらはロスレス出力か慎重な承認で保護してください。ベクターのロゴや図は利用できるなら SVG を使います。
次に必要な機能を特定します。アルファはピクセル単位の透明度を意味します。アニメーションはフレームの連続です。必要なブラウザカバレッジ、公開量、ビルド時間は、より小さいフォーマットよりも優先され得る配信上の制約です。
まずロッシーな AVIF と WebP をテストしてください。幅広い互換性が必要な不透明フォールバックとして JPEG を用意しておきます。
ロスレスのソースを保持します。実際の表示スケールで PNG とロスレス WebP または AVIF を比較してから選択してください。
AVIF、WebP、または PNG を使用してください。JPEG はアルファチャンネルを持たないため選ばないでください。
各フォーマットが提供するものを理解する
AVIF は AV1 で符号化された画像を HEIF ベースのコンテナに格納します。仕様には静止画像、画像列、およびアルファ画像アイテムが含まれます。ロッシーとロスレスのエンコード、透明度、アニメーションをサポートします。節約量は固定ではなく、元画像、エンコーダー、速度、目標品質、メタデータによって変わります。
WebP はロッシーとロスレスのモード、透明度、アニメーションをサポートします。JPEG は非常に広い歴史的サポートを持つロッシーの静止画像フォーマットで、不透明な写真のフォールバックとして有用です。PNG はアルファを持つロスレスで、正確なグラフィックのフォールバックに適していますが、写真には非効率的になりがちです。通常の PNG は静的なので、動きが必要なら別のアニメーション形式をテストしてください。
転送量削減の利益がエンコードとフォールバックの作業を正当化する高価値ラスタ画像で検討するのに適しています。
透明度やアニメーションを含むモダンな汎用ラスタオプションとして有用です。
不透明な写真のフォールバックとして使う。透明なロゴや切り抜きには使えません。
ロスレスかつ透明を必要とするラスタフォールバックや、最小バイト数よりピクセル忠実度が重要なアセットに使います。
一つのフォーマットに賭けるのではなくフォールバック経路を構築する
ブラウザが代替を評価できるように picture 要素を使います。まず AVIF、その次に WebP、最後に JPEG や PNG の img フォールバックと正しい MIME タイプを置いてください。ブラウザはサポートしていない source をスキップし、利用できるソースがない場合はフォールバックを使います。意図的にトリミングを変えない限り、同じ意味のある代替テキストを維持してください。
フォーマットのフォールバックはレスポンシブサイズを置き換えません。スロットが変わる場合は幅に基づく候補と正確な sizes 値を提供してください。width と height を含めてブラウザがスペースを確保できるようにします。小さなフォーマットファイルを過大なピクセル寸法で供給するとバイトを無駄にします。
AVIF を先、WebP を次、フォールバックとして不透明写真には JPEG、透明やロスレスが必要なら PNG を最後に置きます。
サーバーが picture マークアップではなくリクエスト能力からフォーマットを選ぶ場合、キャッシュの変動（Vary）を正しく設定し、各クライアントがデコード可能な表現を受け取ることをテストしてください。
優先デコーダを持たないクライアントを使うかステージでソースを意図的に無効にして、画像、寸法、代替テキストが正しいことを確認してください。
エンコード時間を見積もり視覚品質を保護する
モダンな圧縮は処理をエンコード側に移します。AVIF のリファレンスエンコーダーは 0（最も遅い）から 10（最も速い）までの速度レンジを提供します。WebP もエンコーダー作業量と時間、出力サイズ、品質をトレードオフします。バッチ再エンコードやオンデマンド変換は運用上の判断であり、無料の設定変更ではないと扱ってください。
アセットクラスごとに再現可能なポリシーを設定し、一般的な表示サイズでオリジナルをレビューしてください。顔、グラデーション、テキスト、エッジ、透明境界を点検します。マスターを保持し、エンコーダーのバージョンと設定を記録して、欠陥が発生した際に再現およびロールバックできるようにします。
高速なエンコードはビルド負荷を軽減できますが、ファイルが大きくなったり圧縮効率が落ちる可能性があります。自分のソースセットでベンチマークしてください。
スコアやプリセットは、訪問者にとって意味のある画像領域の視覚的レビューに代わるものではありません。
画像フォーマットの変更を信頼性向上の予防策にする
Status Is UP にとって、画像最適化は重要ページを劣化させないための予防的アップタイム作業です。重要な画像の URL を把握し、代表的な変換をステージングで行い、コンテンツタイプ、CDN の挙動、キャッシュ無効化を検証してからサイト全体の移行を行ってください。
リバーシブルなバッチでデプロイします。リリース候補でレンダリングと転送挙動を比較し、新しい経路が実証されるまで古い表現を保持してください。変換やキャッシュ規則が失敗した場合は既知の良好なソースを復元します。これは AVIF や複数フォーマットを強制する普遍的な命令ではなく、回復力のある配信方針です。
リード画像やファーストユースフルビューに影響するコンテンツ画像を優先し、すべてのアーカイブ画像を一度に処理しないでください。
決定的なアセット名やバージョン化されたマッピングを保持して、以前の JPEG、PNG、または WebP パスを迅速に復元できるようにします。