ホームページを作るとき、photo-size「写真のサイズってどのくらいがいいの？」と迷ったことはありませんか？
サイズが合っていないと、画像がぼやけたり、逆に大きすぎてページが重くなったりします。
この記事では、ホームページで使う写真の最適なサイズと確認方法を初心者向けにわかりやすく解説します。
背景に使う写真・バナー用画像・商品紹介写真など、用途別に「ちょうどいいサイズ」を紹介するので、この記事を読めばすぐに実践できます。
写真サイズを決める前に知っておきたい基本 photo-size
なぜ写真サイズが重要なのか
写真サイズは、デザインの美しさ・読み込み速度・SEOすべてに影響します。
サイズが大きすぎるとページが重くなり、表示が遅くなる原因に。逆に小さすぎると、ぼやけて印象が悪くなります。
図1：大きすぎる画像と最適サイズ画像の比較
・こちらは大きすぎる画像です。↓幅400px 高さ2000px 9.1MB 拡張子PNG
・こちらは最適サイズ画像です。↓幅1920px 高さ1080px 129KB 拡張子JPG
1. 見た目は同じでも「重さ」が全く違う
同じ画像に見えます。しかし、見た目ではほとんど同じでも、実際のデータ量（ファイルサイズ）は大きく異なります。
- 大きすぎる画像：4000×2800px（約9.3MB）拡張子PNG
- 最適サイズ画像：1920×1080px（約129KB）拡張子JPG
実はこの差、約70倍も違います。
同じ1枚の画像でも、ページの読み込みスピードに大きな影響を与えます。
| 比較項目 | 大きすぎる画像 | 最適サイズ画像 |
|---|---|---|
| 解像度 | 4000×2800px | 1920×1080px |
| 拡張子 | PNG | JPG（またはWebP） |
| ファイルサイズ | 約9.3MB | 約129KB |
| 見た目 | ほぼ同じ | ほぼ同じ |
| ページ読み込み速度 | 遅い | 速い |
画像が大きすぎると、スマホでページを開くときに数秒間真っ白な画面が続くことがあります。
一方、最適サイズの画像ならほぼ一瞬で表示されるため、ユーザーはストレスなくページを見られます。
2. 実際の見た目は変わらないのに9MBも違う理由
PNGは、画像のすべてのピクセル情報を「無圧縮」に近い形で保持するため、細部まできれいですが容量が大きくなります。
一方、JPGやWebPは「人間の目にほとんどわからない部分を軽く圧縮」しているため、見た目を保ちながら容量を1/70以下にできます。
ホームページの背景全面に使う写真のサイズ
フルスクリーン背景のおすすめサイズ
1920×1080pxの背景写真が画面いっぱいに表示された例↓
背景を画面いっぱいに広げたい場合は、**1920×1080px（フルHD）〜2560×1440px（WQHD）**がおすすめ。
高解像度ディスプレイにも対応しやすく、どんなモニターでもきれいに見えます。
バナー画像に使うときのサイズ目安
トップページのメインビジュアルやスライダーには、1200×400px〜1600×500pxが最適です。
横幅を広くして、文字やボタンが見やすいように余白を取りましょう。
こちらは1600×500pxの画像です↓
サイドバナー・キャンペーン用のサイズ
| 用途 | 推奨サイズ（px） |
|---|---|
| サイドバナー | 300×250 |
| ヘッダーバナー | 728×90 |
| スクエア広告 | 600×600 |
商品を紹介する写真の最適サイズ
商品の見栄えを重視するなら、800×800px（正方形）が基本。
横長のデザインなら1200×800pxもおすすめです。
ECサイトでは、画像の統一感が信頼感につながります。
まとめ｜正しいサイズ設定で見やすく美しいホームページに
ホームページの印象は、使う写真のサイズで大きく変わります。
背景には1920px以上の大きな写真、バナーは1200×400px前後、商品画像は800×800pxが目安。
正しいサイズで軽量化すれば、デザインもSEOも強化できます。
関連記事👉【HTML入門】初心者でもできる！写真フォルダ（images）の作り方と正しい保存場所を解説
WebP形式などの画像最適化フォーマットを公式に解説👉Google Developers：画像フォーマットガイド
コメント