ブログ画像が整う！推奨サイズ・拡張子・ファイル名の基本ルール

ブログを続けていると、こんな小さなストレスが積み重なっていませんか？

• 「せっかく作ったアイキャッチが切れちゃう……」
• 「スマホで見ると画像が暗い気がする」
• 「画像のサイズ、結局どれが正解なの？」
• 「昔アップした画像がどこにあるか分からない！」

実は、WordPressテーマ（CocoonやSWELL）には「相性の良い画像サイズ」があり、そこを押さえるだけでブログの見た目は一気に整います。

この記事では、初心者さんがつまずきやすい「推奨画像サイズ」と、画像が増えても困らない「ファイル管理の基本」をまとめて解説します。

1. テーマ別！推奨画像サイズ（Cocoon / SWELL）

テーマによって最適なサイズは異なります。自分の使っているテーマに合わせて選びましょう。

Cocoon（コクーン）の場合

Cocoonは「横長の画像」と非常に相性が良いテーマです。

• アイキャッチ画像（記事メイン）
  • 横1280px × 縦720px
  • YouTubeのサムネイルと同じ比率（16:9）で、Cocoonのデザインに一番なじみます。
• OGP（SNS共有用）
  • 横1200px × 縦630px
  • X（Twitter）やFacebookできれいに表示されるサイズです。
• 吹き出しアイコン
  • 150〜200pxの正方形
  • 丸く切り抜かれるため、背景透過PNGでやや大きめに作ると綺麗です。

「SNSシェア重視なら」
アイキャッチをOGPサイズ（1200×630）で統一するのもおすすめ。
そのため、SWELLを使っていても
「1200×630で作るべき？」と迷う人が出てきます。
このあとの章では、
SWELLで1200×630と16:9（1600×900）に悩んだときの
考え方を整理します。

SWELL（スウェル）の場合

SWELLは画像を美しく見せるのが得意なテーマですが、サイズを間違えるとぼやけたりカットされたりしやすいので注意が必要です。

• アイキャッチ画像
  • 横1600px × 縦900px
  • Cocoonより少し大きめ推奨。PCでもスマホでも綺麗に見え、トップページのカードデザインとも相性抜群です。
• カバーブロック
  • 横2000px以上
  • ページ幅いっぱいに使われるため、画質を保つために大きなサイズが必要です。

「トトノエ」サイトはSWELLを使っています。

🔍 SWELLは「1600×900」「1200× 630」どっちにすればいい？
他のサイトでは「アイキャッチは1200×630がおすすめ」と書かれていることも多く、迷う方もいるかもしれません。

これは間違いではありません。ただし、基準にしている目的が違います。

• 1200×630
  　→ OGP（SNSでシェアされたとき）の表示基準
• 16:9（1600×900など）
  　→ テーマ内（記事一覧・ブロック表示）での見え方重視

SWELLは、記事一覧やカード型レイアウトなど横長（16:9）で表示される場面が多いテーマです。

そのため、文字入りのアイキャッチやデザイン重視の場合は16:9のほうが上下が切れにくく、見た目が安定しやすいという特徴があります。

最近は、
・Google Discover
・生成AIで作る画像
・YouTubeサムネイル
など、16:9を前提とした表示・素材が増えています。
そのため、
「あとで使い回しやすい」
「トリミングやリサイズで崩れにくい」
という理由から、最初から16:9で作る人も増えています。
ただし、これはあくまで運用面の話なので、表示や目的に合わせて無理のないサイズを選ぶのがおすすめです。

【応用】記事内の画像、迷ったら「アイキャッチと同じ」でOK！

「記事の途中に挟む図解や画像、どのサイズで作ろう？」 と迷ったら、アイキャッチと同じサイズ（16:9）で作ってしまうのが一番の近道です。

• メリット①：加工がラク
  • Canvaなどで「ブログ用（16:9）」のデザインを一つ作れば、それをコピーして使い回せるので、いちいちサイズ設定をする手間が省けます。
• メリット②：SNSでも使い回せる
  • 記事内の図解を、そのままX（Twitter）などのSNSに流してもきれいに表示されます。

もちろん、「図鑑のように正方形で並べたい」などの意図がある場合は、正方形（500px × 500pxなど）でもOK。 大事なのは「サイズや比率がバラバラにならないこと」です。

2. 迷ったらこれ！画像の拡張子（ファイル形式）

「JPEG？ PNG？ どれを使えばいいの？」と迷ったら、以下の基準で選びましょう。

画像編集ソフトやツールで加工した後、「名前をつけて保存」や「ダウンロード」をするタイミングで、この形式を選んでください。

WebP（ウェッピー）とは？

最近のWebサイトで主流になっている形式で、「JPEGより軽くて画質が良い」のが特徴です。SWELLなどのモダンなテーマは特に相性が良く、表示速度アップにも効果的です。

※実はプラグインを使って、アップロード時に自動でWebPに変換・最適化する方法もあります。これについては、また別の記事で詳しく解説します。

3. 便利すぎる！無料の画像編集・サイズ変更ツール

画像サイズが大きいとブログが重くなってしまいます。用途に合わせて便利なツールを使い分けましょう。

「重い」ってどれくらい？（容量の目安）

ブログに載せる画像は、1枚あたり「200KB（キロバイト）以下」を目指しましょう。

スマホで撮った写真はそのままアップすると2MB〜5MB（200KBの10〜20倍！）もあり、ページの表示が遅くなる原因になります。

注意！「リサイズ」と「トリミング」の違い

画像を小さくするときに初心者がやりがちな失敗があります。

それは、「形（比率）を整えずに、無理やりサイズ変更（リサイズ）してしまうこと」です。

• NG例： 正方形の写真を、無理やり「横1280px × 縦720px」に指定してリサイズする。
  • → 画像が横にビヨーンと伸びて、被写体が潰れてしまいます。

• OK手順：
  • まず「トリミング（切り抜き）」で、使いたい形（16:9など）に切り取る。
  • そのあとで、「リサイズ（サイズ変更）」で小さくする。

この順番を守れば、画像が歪むことはありません。

おすすめ無料ツール（サイズ変更・圧縮）

• Canva（キャンバ）：
  • 初心者でも直感的にデザインやサイズ変更ができます。
• Webツールタロウ（画像リサイズ）：
  • https://tool-taro.com/image_resize/
  • インストール不要で、サイト上で手軽にサイズ変更ができます。
• TinyPNG / Squoosh：
  • 画像をドラッグするだけで、画質を保ったまま容量を軽く（圧縮）できます。

背景を消したいとき（背景除去）

アイコン作成などで背景を透明にしたい時、Canvaでは「有料プラン」でないと背景除去ができません。そんな時は以下の無料ツールが便利です。

• iLoveIMG（背景切り抜き）
  • https://www.iloveimg.com/ja/remove-background
  • 画像をアップロードするだけで、自動できれいに背景を消してくれます。スマホやMac、Windows 10の方はこちらがおすすめ。

• Windows標準「ペイント」アプリ
  • Windows 11の最近のアップデートで、なんと「背景の削除」機能が追加されました！
  • ※注意： Windows 10以前や、古いバージョンの場合はこの機能がありません。その場合は上の「iLoveIMG」を使いましょう。
  • ここが便利： サイズ変更、切り抜き（トリミング）も簡単。「名前をつけて保存」する際に拡張子（JPEGやPNGなど）も自由に変更できるので、Windows 11ユーザーには隠れた神ツールです。

4. 「あの画像どこ？」を防ぐファイル管理術

ブログを長く続けると、WordPressの中に画像が溜まり、「あのアイキャッチどこだっけ？」と探すのが大変になります。

これを防ぐための「トトノエ術」を3つ紹介します。

① ファイル名（画像の名前）は「半角英数」でルール化する

スマホで撮った写真は、最初は「IMG_1234.jpg」のような機械的な名前になっています。

これをそのままアップロードせず、中身がわかる名前（ファイル名）に変えてからブログに使いましょう。

• 良い例：
  • cleaning_eyecatch.webp（掃除記事のアイキャッチ）
  • kitchen_before.png（キッチンのビフォー画像）

こうすることで後で検索しやすくなり、SEO的にも少しプラスになります。

② フォルダ（入れ物）管理プラグインを使う

パソコンの中で書類を「フォルダ（入れ物）」に分けて整理するように、WordPressの画像も整理整頓しましょう。

標準機能ではできませんが、プラグインを入れると劇的に使いやすくなります。

• おすすめプラグイン：FileBird
  • 「アイキャッチ」「吹き出し」「バナー」のように箱（カテゴリ）を作って分けるだけで、探すストレスがほぼゼロになります。

③ Canva内でもフォルダ分けしておく

Canvaで画像を作る場合も、「記事タイトルごと」や「用途ごと」にフォルダを作っておくとスムーズです。

• 例：2025_クローゼット整理、SWELLアイキャッチ など。

5. 意外と知らない？「タイトル」と「代替テキスト」の違い

画像をアップロードする際に入力欄がたくさんあって混乱しませんか？

SEOや管理のために重要なのは以下の2つです。

代替テキスト（alt）の書き方

単に「掃除」と書くのではなく、「クローゼット中段を整理した後の状態」のように具体的に書くのが、読者にやさしいブログにするコツです。

まとめ

画像周りのルールを整えるだけで、ブログの執筆環境は驚くほど快適になります。

1. サイズ： Cocoonなら1280×720、SWELLなら1600×900を目安にする。記事内は統一感があればOK。
2. 形式： 基本はWebP（ウェッピー）を選ぶ。
3. 編集： トリミングで形を整えてからリサイズし、容量は200KB以下を目指す。
4. 管理： ファイル名（画像の名前）は「中身がわかる英語」にし、FileBirdなどでフォルダ分けする。

まずはペイントや無料ツールを使って、画像を整えるところから始めてみましょう！