高密度ディスプレイに役立つ画像寸法を選択してください

幅 800 css ピクセルで表示されるカードは、2x の例として、幅 1600 画像ピクセルの画像候補を使用できます。 Web サイトがレスポンシブ イメージ マークアップを提供する場合、ブラウザーは、レイアウト、デバイスの密度、およびその他の条件に基づいて適切なソースを選択する場合があります。 1600 ピクセルのファイルは、カードがページ上の 1600 CSS ピクセルを占有するという意味ではありません。

エクスポートする前に実際のレイアウトを測定してください。 記事のコラム、全幅のバナー、小さな製品カードに同じソース サイズが必要になることはほとんどありません。 また、画像の幅が異なるか、別のトリミングを使用する可能性がある電話のレイアウトも確認してください。 すべてのファイルをデスクトップ ビューポートの最大幅の 2 倍にすると、バイトが無駄になる可能性があります。 すべてのデバイスがダウンロードする必要がある単一の特大サイズのファイルではなく、高密度のエクスポートを実際のレスポンシブ実装の候補として扱います。

このページは、1600 x 1600 ピクセルの WebP フィット ボックスから始まります。 これは実例となる境界ですので、測定した表示サイズに基づいて値に置き換えます。 Fit inside はプロポーションを維持し、より小さなソースを拡大しません。 たとえば、ワイド オリジナルは幅が 1600 ピクセルに達する場合がありますが、ポートレートは代わりに高さに適合します。 実際の出力寸法を確認してください。

ソースの幅が 700 ピクセルしかない場合、1600 ピクセルのエクスポートを作成しても、より大きなオリジナルの詳細は作成されません。 より良いソースを使用するか、より小さな候補を受け入れます。 サイズ変更後のライトシャープニングとオフを比較し、目的のディスプレイ サイズで細かいテクスチャを検査します。 ここでの WebP エクスポートは不透明なので、透明なグラフィックスの場合は、代わりに PNG を使用してください。 後で別の候補を作成できるように、元のデザインまたは写真を保管してください。

コンバーターはファイルを生成します。 あなたの Web サイトは、それを選択して正しく表示する必要があります。 適切なソース候補、正確なサイズのヒント、および実装で予約済みの画像寸法を提供します。 電話が存在するという理由だけで最大の画像を受け取るべきではありません。 コンテンツ管理システムが再び変換する可能性があるため、最終ページを評価するときは、ブラウザ開発ツールでダウンロードした画像を確認してください。

通常の高密度画面設定でページを表示し、詳細を転送サイズと比較します。 より高解像度の画像は、小さな装飾的なカードとの最良のトレードオフではありません。 同様に、1 つの画像が大きすぎると、大きな製品ビューでは見栄えがよくなることがあります。 ぼやけた背景だけを判断するのではなく、顔やラベルなどの意味のあるコンテンツをテストします。 画像の位置に合わせて優先順位を読み込み続け、実際のページを測定してから、速度または Web Vitals の改善を主張します。

最も幅の広いカードが 400 CSS ピクセルであり、その幅でイラストが鮮明なままであるとします。 800 ピクセルの候補は、ソースがサポートしている場合、2 倍のエクスポートの可能性があります。 電話の画面全体にまたがる画像は、デスクトップ カードとは異なる表示幅を持つ可能性があるため、より狭いレイアウトでもカードを確認してください。 最小のものを拡大するのではなく、必要な候補ごとにオリジナルからエクスポートします。 実際のページでブラウザが選択したファイルを確認します。 最終的な選択チェックは、ローカルのディメンションの計算と、訪問者が実際に画像に対して受け取るバイト数を結びつけるものです。