ブログ・ショップの本文画像は幅何ピクセル？800・1200・1600pxを比較

作成 2026-10-27 · 更新 2026-10-27 · 運営者（個人）

ブログ記事や商品ページに写真を入れるとき、スマホの元画像をそのまま載せるとページが重くなり、小さくしすぎると画面でぼやけて見えます。ちょうどよい幅は、写真が表示される本文の幅と画面の倍率で決まります。この記事では同じ画像を4つの幅で保存し、実際のブラウザが1倍・2倍・3倍の画面に描いた様子を比べます。

まず画面の倍率を知っておく

Webページの720pxは、画面の画素720個と同じとは限りません。最近のノートPCやスマホは、CSSの1pxを画素2個や3個で描きます。そのため本文幅720pxのブログは2倍の画面で1440画素、本文幅360pxのスマホは3倍の画面で1080画素を使います。写真の幅がこの画素数より小さいとブラウザが引き伸ばして描くのでぼやけ、大きいと縮めて描きます。

同じ画像を4つの幅で保存しました

3200×2133の画像を自作しました。商品ラベルのような大小の文字、細い縦線、細かい質感が入っています。「画像リサイズ」で幅800・1200・1600・2400pxを作り、画質85で保存しました。WebPの容量は20.1KB、61.0KB、119.4KB、284.2KBで、幅を2倍にすると容量は4倍以上になりました。JPEGは24.5KB、64.6KB、135.3KB、273.2KBで、2400pxではむしろWebPより少し小さくなっています。

次に、Edgeでそれぞれのファイルを本文の幅に合わせた画像として表示し、画面の倍率を変えて実際の画素を撮影しました。比べたのは、元画像を同じ画素数に精密に縮小した見え方との文字のSSIMです。1に近いほど同じに見えます。

1倍の画面なら1200pxで十分でした

本文720px・1倍の画面では、800pxでも0.962と悪くなく、1200pxが0.984、1600pxが0.985でした。1200pxからはほとんど差がありません。画面に必要な画素が720個しかないので、それより大きい写真は縮めて描かれるからです。

2倍の画面では800pxがにじみました

同じ本文を2倍の画面で見ると1440画素が必要です。800pxは文字のSSIMが0.916に下がり、1600pxでは0.80画素以内で切り替わっていた黒い四角の境目が2.18画素にわたってにじみました。1200pxは0.968で少し柔らかく、1600pxは0.989、2400pxは0.994です。比較画像では1600pxと2400pxはほとんど見分けられませんが、容量は119.4KBと284.2KBで2倍以上違います。800pxでは28pxの小さな文字がつぶれて読みにくく、大きな文字の輪郭もにじんで見えます。1200pxは文字は読めますが、線の縁が少し柔らかくなります。

本文360pxの3倍のスマホ画面（1080画素）は、写真の幅が1080より小さいと引き伸ばして描く必要がある場所です。ここでは800pxが0.926、1200pxが0.977、1600pxが0.988、2400pxが0.989でした。スマホでも1200pxまでで大きく良くなり、1600pxから先はほとんど同じです。

記事1本の重さで考える

写真1枚なら数十KBの差は小さく見えても、1本の記事に10枚入れると話が変わります。今回の結果で計算すると、1600pxのWebP 10枚は約1.2MB、2400pxは約2.8MB、3200pxのままWebPにすると1枚503.6KBで約4.9MBです。2倍の画面での1600pxと2400pxの文字SSIMの差は0.005なので、その差のために2倍以上のデータを送ることになります。モバイル回線で記事を開く読者には、その差が待ち時間になります。

MiruKitで合わせる手順

1. 「画像リサイズ」で写真を開きます。複数枚をまとめて選べます。
2. 「幅・高さ」を選び、「幅（px）」に1600を入れます。「縦横比を保つ」がオンなら高さは自動で合います。
3. 縦長の写真が混ざっているなら「最大サイズ」を選び、「最大サイズ（px）」に1600を入れます。長いほうの辺が1600に合わせられます。
4. 「ファイル設定」でWebPかJPEGを選び、プレビューの容量を確かめて保存します。

できるだけ軽くしたいショップなら、1200pxがよい落としどころです。2倍の画面では少し柔らかくなりますが、容量は1600pxの約半分です。写真を画面いっぱいに広く見せるデザインなら、その幅に画面の倍率を掛けて計算し直してください。

MiruKitで実際に確認した結果

自作の3200×2133の画像（文字・細い線・細かい質感）を、リサイズと同じprocessImageで幅800・1200・1600・2400px、画質85のWebPとJPEGに保存しました。それをEdgeで本文の幅（CSS 720px・360px）に合わせたimgで表示し、画面の倍率1・2・3で実際の画素として撮影しています。文字のSSIMは、元画像を同じ画素数に精密に（lanczos3）縮小した理想の見え方との比較です。

実測の元データを見る

公式の出典

• MDN: Window.devicePixelRatio

出典の確認日 2026-10-27