悩む人ブログで使う画像の適切なサイズや容量を知りたい！
ブログで使う画像の適切なサイズや容量、結局どれが正解なのか迷いませんか？
ブログを運営していると、サイトロゴやアイコン、アイキャッチ画像や記事内の挿入画像など、さまざまな画像が必要になります。
でも、いざ準備しようとすると壁にぶつかることがあります。
- テーマによって異なる推奨サイズ
- アスペクト比は16:9？それとも1.91:1？
- 目安でよく見かける「200KB以内」はWebP変換前？それとも変換後？
この記事では、そうした疑問をひとつひとつ整理しながら、画像の基本から、サイズ・容量の目安・WebPでの軽量化についてまで解説します。
- ブログを始める前に準備しておくべき必須画像リスト
- ブログに最適な画像サイズと容量の目安
- サイト表示スピードを落とさない画像の軽量化とWebP化の手順
画像のファイル形式・拡張子の種類と選び方
ブログでよく使われる画像のファイル形式は、主に以下の４つです。
| 形式 | 特徴 |
|---|---|
| JPEG（.jpg） | 写真やグラデーションなど、色数が多い画像に最適 |
| PNG（.png） | イラストや図、背景透過が必要なロゴ・アイコン向き |
| SVG（.svg） | 拡大・縮小しても画質が劣化せず、ロゴやシンプルな線画に最適 |
| WebP（.webp） | JPEGやPNGよりも軽量できる新しい形式（プラグインやツールで変換可能） |
画像は用途に合わせてJPEG・PNG・SVGで作成し、ウェブツールやWordPressにアップロードしたあとにプラグインを使ってWebPに変換する流れが一般的です。
なつPJPEGは“ジェイペグ”、PNGは“ピング”、WebPは“ウェッピー”といいます。
JPEGとPNGの選び方｜イラストと写真
ここでは、JPEGとPNGの使い分けについて見ていきます。
どういった画像をJPEGにすればいいのか、PNGにすればいいのか、その判断の参考にしていただけると嬉しいです。
ここでは同じサイズ（1000 × 1000px）の画像を使って、イラストと写真それぞれJPEG/PNGで比較してみます。
- を比較
-
イラストの場合、同じサイズでもPNGのほうが容量を抑えられる傾向があります。
イラストでもグラデーションなど色味が多い場合はJPEGのほうが軽くなる場合もあります。
- を比較
-
写真の場合、同じサイズでもJPEGのほうが軽くなる傾向があります。
このように、画像の容量が大きいとサイト全体が重くなり、表示速度の低下につながります。
そのため、画像の種類に応じて最適な形式を選び、適切な容量に調整する必要があります。
イラストは「PNG」、写真やグラデーションなどの色が多い場合は「JPEG」を使うことが多いです。
各画像パーツの推奨サイズのまとめ
ブログでよく使う画像の推奨サイズと容量をまとめました。
| 推奨アスペクト比 | 推奨サイズ（px） | 目安容量 | 推奨フォーマット | |
|---|---|---|---|---|
| ヘッダーロゴ | 比率自由 | 1000～1600 × 180～360 | ～50KB | PNG / SVG *背景透過推奨 |
| アイコン | 1:1 | 512 × 512 1024 × 1024 | ～50KB | JPEG / PNG |
| ファビコン | 1:1 | 512 × 512 | ～10KB | PNG / SVG |
| OGP画像 | 16:9 または1.91:1 | 1200 × 630～675 | 〜200KB | JPEG |
| ふきだし | 1:1 | 180〜240 × 180〜240 | 〜30KB | JPEG / PNG |
| メインビジュアル （MV） | 比率自由 | 1600 × 360～900 | 80〜250KB | JPEG |
| アイキャッチ | 16:9 または1.91:1 | 1200 × 630～675 | 60〜200KB | JPEG / PNG |
| 記事内挿入図 | 比率自由 | 800～1200 × 可変 *縦は内容に応じて調整 | 60〜200KB | JPEG / PNG |
あくまで目安として参考にしてください。
画像は「200KB以内（*JPGやPNGを前提）」を目安にできるだけ容量を抑えつつ、ぼやけないように調整することが大切です。
なつP実際には、最終的に表示される画像をWebP化することで、100KB以下に収まるケースも多くあります。
WebP化については、「WebP（ウェッピー）にするには」を参考にしてください。
各パーツの詳細説明
ここでは各パーツの設定を細かく説明していきます。
ヘッダーロゴ画像
軽量で、かつ高精細ディスプレイでもぼやけないサイズが理想です。
推奨サイズは、WordPressテーマによって異なります。
たとえばテーマがSWELLの場合、公式サイトが1600 × 360pxで作成されているため同じサイズで作成する方も多いようです。
このサイトでは PNG形式・1600 × 360px・容量29KBで作成していますが、このあとWebP化することで9KBくらいになっています。
アイコン画像
512〜1024 × 512〜1024pxの正方形（1：1）で作成します。
写真や色数が多い場合はJPEG、イラストならPNGがおすすめです。
ココナラやクラウドワークスなどで外注する場合は、このサイズで依頼しましょう。
ファビコン(サイトアイコン）
ファビコンはブラウザやブックマークに表示されるアイコンです。
以前は、ICO（.ico）という拡張子で作成していましたが、現在のWordPressは515 × 512px以上の正方形画像をアップロードするだけで自動でファビコンを生成してくれます。
OGP画像
OGP画像とは、記事をSNSでシェアしたときに表示されるサムネイル画像のことです。
主にX（旧Twitter）やFacebookなどで表示され、クリック率にも影響する重要な要素です。
OGP画像のアスペクト比は、「16:9」または「1.91:1」がよく使われますが、どちらで作成すべきか迷う方も多いと思います。
OPG画像について
- Google推奨は、幅1200px以上・アスペクト比16：9
- SNSでの表示アスペクト比は1.91：1で表示されることが多い
このサイトでは、アイキャッチと同じサイズ・同じ方法で作成しています。
アイキャッチ画像の項目で解説しているので参考にしてみてください。
ふきだし画像
テーマによって推奨サイズは多少異なりますが、目安として200 × 200px前後で作るとよいと扱いやすいです。
一般的に、イラストはPNG、写真はJPEGのほうが軽くなる傾向があります。
ただし画像によって異なるため、一度両方の形式で書き出し、容量を比較してから選ぶのがおすすめです。
なお、このサイトではSWELLを使用しており、ふきだし画像は80 × 80pxで表示されます。
80 × 80pxより小さいサイズで作成すると、画像が粗くなったり伸びたりする原因になるため、必ず表示サイズ以上で作成しましょう。
なつPふきだしです
メインビジュアル（MV）
メインビジュアルは、サイトを訪れた人が最初に目にする「ブログの顔」となる部分です。
メインビジュアルがあることで「何のサイトか・誰に向けたサイトなのか」を一瞬で伝えられ、信頼感の向上や離脱防止など、さまざまなメリットがあります。
アスペクト比や高さは好みによって調整できますが、サイトによって異なるため、明確な正解はありません。
また、スマートフォン用に表示される画像も準備する必要があります。
このあたり調整がいちばんむずかしいと感じます。
サイトの世界観も伝えつつ、すぐに記事を読めるように高さを抑えるなど、バランスを考えて設計しましょう。
- 一目でコンセプトが伝わる構成にする
- 文字は見やすさを最優先にする
- スマホとPCの両方で確認する
- 余白とバランスを意識する
アイキャッチ画像
幅1200px以上が推奨されているので、1200px以上で作成しましょう。
アスペクト比は1.91：1を推奨しているサイトも多いですが、16：9でも問題はありません。
個人的に16：9の比率が好きなので、以下の方法でこのアスペクト比で作成しています。
- まず1200 × 675px（16：9）で作成
- 重要な文字やロゴは1100 × 600px（赤枠内）の範囲に収まるように配置
- 重要ではないイラストや装飾は枠にかかってもOK
この赤枠の中を「セーフエリア」として設定しておくことで、SNSでトリミングされた場合でも大事な情報が欠けることなくきれいに表示されます。
記事内挿入図
テーマやサイドバーの設定によってコンテンツ幅は多少変わりますが、汎用的に使うなら横幅800〜1200pxで作成するのがおすすめです。
縦の長さ（高さ）は図解によって異なるため、用途の応じて柔軟に調整して問題ありません。
ただし、容量が大きすぎると表示速度に影響するため、200KB以下を目安に作成しましょう。
デバイスの変化によりコンテンツ幅は「やや広め」が主流になってきています。
そのため、このサイトでは記事内の挿入図も横幅1200pxで作成しています。
WebP（ウェッピー）にするには
Googleが開発した「高画質かつ軽量」な画像形式です。
JPEGやPNGと比べて画質を保ったままファイルサイズを小さくできるため、サイトの表示速度改善に効果的です。
WebPへの変換方法は、主に以下の２つがあります。
- 専用のプラグイン
- SquooshやTinyPNGなどのウェブツール
画像によっては、容量を25〜40%ほど軽くできる場合もあります。
WebP化におすすめのプラグイン
プラグインを使用メリットは、なんといっても画像を自動でWebPに変換できる点です。
主なプラグインには、以下のようなものがあります。
- EWWW Image Optimizer
- Converter for Media
- WP-Optimize
- EWWW Image Optimizer
-
定番の画像圧縮・最適化プラグインです。
初期設定はやや難しめですが、画像全般を最適化したい方に向いています。メタデータの削除、自動WebP化など無料版でも十分使えるため、私自身も現在はこちらをメインで使用しています。
- Converter for Media
-
WebP変換に特化したシンプルなプラグインです。WebPへの変換がメインの場合はこちらがおすすめ。
設定が簡単で初心者でも扱いやすいのが特徴です。
- WP-Optimize
-
キャッシュクリアなどサイト全体の最適化を目的としたプラグインで、画像のWebP変換機能も備えています。
ただし画像専用ではないため、WebP目的であれば他のプラグインの方が使いやすい場合があります。
なつP個人的には、メタデータ（ファイルに記録され撮影場所・撮影時間・使用機種など）を削除してくれるEWWW Image Optimizerがセキュリティ的にも好みです。
WebP化におすすめのウェブツール
ウェブツールを使用するメリットは、サーバーに負担をかけずに、画質を目で確認しながらWebPに変換できる点です。
その一方で、WordPressにアップロードする前に、手動で変換する必要があります。
主なツールには、以下のようなものがあります。
- Squoosh
-
無料で使えるウェブツール。
操作もシンプルで、左右のスライダーを使って画質を確認しながら細かく調整できます。ただし、1枚ずつの作業になるため画像が多い場合は時間がかかります。
- TinyPNG
-
画像圧縮の定番ツールです。
無料版はアップロード枚数や容量に制限がありますが、複数の画像をまとめて処理できるのが特徴です。
時間短縮を重視してプラグインでWebPへの変換を自動化するか、1つずつ丁寧に調整してWebPに変換した画像をアップロードするか、自分のスタイルに合わせて選択してみましょう。
まとめ
この記事では、WordPressブログに最適な画像サイズと容量についてまとめました。
基本的なポイントを押さえておけば、推奨サイズはテーマや好みによって多少異なっても問題ありません。
最後に、大切なポイントをおさらいしておきます。
- OGP画像やアイキャッチは幅1200px以上で作成する（Google Discover推奨）
- 表示速度に配慮し、容量はできるだけ軽くする（SEO対策）
- 記事内の画像はなるべく200KB以内で作成する（SEO対策）
- 表示サイズよりやや大きめで作成する（UX向上)
- 最後にWebPでさらに軽量化する（SEO対策）
これらを押さえておけば、基本的には問題ありません。
私自身、以前はAdobe IllustratorやPhotoshopを使って画像を作成していましたが、作業に時間がかかるため、現在はCanvaを使って画像を作成しています。
Canvaは、キャンバスサイズや画像形式を簡単に設定できるためとても便利です。
無料から使えるので、ぜひ一度試してみてください。
