はじめに
本稿の目的
本稿は、Webサイトに掲載する画像の「適切なサイズ」をわかりやすく整理することを目的としています。ピクセル数やファイル容量の目安、用途別の推奨サイズ、アスペクト比、ファイル形式の選び方や最適化の基本ルールまで、実践で使える情報を丁寧に解説します。
なぜ重要か
画像は見た目を左右するだけでなく、ページ表示速度や検索順位、訪問者の使い勝手に直結します。適切な画像を用意すると、読み込みが速くなり離脱が減り、結果的に成果につながりやすくなります。
読者の想定と進め方
サイト運営者、デザイナー、制作者、ブログを書く方などを想定しています。初心者の方でも分かるように具体例を交え、章ごとにステップで学べる構成にしています。以降の章で順に詳しく見ていきましょう。
なぜ「画像サイズ」がWebサイトで重要なのか
ページ表示速度に直結します
画像が大きすぎると読み込みに時間がかかります。特にスマホ回線では差が顕著です。表示が遅いと訪問者は待てずに離脱しやすくなります。
SEO（検索順位）への影響
検索エンジンはページの表示速度を評価します。重い画像が多いと評価が下がり、検索順位に悪影響を与えることがあります。
ユーザー体験（UX）とコンバージョン
読み込みが速いサイトは信頼感を生み、滞在時間や購入率が上がります。逆に画像が原因で表示が崩れると離脱や誤操作を招きます。
データ通信量とサーバーコスト
画像サイズが大きいと訪問者のデータ通信量が増えます。訪問者負担になるだけでなく、サーバー転送量も増えホスティング費用が高くなります。
実践ポイント（簡単な例）
- 必要な表示サイズまで縮小する（例：スマホ表示なら幅800px程度など）
- ファイル形式や圧縮を見直す（軽い形式を選ぶ）
- 遅延読み込み（遅延読み込み）で初期表示を軽くする
これらを行うと表示速度やユーザー満足度が着実に改善します。
画像サイズの基本：ピクセル数とファイルサイズ
ピクセル数（幅×高さ）とは
ピクセル数は画像の縦横の点の数です。例：横1920px×縦1080pxはフルHDの大きさです。Webでは実際に表示するサイズに合わせてピクセル数を決めます。大きすぎると読み込みに時間がかかり、細かすぎると画質が悪く見えます。
ファイルサイズ（容量）とは
ファイルサイズはKBやMBで表されるデータの重さです。同じピクセル数でも圧縮方法や色数で容量が変わります。容量が大きいと通信量や表示速度に影響します。
実務での基本ルール
- 表示に必要なピクセル数まで縮小する。例：サムネは300px幅、コンテンツ幅は800〜1200px。
- 適切な形式を選ぶ（写真はJPEG/WebP、ロゴはPNG）。
- 圧縮して容量を下げる。画質と容量のバランスを確認してください。
チェックと手順（簡単）
- 画像編集ソフトやオンラインツールでリサイズ→圧縮→保存。
- ブラウザの開発者ツールで表示サイズと実ファイルサイズを確認。
DPIは印刷向けの指標で、Webでは気にしなくてよいです。
用途別：Webサイトでの「おすすめ画像サイズ（px）」目安
PC向けメインビジュアル
- 標準的な目安：1,920×1,080px前後
- コンテンツ幅が狭い場合：1,200×800px程度でも十分です。画面いっぱいに表示する場合は横幅を広めに取ります。
スマホ向け（縦長表示想定）
- 目安：360×240px程度（縮小表示を考慮）
- フルスクリーン風の画像は縦長に合わせて幅360〜414pxを想定してください。
コンテンツ内画像（記事中、製品説明など）
- 横幅：1,000〜1,200pxが扱いやすいです。閲覧時の拡大や拡張表示に対応できます。
サムネイル・一覧画像
- 目安：300×200px程度（横長が一般的）
- 小さく表示しても識別できるよう、要点が中央に来る構図にします。
ロゴ画像
- PC表示：おおむね400×100px程度
- スマホ表示：160×40px程度
- ベクター（SVG）を使えば拡大縮小に強く、ファイルサイズも抑えられます。
備考：高解像度（Retina）対応
- 2倍のサイズで用意（表示ピクセル×2）するとシャープに見えます。ただしファイル容量に注意してください。
ファイルサイズ（容量）の目安：1枚あたり何KBが良いか
概要
画像1枚あたり200KB以下を目安にすると良いです。ページ全体の総容量はおおむね1.6MB以内が理想で、複数枚の画像を使う場合は1枚を200KB程度に抑えると表示が速くなります。
なぜこの目安か
画像が重いとページ表示が遅くなります。ページ読み込みが遅れると離脱やコンバージョン低下につながります。実際に1秒の遅延でコンバージョン率が下がることもあります。
用途別の目安（1枚あたり）
- ロゴやアイコン：5〜30KB
- サムネイル：20〜50KB
- 記事内の写真：50〜150KB
- ヒーロー画像（大きなヘッダー）：150〜200KB
実践的な対処法
- 画像を適切な解像度にリサイズする
- 圧縮ツールを使って画質を保ちながら容量を減らす
- WebPなど軽いフォーマットを検討する
- レスポンシブ画像（複数サイズを用意）や遅延読み込みを使う
したがって、表示環境に合わせて最適なサイズを用意すると効果的です。
注意点
無理に容量を下げると画像が荒くなります。しかし、見た目と表示速度の両方を確認しながら調整してください。定期的にページ表示速度を測って、画像サイズの見直しを行うと安心です。
アスペクト比（縦横比）の考え方
縦横比とは
縦横比とは画像の幅と高さの比率です。例えば3:2は幅が3に対して高さが2、4:1は幅が4に対して高さが1を意味します。比率を守ると見た目が自然で、レイアウトも崩れにくくなります。
代表的な比率と用途例
- 3:2 — 写真やブログのメイン画像に使いやすい。PCとスマホの両方でバランスが良いです。
- 4:1 — 横長のバナーやロゴに向きます。横に広く見せたいとき便利です。
- 1:1 — 正方形。サムネイルやプロフィール画像によく使われます。
比率を保ってリサイズする方法（実践）
- 比率をロックする機能を使う：画像編集ソフトやオンラインツールで「縦横比を固定」してからサイズを変更します。
- 計算で求める：新しい幅を決めたら、高さ = 幅 ×（元の高さ÷元の幅）で計算します。
- クロップする際は注意：被写体やテキストが切れないよう、余白（セーフゾーン）を残します。
比率を崩すと起きる問題
画像が縦に伸びたり横に潰れたりして不自然になります。テキストが切れて意味が伝わらないこともあります。表示崩れで信頼感を損ねることがあるため、比率は大切です。
実用的なチェックリスト
- 編集時に縦横比をロックしているか確認する
- 表示サイズごとに必要な比率を決めておく
- 重要な要素は中心寄せにしてクロップに備える
比率を守るだけで見栄えが大きく改善します。日常の作業に組み込んでください。
Webサイトで画像を最適化する主なポイント
基本の考え方
画像は必要なピクセル数にリサイズすることが基本です。例えばヘッダーの大きな画像は1200〜1600px、サムネイルは400px程度にして、不要に大きな画像を避けます。
ファイル形式の選び方
- 写真：JPEG（圧縮に強い）
- ロゴ・透過：PNG（線がシャープ）
- 軽量化を優先するならWebP（同画質で小さくなることが多い）
具体例：ロゴはPNG、商品写真はJPEGかWebPに変換します。
画質と圧縮のコツ
画質設定を下げて容量を減らしますが、極端に下げると荒くなります。しかし、目に見える差が出ない範囲で圧縮するのがコツです。1枚あたり200KB以下を目標に調整してください。
表示最適化（レスポンシブ・遅延読み込み）
画面幅に応じた画像を用意し、small/medium/largeなど複数サイズを切り替えると無駄が減ります。遅延読み込み（lazy load）で初期表示を速くできます。したがって読み込みの順番も意識してください。
付加的な最適化
- 不要なExifなどのメタデータを削除
- 画像のキャッシュを有効化
- 圧縮ツール例：Squoosh、TinyPNG、ImageOptim
チェックリスト（簡単）
- 必要なピクセルにリサイズ済みか
- 適切な形式に変換したか
- 200KB以下を目指して圧縮したか
- レスポンシブと遅延読み込みを設定したか
- メタデータを削除しキャッシュを設定したか
上記を順に行えば、表示速度と品質のバランスが良くなります。
