はじめに
目的
本資料は、ホームページで使う画像について、適切なピクセル数やファイル容量、形式、画像SEO、レスポンシブ対応までの基準と目安をわかりやすくまとめたガイドです。実務で迷いやすい点を具体例で示し、実践しやすい形で解説します。
想定読者
・自分でサイトを運営している方
・デザイナーや制作担当者
・画像最適化を学びたい初心者
本章の内容
まずは全体の目的と章構成を説明します。続く章で、ピクセル数の目安、ファイルサイズ管理、形式の使い分け、SEOやレスポンシブ対応の実践ポイントを順に解説します。読み終えると、実際の画像準備にすぐ役立つ知識が身につきます。
ホームページ画像の最適なピクセル数とは？
基本の目安
ホームページで使う画像は表示場所ごとに最適なピクセル数が変わります。一般的な基準をまず示します。
- 全画面（ヒーロー・背景）：1920×1080px（フルHD）を基本にすると見栄えが良いです。
- トップページやバナー：1200×630px、または1200×675pxがSNSやサムネイル表示と相性が良いです。
- 記事内の画像：幅800～1200pxを目安にするとテキストとのバランスが取りやすいです。
- サムネイル・小画像：400～600pxで十分な場合が多いです。
高解像度ディスプレイ対応（Retina等）
スマートフォンや一部タブレットはピクセル密度が高いので、見た目のシャープさを保つために表示サイズの2～3倍のピクセル数で作成します。たとえば画面上で600px表示する場合、1200～1800px幅の画像を用意します。
アスペクト比と構図のポイント
比率（例：16:9、4:3、1:1）を揃えるとレスポンシブ対応やトリミングが楽になります。重要な被写体は中心寄せや余白を持たせておくと切り取られても情報が残ります。
実践的な選び方
用途ごとに複数サイズを用意し、表示環境に応じて切り替えると無駄な読み込みを防げます。軽さと画質の両立を意識して作成してください。
ファイルサイズの目安と表示速度対策
概要
ホームページの画像は見た目と読み込み速度の両方が重要です。ファイルサイズが大きいと表示に時間がかかり、離脱につながります。ここでは実践的な目安と具体的な対策をやさしく説明します。
ファイルサイズの目安
- 汎用の画像：1枚あたり200KB以下を目安にしてください。
- アイキャッチ／ヒーロー画像：150KB以下を目安にすると表示が速くなります。
- 記事内の小さな画像：50〜100KB以下が扱いやすいです。
これらは画質と速度のバランスを取った目安です。画像の用途に応じて柔軟に調整してください。
表示速度を上げる具体策
- 圧縮する：画像は「品質70〜80％」程度でかなり容量を下げられます。ツール（例：Squooshや画像圧縮ソフト）で試してください。
- 近代的な形式を使う：WebPやAVIFは同じ画質で容量が小さくなります。対応ブラウザに応じて使い分けます。
- レスポンシブ画像：srcsetでデバイスに合ったサイズを渡すと不要な大きさを読み込みません。
- 遅延読み込み（Lazy Load）：画面外の画像は表示直前まで読み込まないようにすると初期表示が速くなります。
- CDNとキャッシュ：配信を分散し、ブラウザにキャッシュさせると再訪問時に速く表示できます。
実践チェックリスト（簡単）
- 画像をアップする前に圧縮する
- アイキャッチは150KB以下を目指す
- srcsetや遅延読み込みを導入する
- WebP/AVIFを検討しつつフォールバックも用意する
これらを順に試すと、見た目を保ちながら表示速度を大きく改善できます。
ファイル形式の選び方
写真画像：JPEGが基本、可能ならWebP/AVIF
写真は色数が多く連続するため、JPEGが適しています。画質を保ちつつ容量を抑えやすいです。さらに圧縮効率の高いWebPやAVIFを使えば、同じ画質でファイルサイズをより小さくできます。対応ブラウザがある場合は優先的に使い、未対応環境にはJPEGを用意します。
イラスト・ロゴ：PNGかSVG
線や文字が多い画像はPNGかSVGが適します。PNGはビットマップで透過に強く、ロゴやボタンに向きます。SVGはベクター形式なので拡大しても劣化しません。特にロゴやアイコンはSVGを推奨します。
透過・アニメーションの扱い
透過はPNGまたはWebPが得意です。アニメーションは従来GIFを使いますが、色数の制限があります。アニメーションで品質を重視するならAPNGやアニメーションWebPが候補です。
モダン形式の活用とフォールバック
WebPやAVIFは画質を保ちながら容量を減らせるため、可能な限り利用します。対応しないブラウザ向けにJPEG/PNGの代替を用意してください。HTMLのpicture要素やsrcsetで切り替えると実装が簡単です。
実践的な設定例（目安）
- 写真：JPEG（品質70〜80）またはWebP/AVIF
- ロゴ：SVG（可能なら）／透過が必要ならPNG
- アニメーション：アニメーションWebPやAPNG
用途に合わせて形式を選び、ページ表示速度と見た目の両方を満たすように調整してください。
画像SEOとレスポンシブ対応
alt属性は検索とアクセシビリティに直結します
alt属性には画像の内容を簡潔に書きます。例：「白いコーヒーカップと蒸気」など具体的に。装飾のみで意味がない場合は空に（alt=””）してスクリーンリーダーの邪魔を避けます。
ファイル名とキャプション
ファイル名は英数字とハイフンで説明的に付けます（例：white-coffee-cup.jpg）。キャプションは読者向けの補足になり、SEOにも好影響です。
レスポンシブ画像（srcset と sizes）
srcsetとsizesを使うと、端末ごとに適した画像が配信されます。例：
<img src="small.jpg" srcset="small.jpg 480w, medium.jpg 800w, large.jpg 1200w" sizes="(max-width:600px) 480px, 800px" alt="白いコーヒーカップ">
これでスマホは小さい画像、PCは大きい画像を自動で選びます。
ローディングとパフォーマンス
loading=”lazy”を使うと画面外の画像を後で読み込み、表示速度が向上します。CDNを併用すると配信も速くなります。
適切な画像サイズを選ぶ際の注意点
小さすぎる画像は避ける
表示サイズより小さい画像を拡大すると、画像がぼやけて画質が低下します。商品写真やロゴは特に目立つため、表示するピクセル数以上の解像度を用意してください。具体例：横表示が800pxの領域には、少なくとも800px以上の幅を用意します。
大きすぎる画像の弊害
過度に大きな画像はファイル容量を増やし、ページ表示を遅くします。モバイルでは通信量を圧迫するため、必要以上に大きな画像は避けます。CMSやブラウザの自動縮小に頼らず、適切なサイズでアップロードすると負荷を減らせます。
Retina（高解像度）対応の実務
Retinaや高解像度ディスプレイではピクセル密度が高いため、表示サイズの約2倍のピクセル数で作ると綺麗に見えます。例：表示幅が600pxなら、幅1200pxの画像を用意し、HTMLで表示は600pxに設定します。srcsetやpictureで1x/2xを切り替えると効率的です。
実用チェックリスト
- 表示サイズを基準に作る（必要なら2倍で保存）
- ファイル形式と圧縮で容量を抑える（WebPや適切なJPEG圧縮）
- レスポンシブ用に複数サイズを用意しsrcsetで配信
- アイコンやロゴは可能ならSVGを使用
- 最終チェックは実機で表示速度と見え方を確認
これらを基準にすると、見た目と速度のバランスを保てます。
まとめ：ホームページ画像サイズの実践ポイント
ホームページで使う画像は「見た目の美しさ」と「表示速度」の両方を意識して選びます。以下の実践ポイントを守れば、見やすく速いページを作れます。
- 画像の基本サイズ
- 大きな表示（ヘッダーやフル幅）：1920×1080px または 1200×630px を基準にします。
-
記事内画像：幅800〜1200px を目安にします。
-
ファイル容量と圧縮
- 1枚あたり200KB以下を目安にし、可能なら100KB台を目指します。
-
必ず画像を圧縮してからアップロードします。画質と容量のバランスを確認してください。
-
ファイル形式の使い分け
- 写真：JPEG（品質調整で容量削減）
- イラストやロゴ：PNG または SVG（背景透明や拡大に強い）
-
圧縮重視：WebP や AVIF を検討します（ブラウザ対応を確認）。
-
SEO とアクセシビリティ
-
alt属性は簡潔で内容を説明する文にします。ファイル名も意味ある英単語でハイフン区切りにします。
-
レスポンシブ対応
-
srcset/sizes や picture要素で複数サイズを用意します。lazy loading を使って表示速度を向上させます。
-
運用のコツ
- 元ファイルは高解像度で保存し、必要に応じて最適化済みファイルを配布します。
- 実際にスマホやタブレットで見え方と読み込み速度を必ず確認してください。
これらを守れば、多様なデバイスで見栄えよく、表示の速いサイトを維持できます。丁寧に最適化していきましょう。
