画像を軽くして、スマホでの表示を速くする｜形式・大きさ・読み込みの指定を実測で比べる

1. 軽くする順番は、まず大きさ、次に形式

測定には、macOSに付属する風景写真1枚（3840×2160px、JPEG、約5.4MB）を使いました。同じ写真を、幅1600px、800px、400pxに縮め、形式を変えて保存し、ファイルサイズを比べました。

元の写真（約5.4MB）を幅1600pxのJPEGにするだけで約219KB、幅800pxなら約63KBです。形式を変える前に、画面で表示する大きさまで縮めるのが、いちばん効果の大きい作業でした。

測定の条件：Python（Pillow 12.3）で保存した値で、1枚の写真での結果です。「品質」の数値は形式ごとに意味が違うため、同じ数値でも同じ見た目になるとは限りません。ここではファイルサイズだけを測り、見た目の比較はしていません。

2. 形式の選び方

MDNの画像形式の解説を、用途別に整理します。

測定でも、同じ写真のPNGは、同じ大きさのJPEGの約8倍でした（1600px幅で1,836KBと219KB）。写真にPNGは向きません。

図や文字の入った画像

1200×630pxの図（文字と線が中心の画像）も測りました。PNGが66KB、JPEG（品質85）が55KB、WebP（品質80）が25KB、AVIF（品質60）が18KBでした。ここでもファイルサイズだけで、見た目の比較はしていません。MDNは、図やスクリーンショットには、正確に再現できるPNGが向くとしています。形式を変えたら、文字の周りがにじんでいないかを、拡大して自分の目で確かめます。

3. HTMLの指定：width・height、loading、srcset

widthとheight

MDNは、すべての画像にwidthとheightを付けるよう勧めています。ブラウザが読み込む前に縦横の比率を知り、場所を確保できるため、画像が出た瞬間にページがずれる（レイアウトのずれ）ことを防げます。

loading="lazy"

画面の外にある画像の読み込みを、近づくまで遅らせる指定です。MDNによると、遅らせるのはJavaScriptが有効なときだけです。画面の最初の部分に見える画像に付けるべきかは、MDNのこのページでは触れられていません。この記事では、最初の画面に見える画像には付けず、スクロールした先の画像にだけ付ける方針にします。

srcsetとsizes

大きさの違う画像を複数用意して、ブラウザに選ばせる書き方です。srcsetに画像と幅（400wなど）を並べ、sizesに、その画像を表示する幅を書きます。

<img src="photo-800.jpg"
     srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1600.jpg 1600w"
     sizes="(width <= 600px) 100vw, 800px"
     width="1600" height="900" loading="lazy" alt="写真の内容の説明">

実際にブラウザが選ぶ画像を測りました。ブラウザの画面の濃さ（devicePixelRatio）は2です。

画面の濃さが2のため、375pxで表示するには750pxぶんの画素が必要で、その次に大きい800wが選ばれました。小さな画面で小さな画像が使われるので、スマホで受け取るデータが減ります。この結果はChrome 152（macOS）での測定です。ブラウザは、画像を選ぶ方法を決める自由があり、通信の状況なども考慮できるとMDNは書いています。

4. 作業の手順

1. 元の写真を、保存用として別の場所に残す。
2. 表示する最大の幅を決める（本文の幅が800pxなら、1600pxまで）。
3. 幅400px・800px・1600pxの3つを作る。
4. HTMLに、width、height、alt、必要ならsrcsetとloading="lazy"を書く。
5. 公開したら、開発者ツールの「Network」で、画像の転送サイズを見る。

from PIL import Image

im = Image.open("元の写真.jpg").convert("RGB")
for w in (400, 800, 1600):
    h = round(im.height * w / im.width)
    im.resize((w, h), Image.LANCZOS).save(f"photo-{w}.jpg", quality=85, optimize=True)

1ページに載せた画像の合計サイズを記録して、更新のたびに増えていないかを見ます。一緒に、画像が画面からはみ出さない指定（max-width:100%;height:auto）も入れます。公開できるファイルの大きさの上限は、HTMLの公開手順に書いています。