Web画像はどのサイズを選ぶ？｜実ファイル2点の容量比較

ウェブ用画像は、元画像をそのまま載せず、表示する大きさに近いファイルを選びます。YumePicsの紫陽花と市街地の写真で比べると、1024px版は元画像の約7%と約5%の容量でした。見た目の寸法を保ちながら、読み込み量を大きく減らせます。

以下の数値は、WordPressに実在するファイルの寸法とバイト数を2026年8月2日に取得したものです。回線速度を推測した表示時間ではなく、実ファイルの比較として示します。

紫陽花：3.65MBから264KBへ

ファイル	寸法	実測容量	元画像比
元画像	5712×4284px	3,653,819 bytes（約3.65MB）	100%
large	1024×768px	264,263 bytes（約264KB）	約7.2%
medium	300×225px	44,425 bytes（約44KB）	約1.2%
thumbnail	150×150px	30,557 bytes（約31KB）	約0.8%

本文の表示幅が800〜1000pxなら、1024px版は元画像より用途に近い大きさです。300px版は小さなカードに向きますが、記事幅いっぱいに引き伸ばすと細部が粗く見えます。150px版は正方形に切り取られているため、紫陽花の周囲まで見せたい用途には合いません。

市街地：4.65MBから241KBへ

ファイル	寸法	実測容量	元画像比
元画像	4032×3024px	4,648,603 bytes（約4.65MB）	100%
large	1024×768px	241,289 bytes（約241KB）	約5.2%
medium	300×225px	41,444 bytes（約41KB）	約0.9%
thumbnail	150×150px	25,084 bytes（約25KB）	約0.5%

市街地の写真は建物の細部が多いため、小さくしすぎると輪郭がつぶれます。カードでは300px版、記事内の大きな作例では1024px版というように、掲載場所ごとに選ぶ方が、すべてを一つのサイズで済ませるより分かりやすくなります。

幅だけでなく、切り取り方を見る

元画像、1024px版、300px版は、いずれも横4：縦3の比率です。150px版だけは正方形です。容量が小さくても、主役が切れていれば適切な画像とはいえません。人物や看板の一部だけが残り、かえって意味が伝わりにくくなることもあります。

WordPressでの選び方

1. ページ上で画像が表示される最大幅を確認する。
2. その幅と同じか、少し大きい生成サイズを選ぶ。
3. スマートフォンとパソコンで、主役の切れ方と文字の読みやすさを見る。
4. 同じ画像を複数の幅で使う場合は、WordPressのsrcsetを消さず、ブラウザーに選択させる。
5. 画質を変換した場合は、元画像を別に保管し、細部の崩れを実画面で確かめる。

容量の小ささだけを競うと、写真の役割を損ないます。YumePicsでは、寸法・容量・切り取りの3点を実ファイルで確かめ、そのページで必要な最小限のサイズを選びます。写真の構図から選ぶ場合は構図の実例ガイドもご覧ください。