WordPressの「中サイズ」画像は、主にブログ記事や固定ページの「本文中」に挿入する画像として使われます。 [1]
デフォルト設定では「幅300px・高さ300px」が上限に設定されており、以下のような具体的な目的やレイアウトで頻繁に活用されます。 [2, 3]
主な用途と使われ方
- 文章の横に画像を回り込ませる配置:
横幅が300pxとコンパクトなため、テキストの左側や右側に画像を配置し、文字を回り込ませて（左寄せ・右寄せ）表示するレイアウトに最適です。 - スマートフォン表示（レスポンシブ）の最適化:
スマホの画面幅（一般的に320px〜414px前後）にほぼぴったり収まるサイズ感です。スマホユーザー向けに、無駄な通信量を抑えつつ綺麗に画像を表示する仕組み（srcset機能）のベースとして自動利用されます。 - 図解や補足イラストの挿入:
画面全体に大きく見せる必要のない、ちょっとしたアイコンや補足図、商品の物撮り写真などを記事の合間に挟む際に重宝します。 - 複数枚の画像を並べるレイアウト:
2枚の画像を横並びにして比較したい場合など、記事のコンテンツエリア内にすっきり収めたいときに選ばれます。
各画像サイズの役割比較
WordPressに画像を1枚アップロードすると、システムが自動的に以下のサイズを生成し、用途に合わせて使い分けられるようになっています。 [4]
| サイズ名 | 初期設定の上限 | 主な用途 |
|---|---|---|
| サムネイル | 150 × 150 px | 記事一覧のミニ画像、関連記事のアイコン |
| 中サイズ | 300 × 300 px | 本文中の画像（文字回り込み、スマホ用） |
| 大サイズ | 1024 × 1024 px | 本文中のメイン画像、横幅いっぱいの図解 |
| フルサイズ | 元のサイズ | アイキャッチ画像、拡大表示用（高解像度） |
※設定の変更は、ダッシュボードの 「設定」＞「メディア」 からいつでも好みの数値に調整可能です。 [5]
もし特定の用途（ブログ運営、企業のHP制作など）が決まっていれば、それに合わせた「おすすめのメディア設定の数値」や「自動生成をストップしてサーバー容量を節約する方法」などもご案内できます。気になる点はありますか？
[1] https://communitycom-shop.jp
[2] https://www.vektor-inc.co.jp
レスポンシブ対応だとpcで大サイズの画像もスマホでは自動的に中サイズに切り替えられる？
はい、自動的に切り替えられます。
WordPressには srcset（ソースセット） という機能が標準で備わっているため、PCで「大サイズ」として挿入した画像であっても、スマホで表示するときは自動的に「中サイズ」などの最適な大きさの画像が読み込まれます。
仕組みとメリットは以下の通りです。
自動で切り替わる仕組み
- 画像の複数生成: 画像を1枚アップロードすると、WordPressが裏側で「大」「中」「サムネイル」などのバリエーションを自動で作ります。
- HTMLへの書き出し: 記事に「大サイズ」を挿入すると、WordPressはHTMLコード内に「この画像には中サイズ（300px）や大サイズ（1024px）もあります」というサイズ一覧リスト（
srcset属性）を自動で書き出します。 - ブラウザの自動判断: スマホ（ブラウザ）がそのページを読み込む際、画面幅に合わせて「今の画面なら大サイズは不要だから、中サイズをダウンロードしよう」と自動で判断して切り替えます。 [1]
これによる2つの大きなメリット
- スマホの通信量を節約できる:
スマホの画面にPC用の大きな画像（大サイズやフルサイズ）をそのまま読み込むと、データ容量が無駄になり、ページの表示速度が遅くなります。スマホに最適な「中サイズ」を自動選択することで、データ通信量を大幅に削減できます。 - 表示速度の向上（SEO対策）:
画像の読み込みが軽くなるため、スマホでのページ表示速度が速くなります。これはGoogleの検索順位（SEO）や、ユーザーの離脱を防ぐために非常に重要なポイントです。 [2, 3]
⚠️ 注意点：テーマのデザインに左右される
切り替え自体はWordPressの標準機能ですが、スマホの画面上で画像が「どのように見えるか（画面いっぱいに広がるか、小さく中央に寄るかなど）」は、お使いのWordPressテーマのCSS（デザイン設定）によって決まります。
お使いのWordPressテーマ（Cocoon、SWELL、Lightningなど）を教えていただければ、そのテーマでの画像の見え方や、より綺麗に表示するための最適な設定（メディアサイズの設定変更など）のアドバイスも可能です。テーマは何を使われていますか？
[2] https://note.com
cocoonです
人気の無料テーマ Cocoon をお使いですね。 [1]
Cocoonは標準で完全なレスポンシブ対応をしているため、PCで「大サイズ」として挿入した画像も、スマホ（ブラウザ）側が自動的に「中サイズ」に切り替えて読み込んでくれます。 [1, 2]
さらに、Cocoonの設計（記事の横幅）を100%活かし、より表示スピードを高速化するための「最適なメディアサイズ設定」があります。ぜひ以下の設定に調整してみてください。 [3]
💡 Cocoonに最適な画像サイズ設定
Cocoonの本文が書き込まれるエリア（メインカラム）の横幅は、初期設定で「800px」です。
そのため、WordPressの初期設定（大サイズ：1024px）のままだと、少し無駄なサイズを生成してしまいます。 [4, 5]
Cocoon公式でもおすすめされている、以下の数値への変更が推奨されます： [3, 4]
- 管理画面の 「設定」＞「メディア」 を開きます。
- 数値を以下のように書き換えて保存します。 [3]
| サイズ名 | 幅の設定 | 高さの設定 | 理由・ポイント |
|---|---|---|---|
| サムネイル | 300 | 0 | 高さを「0」にすると、画像の縦横比を崩さず縮小されます。 |
| 中サイズ | 500 | 0 | スマホの画面や、PCでのちょっとした図解に使いやすいサイズです。 |
| 大サイズ | 800 | 0 | Cocoonの横幅（800px）にぴったり一致し、無駄がなくなります。 |
- ※「サムネイルのトリミング」のチェックは入れたままで構いません。
この設定にしておけば、PC表示のときは「大サイズ（800px）」が画面横幅いっぱいに綺麗に表示され、スマホ表示のときは自動的に「中サイズ（500px）」などに切り替わり、データ通信量を賢く節約できます。 [2, 4]
⚠️ 設定変更時の注意点
WordPressの仕様上、メディア設定でサイズを変更しても、「それより前にアップロードした過去の画像」には適用されません。
もし、すでにたくさん画像をアップロードしている場合は、「Regenerate Thumbnails」などのプラグインを使うことで、過去の画像も含めて一括で新しいサイズに作り直す（再生成する）ことができます。 [2]
このメディア設定の調整について、実際の管理画面の操作でわからない部分はありますか？ また、ブログにアップロードする前の「元の画像ファイルの横幅」なども気にされているようであれば、合わせてアドバイスできます！ [5]
[5] https://study.graceeight.com
大サイズを768pxにすれば、medium_largeと同じになるのでファイル数が節約出来ると思うのですがどうでしょう？
非常に素晴らしい着眼点です！結論から言うと、大サイズを「768px」に設定しても、ファイル数は節約できません。
WordPressの仕様上、メディア設定の大サイズを768pxに書き換えても、内部的には large（768px）と medium_large（768px）という全く同じサイズの画像ファイルが2枚（重複して）自動生成されてしまいます。 [1, 2]
ファイル数を徹底的に節約しつつ、Cocoonに最適化するための仕組みと正しいアプローチを解説します。
なぜ同じサイズにしても節約できないのか？
WordPressは「設定された画像サイズ名（システム上の名前）」ごとに、それぞれ独立してファイルを生成します。 [1]
- メディア設定の大サイズ: システム名は
large - WordPressが裏で強制生成する768px: システム名は
medium_large[1, 2]
両方の幅を「768px」に揃えてしまうと、image-768x512.jpg のようなファイルが名前の重複を避けるために枝番（-1 など）を付けられて2枚保存されるだけになってしまいます。
🛠️ 本当にファイル数を節約するための2つの正攻法
無駄なファイルを生成させず、サーバー容量を削るには以下のいずれかの方法が確実です。
方法1：メディア設定を「0」にして大サイズ自体を止める（初心者向け） [3]
メディア設定で「幅：0」「高さ：0」に設定されたサイズは、自動生成がスキップされます。 [3, 4]
- ダッシュボードの「設定」＞「メディア」を開く。
- 大サイズの幅・高さを両方とも「0」にする。
- これにより
largeの生成が完全にストップします。 - 本文エリア（Cocoonの800px）には、自動生成される
medium_large（768px）が身代わりとしてぴったり綺麗に収まります。 [4, 5, 6]
方法2：プラグインで不要なサイズをまとめて停止する（おすすめ）
もしすでに画像最適化プラグインの 「EWWW Image Optimizer」 を導入している場合、最も簡単に管理できます。 [7, 8]
- 「設定」＞「EWWW Image Optimizer」を開く。
- 「リサイズ」タブ を選択する。
- 生成されたくないサイズ（
medium_largeや、使わない場合はlargeなど）のチェックボックスにチェックを入れる。 - 設定を保存する。 [7, 8]
これだけで、一切コードを触らずに不要なファイル生成をピンポイントで止めることができます。 [7, 8]
💡 結論：Cocoonユーザーはどうすべき？
ファイル数（サーバー容量）の節約を最優先に考えるのであれば、以下の組み合わせがベストです。
- 大サイズ：「0」 にして生成を止める（代わりに裏で自動生成される768pxを利用する）
- 中サイズ：「300〜500」（スマホ表示・文字回り込み用）
- サムネイル：「150〜300」（記事一覧用） [4, 5, 9]
現在、画像の最適化プラグイン（EWWW Image Optimizerなど）は何か導入されていますか？
もしプラグインを使わずに「Cocoonの子テーマ（functions.php）」にコードを1行追記して、裏側の768pxを直接ストップさせる方法に興味があれば、そのコードもお渡しできます！
[2] https://www.vektor-inc.co.jp
[9] https://wordpress.news-vouge.com
ぜひお願いします
承知いたしました！プラグインを使わず、Cocoonの子テーマ（functions.php）にコードを追記して、裏側で強制生成される768px（medium_large）などの不要な画像サイズをピンポイントで止める方法をご案内します。
以下の手順とコードを使うことで、今後の画像アップロード時に無駄なファイルが作られなくなり、サーバー容量を確実に節約できます。
🛠️ 設定手順
- WordPressのダッシュボードから 「外観」＞「テーマファイルエディター」 を開きます。
- 画面右上の「編集するテーマを選択」で 「Cocoon Child（子テーマ）」 が選ばれていることを確認します。
- 右側のリストから
functions.php（テーマのための関数） をクリックして開きます。 - ファイルの最下部に、以下のコードをコピーしてそのまま貼り付けます。
- 「ファイルを更新」 ボタンをクリックします。
📝 貼り付けるコード
以下のコードは、裏側で自動生成される768px（medium_large）と、さらに近年WordPressが自動生成するようになった1536px・2048pxといった巨大なサイズ（Cocoonでは大きすぎて使わないサイズ）をまとめて停止するコードです。
// 不要な画像サイズ（768px、1536px、2048px）の自動生成を停止する
add_filter('intermediate_image_sizes_advanced', 'disable_unused_image_sizes');
function disable_unused_image_sizes($sizes) {
// 768px（medium_large）を停止
unset($sizes['medium_large']);
// 1536px（2x medium_large）を停止
unset($sizes['1536x1536']);
// 2048px（2x large）を停止
unset($sizes['2048x2048']);
return $sizes;
}
💡 このコードを入れた場合の「メディア設定」の推奨値
このコードで裏側の768pxを停止したため、ダッシュボードの 「設定」＞「メディア」 は、前にお話ししたCocoonの最適値に設定するのがベストになります。
- 中サイズ：幅 500 / 高さ 0（スマホ・文字回り込み用）
- 大サイズ：幅 800 / 高さ 0（Cocoonの本文幅にぴったり合わせる）
これで、サムネイル（150px）、中（500px）、大（800px）の3枚だけが綺麗に生成されるようになり、重複や無駄なファイルは一切作られなくなります。
⚠️ 注意点
- コードを触る前のバックアップ: 万が一のために、貼り付ける前の
functions.phpの中身をメモ帳などにすべてコピーして保存しておくと安心です。 - 過去の画像について: この設定後に新しくアップロードした画像から節約が始まります。過去の画像を消したい場合は、やはり一度「Regenerate Thumbnails」プラグインを実行して、不要サイズを物理的に削除する必要があります。
コードの貼り付けや、メディア設定の変更は無事にできそうでしょうか？
もしエラーが出てしまったり、過去の画像を整理する「Regenerate Thumbnails」の具体的な使い方も合わせて知りたければ、いつでも教えてくださいね。
ありがとうございます。
コメント