画像サイズ完全ガイド！
用途別の目安・形式の選び方

画像のサイズを意識せずに運用を続けると、ページが重くなる・スマホで画質が荒く見える・SEO評価が下がるなど、じわじわとサイトの質に影響が出てきます。

今回は、ホームページで使う画像のサイズについて「なぜ重要か」「用途別の目安」「形式の選び方」「alt属性とファイル名」「LCP対策」「公開前チェックリスト」まで、制作の現場目線でまとめました。

画像サイズを意識すべき3つの理由

① ページの表示速度に直結する

ホームページのデータ容量のうち、大部分を占めるのが画像ファイルです。
大きなサイズの画像をそのままアップしていると読み込みに時間がかかり、「重い（表示が遅い）」と感じたユーザーはそのまま離脱してしまいます。
スマートフォンでの閲覧では特に影響が顕著です。

② SEOの評価にも影響する

Googleはページの表示速度を検索順位の評価基準のひとつとして位置づけています。
モバイルファーストインデックスが採用されている現在、スマートフォンでの表示速度は特に重視されています。
画像の最適化は、ユーザーのためだけでなく検索エンジンからの評価を守るための対策でもあります。

③ ユーザーの印象と信頼につながる

表示が速く、画像がきれいに見えるサイトは「しっかりしている」という印象をユーザーに与えます。逆に画像が荒かったりレイアウトが崩れていたりすると、コンテンツの内容以前に信頼感が下がることがあります。

まず押さえておきたい3つの基準

「画像サイズ」という言葉には、実は3つの異なる概念が含まれています。それぞれの意味を整理しておきましょう。

① ファイル容量（KB・MB）

画像データの「重さ」を表します。ホームページで使う画像1枚あたり、できれば200KB以下が目安です。
メインビジュアルのような大きな画像でも500KB以下に抑えるのが理想です。圧縮しすぎると画質が落ちるので、見た目とのバランスを取りながら調整します。

② ピクセル数（px）

画像の「寸法」を表します。表示したいエリアの幅に合わせたサイズで作るのが基本で、必要以上に大きなピクセル数の画像はファイル容量を無駄に増やすだけになります。

③ 解像度（dpi）

「1インチあたりのドット数」で、画像の密度を表します。印刷物では300dpi前後が必要ですが、Webで表示する画像は72dpiが標準です。72dpi以上に設定してもブラウザ上での見た目は変わらず、ファイル容量だけが増えます。
画像を書き出す際は72dpiに設定しておきましょう。

スマホで画像がぼやける原因と「2倍サイズ」の考え方

スマートフォンやMacBook系のRetinaディスプレイでは、表示上のピクセル（CSSピクセル）に対して、実際の物理ピクセルが2倍以上割り当てられています。

たとえば横幅600pxで表示される画像エリアに対して、600pxの画像を用意しただけでは、Retinaディスプレイ上では「300px相当」の情報密度で表示されることになります。これが「ぼやけて見える」原因です。

スマホでの見た目を重視するなら、表示幅の2倍サイズの画像を用意するのが基本です。ただし容量が増えすぎないよう、WebP形式への変換も合わせて検討しましょう。

用途別：推奨サイズ・容量の目安

Retina対応（表示幅の2倍基準）を踏まえた、用途別の推奨サイズをまとめました。

画像ファイル形式の選び方

どのファイル形式を使うかも、ホームページの品質に関わります。主な形式の使い分けを整理しておきましょう。

JPEG：写真・グラデーションのある画像に

写真や色数の多い画像に適した形式です。圧縮率が高くファイルを軽くしやすい反面、繰り返し保存すると画質が劣化します。背景透過には対応していないため、ロゴや切り抜き画像には使えません。

PNG：ロゴ・イラスト・透過が必要な画像に

背景を透明にできるのが最大の特徴です。繰り返し保存しても画質が劣化しませんが、写真などの色数が多い画像ではJPEGよりファイルが重くなります。

WebP：軽さと画質を両立したい場面に

Googleが開発した形式で、JPEGやPNGと比べてファイルが軽く、画質も維持できます。背景透過にも対応しており、主要なブラウザでも表示できます。表示速度の改善を重視するなら積極的に採用したい形式です。

SVG：ロゴ・アイコンのベクター画像に

拡大・縮小しても画質が劣化しないベクター形式です。ファイルサイズも非常に軽く、どんな画面サイズでもきれいに表示されます。写真などの複雑な画像には使えません。

alt属性とファイル名：SEOに地味に効く設定

alt属性は「説明文」を書く

alt属性は、画像が表示されなかった場合に代わりに表示されるテキストです。
Googleのクローラーは画像の見た目を直接理解できないため、alt属性の記述を手がかりに「この画像が何を表しているか」を判断します。
適切に設定することでSEOにもプラスに働きます。

用途別の書き方の目安はこのとおりです。

• 写真：「何が写っているか」＋「サイトでの文脈」を書く。（例：「高崎市の店舗外観写真」）
• 図解・イラスト：「何を説明している図か」を簡潔に書く。（例：「SEO対策の流れを示した図解」）
• ロゴ：社名＋ロゴ。（例：「株式会社〇〇のロゴ」）
• 装飾のみの画像：alt属性を空欄にしてクローラーに無視させる。

よくあるNGとしては、「image01.jpg」のようなファイル名をそのまま入れる・すべての画像に同じテキストを使い回す・キーワードを詰め込みすぎた不自然な文章にする、の3点が挙げられます。

ファイル名も「内容がわかる名前」にしておく

画像のファイル名もSEOに影響します。「DSC_0042.jpg」のようなファイル名より、「takasaki-salon-exterior.jpg」のように内容を表す英字で命名しておくことで、Google画像検索での表示機会が増えることもあります。

日本語のファイル名はURLエンコードで文字化けすることがあるため、英字小文字＋ハイフンで繋いだ命名が安心です。

LCPを意識した画像の読み込み制御

LCP（Largest Contentful Paint）は、Googleが定める表示速度の評価指標のひとつです。ページを開いてから、一番大きなコンテンツ（多くの場合メインビジュアルやアイキャッチ）が表示されるまでの時間を測ります。LCPが遅いと検索評価が下がるだけでなく、ユーザーが「重い」と感じる原因にもなります。

① ファーストビューの画像にlazy-loadを設定しない

lazy-load（遅延読み込み）は、スクロールして見えてきたときに画像を読み込む仕組みで、ページ速度の改善に有効です。ただし、最初から画面に表示されているメインビジュアルにこれを設定してしまうと、かえって表示が遅くなります。ファーストビューの画像には設定しないのが鉄則です。

② width・height属性を明示する

HTMLで画像の幅と高さを指定しておくことで、読み込み前からブラウザがレイアウトを確保できます。画像が読み込まれる際にページがガクッとずれる「レイアウトシフト（CLS）」を防ぐことができます。

③ WebP形式への変換を検討する

ファーストビューの重い画像をWebPに変換するだけで、LCPの数値が改善されるケースがあります。古いブラウザへの配慮が必要な場合は、JPEGとの併用で対応することも可能です。

公開前・更新前に確認したい画像チェックリスト

サイト公開やブログ記事の更新前に、以下の5項目を確認する習慣をつけると、画像まわりのミスがぐっと減ります。

1. サイズ（px）：表示幅に対して過剰に大きな解像度になっていないか。
2. 容量（KB）：できれば100〜200KB以下に圧縮されているか。
3. alt属性：主要な画像に、内容がわかる説明文が入っているか。
4. ファイル名：内容を推測できる英字の名前になっているか。
5. ファイル形式：写真はJPEGまたはWebP、透過が必要なものはPNGになっているか。

記事を投稿する担当者が確認できるよう、この5項目を社内のマニュアルやチェックシートにまとめておくのがおすすめです。

まとめ

ホームページの画像サイズ管理は、見た目・表示速度・SEO・ユーザーの信頼感、すべてに影響する地味ながら重要な要素です。

今回お伝えしたポイントを改めて整理すると、次のとおりです。

• ファイル容量は200KB以下、メインビジュアルは500KB以下を目安にする
• スマホでのぼやけを防ぐため、表示幅の2倍サイズで作成する
• 用途ごとに推奨サイズが異なる。一覧表を参考に作り分ける
• 写真はJPEG・透過はPNG・軽さと画質のバランスはWebP
• alt属性には「画像の内容がわかる説明文」を書く
• ファイル名は英字で内容がわかる命名にする
• メインビジュアルにはlazy-loadを設定しない（LCP対策）
• 公開前の5項目チェックリストを運用に組み込む

「撮ってそのままアップ」の運用から一歩進んで、サイズと形式を意識した管理に変えるだけで、ホームページの印象と速度はぐっと改善されます。