スマホに大きすぎる画像を送っていない？Web画像のサイズと表示の基本

画面上で画像を小さくしても、ダウンロードするファイルまで小さくなるとは限りません。画像の見た目、ファイルの大きさ、読み込み前の表示領域を分けると、読みやすさと待ち時間を見直しやすくなります。

表示の幅と、画像ファイルの幅は別のもの

横幅の大きな写真を、スマートフォンの画面に収まるよう縮めて表示することはできます。しかし、元のファイルをそのまま送っていれば、受け取るデータ量は表示幅に合わせて減りません。

反対に、小さすぎる画像を大きく引き伸ばすと、細部がぼやけることがあります。必要なのは「常に一番小さい画像」ではなく、表示する場所と端末に合う画像です。

MDNのレスポンシブ画像の解説は、サイズの異なる候補をブラウザーへ渡す方法を説明しています。srcsetは画像の候補、sizesは表示幅の手掛かりを伝えるための属性です。ブラウザーは画面の条件などに応じて候補を選びます。

同じ構図のまま解像度を変える場合と、狭い画面で伝える部分を変える場合では、画像の準備も異なります。

たとえば、人物が端に小さく写った横長写真を、そのままスマートフォンへ縮小すると、誰が写っているか分かりにくくなります。狭い画面向けに人物を大きく切り抜く方法なら、伝えたい対象を保ちやすくなります。これは構図を考えるための例です。

MDNは、このように構図を切り替える方法をアートディレクションと呼び、picture要素を使った例を紹介しています。同じ写真でも、単なる縮小でよいか、切り抜きが必要かを先に決めると、候補を無駄に増やさずに済みます。

ただし、商品や設備の一部を切り落とすと、形状や利用条件の誤解につながる場合もあります。容量だけでなく、何を残すべき写真かを見て判断することが必要です。

画像が表示された瞬間に本文やボタンが下へ動くと、読んでいた場所を見失ったり、押そうとした対象が移動したりします。

web.devのレイアウトのずれに関する解説では、画像の幅と高さを指定するなどして、読み込み前から必要な領域を確保する方法が紹介されています。画像の縦横比が分かれば、表示幅に合う高さを計算できます。

ここでの幅と高さは、スマートフォンでも固定サイズではみ出させるための指定ではありません。縦横比の情報を持たせつつ、画面に応じて表示幅を調整する考え方です。構図を切り替えて縦横比も変えるなら、その条件に合う領域が確保されているかを確かめます。

確認では、狭い画面と広い画面で同じページを開き、画像の細部と配置を見ます。開発者ツールを使える場合は、実際に選ばれた画像と転送量も比べられます。

表が見切れる場合は横にスクロールできます

画像を変更しただけで、ページ全体がどれほど速くなるかは決まりません。変更前後で同じ条件を使って測り、見た目の品質も残せているかを判断するとよいでしょう。

Web画像では、適切な候補を届けること、構図を保つこと、読み込み前の領域を確保することが別々の確認点になります。よく見られるページの大きな画像から、一つずつ比べてみてください。

測定結果の読み方はCore Web Vitalsの基本、画像の意味を文字で伝える方法は代替テキストの書き方で扱っています。