ホームページに最適な画像サイズと形式の選び方

2025-06-232025-07-02

ホームページを作るときに、写真やイラストなどの画像サイズや、ファイル形式を気にしたことはありますか？
使う画像をうまく選ばないと、画像が重くなってページが遅くなって、見ている人がすぐにページを閉じてしまうことがあります。また、画像が小さすぎると、画質があらくなり、見映えも悪くなってしまいます。

今回は、ホームページに載せる画像の「サイズ」や「形式」について、どうやって選べば良いかをお教えしますね。

画像サイズの選び方

画像をインターネットに載せるときは、その画像の「サイズ」を決める必要があります。
画像が大きすぎるとページの表示が遅くなり、SEO（検索エンジンからの評価）にも悪影響を与える可能性があります。そのため、画像サイズはできるだけ小さくしつつ、画質を保つことが重要です。

トップページののメインビジュアルや、画面いっぱいに表示させる大きな画像はきれいな画質で表示させたいですよね。ただ、ファイルサイズが大きすぎるとページの読み込みが遅くなります。200~500KBにおさめることで、きれいに見えるけど、ページも速く表示されます。

この範囲のサイズであれば、JPEG形式で保存した場合、200KB ～ 500KBの範囲に収まることが多いです。

画像が写真の場合（色の多い画像やグラデーションが多い）
- 高解像度だとサイズは大きくなりやすいので、1200px × 600pxや1600px × 800pxなどが目安。
- 圧縮をうまく行えば、500KB以下で収められます。
画像がグラフィックデザインやロゴの場合（色数が少ない、シンプルなデザイン）
- 1200px × 300pxや1600px × 400pxだとサイズもおさまりやすいです。

記事内の画像はコンテンツの幅にあわせておさまります。SWELLテーマをりようしていると、デフォルトで横幅は最大1200pxなので、フルサイズの画像は1200pxまでの幅で表示されます。

推奨ファイルサイズ：100KB〜300KB
画像サイズの目安：
- 1200px x 675px（横長の画像：16:9のアスペクト比）
- 1200px x 900px（正方形に近い画像：4:3のアスペクト比）
- 800px x 600px（小さめの画像）

サムネイルは、記事一覧などに表示される見出し画像のことです。

推奨ファイルサイズ: 100KB〜200KB。
画像サイズの目安：横幅1200px × 縦幅630px
- 上記はSWELLテーマで使用するアイキャッチ画像の推奨サイズです。（アスペクト比は1.91:1）。このサイズだと、SNSでのシェア時やOGP画像としても適切に表示されるため、統一して使用することをおすすめします。

画像にはいろいろな形式（フォーマット）があります。
適切なファイル形式を選ぶことで、きれいな画質のままファイルサイズを小さくできます。。

JPEG（ジェイペグ）：
写真や風景の画像など、色の数が多い画像ににぴったりの形式です。
高画質のまま、しかもファイルが小さくなります。

PNG（ピング）：
PNGは、背景を透明にしたい画像や色の数が少ない画像に最適です。
例えば、ロゴやアイコン（小さな画像）の場合は、PNGを使うときれいに表示されます。
色がたくさんある画像には、サイズが大きくなってしまうことがあります。

WebP（ウェッピー）：
WebPは、JPEGよりもさらに小さなファイルで、高画質を保つことができる新しい形式です。
もし、WebPが使えるなら、これを使うとページの表示が速くなります。

GIF（ギフ）：
GIFは、動く画像に使います。アニメーションを作りたいときにぴったりです。逆に、静止画にはあまり向いていません。

画像を小さくする方法の一つに、「圧縮」があります。
圧縮すると、画像のサイズが小さくなり、ページの表示が速くなります。画像を圧縮するための便利なツールを紹介します。

TinyPNG：
TinyPNGは、画像を圧縮してくれるオンラインのツールです。
URLにアクセスして画像をアップロードするだけで、簡単に圧縮した画像に変換してくれます。
ImageOptim：
これは、Macを使っている人におすすめのツールです。
ソフトを開いて、画像をきれいに圧縮してくれます。複数の画像を一括でも圧縮できます。
EWWW Image Optimizer：
WordPressを使っている場合、このプラグインを使えば、WordPressにアップロードした画像を自動で圧縮してくれます。

SEO（検索エンジン最適化）とは、Googleなどで自分のページを上に表示させるための工夫のことです。
画像にもSEOが関係していて、画像のサイズを最適化することで、検索順位が上がることがあります。

Altテキスト（代替テキスト）：
Altテキストは、画像が表示されない場合に、その画像が何を表しているかを説明する文章です。例えば、「黄色い花の写真」や「猫のロゴ」などを入れておきましょう。これもSEOにはとても大切です。

画像のファイル名：
画像の名前は、「yellow-flower.jpg」や「cat-logo.png」のように、画像が何かを説明する名前をつけましょう。これで、Googleが画像を理解しやすくなります。

用途	推奨サイズ (px)	推奨ファイル形式	推奨ファイルサイズ
トップページ・バナー画像	1200px × 630px (横長)	JPEG, WebP	200KB ～ 500KB
記事内画像	1200px × 675px（横長）または800px × 600px（正方形）	JPEG, WebP, PNG	100KB ～ 300KB
サムネイル画像	150px × 150px（正方形）	JPEG, PNG	50KB ～ 150KB
アイキャッチ画像	1200px × 630px (横長)	JPEG, WebP	200KB ～ 500KB
OGP画像	1200px × 630px (横長)	JPEG, WebP	200KB ～ 500KB
ロゴ・アイコン	100px × 100px（正方形）	PNG, SVG	20KB ～ 100KB