画像の解像度の正しい考え方と最適化のコツ

解像度とは？基本から正しく理解しよう

そもそも「解像度」って何？

解像度とは、画像の細かさ（情報量）を示す数値のことです。
一般的には「dpi（dots per inch）」や「ppi（pixels per inch）」という単位で表されます。

• dpi（ドット・パー・インチ）：印刷の世界で使われる単位。1インチあたりのドットの数。
• ppi（ピクセル・パー・インチ）：ディスプレイやWeb画像で使われる単位。1インチあたりのピクセル数。

つまり、印刷ではdpi、Webではppiを意識すればOKです。
この違いを理解していないと、印刷用の高解像度画像をそのままWebに使ってしまい、ページが重くなるという問題が起きやすくなります。

Webで求められる「適切な解像度」とは

Webでは「解像度」よりも「ピクセル数」が重要

Web上では、解像度（ppi）よりも「画像の縦×横のピクセル数」が重要です。
なぜなら、Webブラウザは画像のピクセルをそのまま画面上に表示するため、dpiを指定しても見た目は変わらないからです。

たとえば、以下の2つの画像を比べてみましょう。

画像	サイズ	解像度	見た目
A	1200×800px	72ppi	○（軽くて表示も速い）
B	1200×800px	300ppi	○（見た目は同じだがデータが重い）

このように、同じピクセルサイズならppiが違ってもWeb上の見た目は同じ。
つまり、Webでは「ppi」ではなく「ピクセルサイズとファイル容量」を最適化することが重要です。

Web画像の最適サイズを決める3つのポイント

1. 表示サイズを基準にする

画像は、Webページ上で実際に表示されるサイズに合わせて調整します。
たとえば、バナー画像が横幅1200pxで表示されるなら、実際の画像も1200px前後にリサイズしておくとベストです。

スマートフォン向けにレスポンシブ対応をする場合は、

• PC用：1200px〜1600px
• スマホ用：600px前後
• サムネイル：400px前後
  といった具合に複数サイズを用意して出し分けるのがおすすめです。

2. 画像フォーマットを使い分ける

画像フォーマットにも得意・不得意があります。用途に合わせて使い分けることで、品質を保ちながら容量を減らせます。

フォーマット	特徴	おすすめ用途
JPEG	写真向き。フルカラーで容量が軽い	バナー、製品画像、スタッフ写真
PNG	透過対応。文字や図版に強い	ロゴ、アイコン、スクリーンショット
WebP	新世代フォーマット。高圧縮＆高画質	全般（対応ブラウザが多い）
SVG	ベクター形式で拡大しても劣化しない	ロゴやアイコン（イラスト）

近年では、WebPが非常に優秀です。
WordPressでも標準対応しているため、サイト全体をWebP化することでページの読み込み速度を大幅に改善できます。

3. ファイルサイズは100KB以内が理想

一般的なWebページでは、1枚あたりの画像を100KB以内に抑えるのが理想的です。
ヒーローヘッダーなどの大きな画像でも200KB以内に収まるように圧縮すると、ユーザー体験が向上します。

実務で役立つ！画像圧縮と最適化のツール紹介

オンラインツール

• TinyPNG / TinyJPG：高品質な圧縮が簡単。ドラッグ＆ドロップでOK。
• Squoosh（Google）：ブラウザ上でWebP変換も可能。比較しながら最適化できる。

Photoshopなどの制作ツール

Photoshopをお使いの場合は、
「Web用に保存（旧形式）」または「書き出し → Web向け」を選ぶことで、
最適な圧縮率をプレビューしながら設定できます。

また、WordPressをご利用の場合は、

• EWWW Image Optimizer
• Smush
  などのプラグインを導入することで、自動的に画像を最適化できます。

画像解像度がSEOに与える影響

実は、画像の解像度や最適化はSEOにも直結しています。
Googleはページの読み込み速度を評価指標にしており、画像が重いサイトは検索順位に悪影響を与える可能性があります。

さらに、

• 画像ファイル名にキーワードを含める（例：web-design-example.jpg）
• alt属性を正しく設定する（例：alt="企業サイトの制作実績"）
  といった基本的なSEO対策も忘れずに行いましょう。

解像度とアクセシビリティの関係

アクセシビリティも重要視する必要があります。
画像が重すぎると、通信環境が悪いユーザーにとってページが開きにくくなり、情報格差につながります。

また、視覚障がい者向けに代替テキスト（alt属性）を適切に設定することで、スクリーンリーダーが内容を読み上げやすくなります。
つまり、画像の最適化は「見た目の問題」だけでなく、誰もが快適に使えるWebサイトを作るための基本でもあります。

まとめ：Web制作では「解像度」よりも「最適化」がカギ

印刷とは異なり、Web制作で重要なのは「高解像度」ではなく「最適化」です。
表示サイズ、フォーマット、圧縮率を適切に調整することで、見た目も速度も両立できます。

最後にポイントをまとめます。

✅ Webではppiより「ピクセルサイズ」と「容量」が重要
✅ 画像フォーマットを使い分ける（JPEG・PNG・WebP・SVG）
✅ ファイルサイズは100KB以内を目安に
✅ SEO・アクセシビリティにも影響するため注意

画像の扱いひとつで、サイトの印象も成果も大きく変わります。
もし「自社サイトが重い」「画像の最適化方法がわからない」とお悩みの方は、ぜひ一度ご相談ください。