車両画像用の WebP、AVIF または PNG

車の画像は圧縮するのが難しい画像クラスです。曲面の塗装に写る写真のグラデーション、カットアウトの鋭いエッジ、そしてカスタム背景に車を合成する際にアルファチャンネルが無事に残る必要があります。一般的なウェブ画像のアドバイスはほとんど通用しますが、例外的なケースが車の画像の本質です。ここには、一度きちんと決めたフォーマットの選択があります。

実践上の3つの形式

それぞれが勝つ場所

PNG：アーカイブと合成形式

PNGは、印刷やデザインパイプラインに入ったときに再圧縮される場合、およびダウンストリームの合成が数学的にクリーンなアルファチャネルを必要とする場合、バイトを正確に2倍にします。ウェブページの配信形式としては、習慣であり、決断ではありません。見た目に変わらないのに、転送量が5倍になることが多いです。

WebP: デフォルト

アルファチャンネル付きの WebP は、透明なカットアウトを PNG の重量の一部で提供し、ブラウザのサポートが普遍的で、リクエストごとに品質を制御できるため、仕事の馬です。リストグリッドや VDP ギャラリーには、format=webp に明示的な width を使用するだけで十分です。

AVIF：鉛筆は鋭いが、絵は同じ

AVIFは、同等の品質でWebPよりも強く圧縮され、そのサポートストーリーも今や良好だ。本質的な問題は限界の利得だ：適切にサイズ調整された車両の切り抜きでは、PNGからWebPへのステップは劇的だが、WebPからAVIFへのステップはトリムだ。パイプラインを構築する前に、現在提供されているフォーマットを /api/options で確認すること。

フォーマットの選択を上回るミス

• 小さなスロットにフル解像度の画像を提供する。幅のパラメータが存在するので、それを使用してください。
• 白い背景に車を配置するページにPNGの透明度を送信する
• 既に圧縮されている画像を自社のパイプラインで再圧縮し、切り取りエッジにアーティファクトを重ねる
• 品質パラメータを無視：車両レンダリングは圧縮に強く、デフォルト品質のすべては簡単にバイトを残します

フォーマットの選択は一回のミーティングに値します。サイズの規律は四半期ごとに一回のミーティングに値します、永遠に。

具体例

48台の車両カードを表示するリストグリッドを取得します。フルサイズのPNGとしてページは数十メガバイトの画像を送信しますが、モバイルユーザーはセルラー接続でそれを読み込み終えません。同じグリッドを600ピクセル幅のWebPで表示すると、通常、画像ごとに2桁小さくなります。デザインは変わらず、接続の大半を占めるショッパーにとって、グリッドは使えないものから一瞬で表示されるものに変わりました。

フォーマットの選択を srcset とペアにして、ブラウザが残りの作業を行います：小さな画面は小さなバリアントを引き、レティナ画面は鋭いものを引き、誰も見えないピクセルをダウンロードしません。次元がリクエストパラメータであるため、レスポンシブなセットアップは数字が1つ異なる3つのURLです。

シャドウと透明度のバリアントがどのようなもので、どのように組み合わされるかは、シャドウ、反射、透明度で説明されている。配信パラメータはAPIドキュメントにある。