スマートフォンはどの画像を取得する？

表示枠を小さくしても取得するファイルは小さくなりません。全員に同じ原寸写真を送れば、スマートフォンも不要なピクセルを取得します。圧縮とレスポンシブ選択は異なる問題を解決します。

サイト向けの手順は準備方法、画像配信ガイドは性能診断との関係を説明します。この実験はスコアではなく、準備した写真から実際の選択までを追います。

圧縮前に外部の画像編集ソフトで縦横比を保つコピーを作りました。Bitinz が寸法を変更したわけではありません。2026-10-29 にローカルエンジンのバランスで処理し、寸法、容量、照合値で候補を特定しました。

ページは srcset で候補を提示し、適切な sizes を添えました。ビューポートの幅、ピクセル密度、選択された画像を記録しています。測るのは画像の転送量で、ページ全体の読み込みやモバイル回線の再現ではありません。根拠は編集方針を参照してください。

候補の容量を比較し、出典内のブラウザー記録を確認してください。ブラウザーはページが提供したファイルからしか選べません。

Bitinz · 1 KB は 1000 バイトです。

各行はキャッシュを無効にした新しいブラウザー環境で測定しました。最も幅広い高密度の条件では、候補間に大きな幅の空きがあるため最大画像が選ばれました。中間の候補を追加して試す価値があります。ブラウザーは一覧にあるファイルからしか選べません。

元写真の細部

圧縮写真の細部

小さな画面と高密度画面で見てください。最小の候補でもぼやければ適切ではなく、大きな候補も圧縮率が良いだけでは必要とは言えません。

選択記録は指定環境での観測です。後の閲覧ではキャッシュやブラウザーの判断が影響します。再現する際は新しいブラウザー環境で、表示寸法から推測せず実際の取得画像を確認してください。

準備したコピーを画像圧縮ツールで処理し、サイトや管理システムから適切な候補を配信します。どの画面にも同じ大きなファイルを指定したままでは、圧縮だけで選択は変わりません。

sizes は CSS レイアウトと一致させます。ブラウザーは候補と表示密度とともにその情報を使い、ファイル名から意図を読み取りません。レイアウト変更後は取得画像を再確認してください。

繰り返し行う公開作業では、開発者向け APIを使って準備済みのファイルを圧縮できます。サイズ変更は別の準備作業です。画質ガイドでは、画像を差し替える前に細部を比較する方法を説明しています。

1. 01画像枠を測り、デザインに必要な比率を保つ幅を決める。
2. 02原本を残し、各コピーを準備して圧縮する。
3. 03レイアウトに合う sizes と候補を提供する。
4. 04異なる画面で取得画像と実際の見た目を確認する。