「メディアサイズ設定」は何を決めるところか
WordPress の「設定 → メディア」には、画像サイズを決める項目があります。
ここで設定するのは、「画像をアップロードしたときに、自動で何パターンのサイズを生成するか」と「その縦横サイズ」です。
元画像を 1 枚アップロードすると、WordPress は
サムネイルサイズ
中サイズ
大サイズ
など、複数のサイズに自動リサイズして保存します。
プログラミングでたとえると、「画像アップロード時に自動で走るバッチ処理の出力サイズを決める設定」です。
ここを何も考えずに放置すると、「使わないサイズの画像ファイル」がどんどん量産されていきます。
なぜ「必要最小限」に絞るべきなのか
サーバー容量を無駄に消費しないため
画像 1 枚アップロードするたびに、
元画像+複数サイズの派生画像が生成されます。
例えば、
1 枚の元画像から 4 サイズ生成されると、
実質 5 ファイル分の容量を消費します。
これが、
100 枚、1000 枚、1 万枚と増えていくと、
「使っていないサイズの画像」がサーバー容量を圧迫し始めます。
レンタルサーバーの安いプランを使っていると、
「気づいたら容量パンパンでバックアップも取れない」
という状況になりかねません。
必要最小限のサイズだけを生成するようにしておけば、
「本当に使う画像」だけが増えていく状態にできます。
ページ表示のパフォーマンスを最適化するため
画像サイズを適切に設計しておくと、
「そのページにちょうどいいサイズの画像」を読み込めるようになります。
例えば、
本文の横幅が 800px しかないのに、
2000px の巨大画像をそのまま表示していると、
見た目は同じでも、読み込みデータ量だけが無駄に増えます。
逆に、
本文用には 800px の「中サイズ」
サムネイル用には 300px の「サムネイルサイズ」
といった具合に、用途に合わせたサイズを用意しておけば、
ページ表示が軽くなり、ユーザー体験も SEO 的にも有利になります。
「必要最小限に調整する」というのは、
「使わないサイズを減らす」と同時に、
「使うサイズをきちんと決める」という意味でもあります。
管理画面の選択肢をスッキリさせるため
画像を挿入するとき、
「サムネイル」「中」「大」「フルサイズ」などの選択肢が出てきます。
ここに、テーマやプラグインが追加したサイズが大量に並ぶと、
「どれを選べばいいのか分からない」状態になりがちです。
そもそも使わないサイズを生成しないようにしておけば、
選択肢もシンプルになり、
「この用途にはこのサイズ」という判断がしやすくなります。
メディア設定画面の各項目をかみ砕いて理解する
サムネイルのサイズ
「サムネイルのサイズ」は、主に一覧表示やカード型レイアウトで使われる、小さめの画像です。
ブログのトップページやカテゴリ一覧で、記事タイトルの横に出てくる小さな画像をイメージしてください。
ここで決めるのは、
幅(px)
高さ(px)
そして「サムネイルを実寸法にトリミングするかどうか」
です。
トリミングをオンにすると、指定した縦横比に合わせて、中央部分を切り抜くような動きになります。
カードレイアウトをきれいに揃えたいときには便利ですが、
写真の構図が崩れることもあるので、サイトのデザイン方針に合わせて決めます。
中サイズ・大サイズ
「中サイズ」「大サイズ」は、本文中で使う画像や、ライトボックス表示などに使われることが多いです。
中サイズは「本文の横幅より少し小さい〜同じくらい」
大サイズは「本文の横幅と同じ〜少し大きい」
くらいのイメージで設計すると、無駄が少なくなります。
例えば、
本文の最大幅が 800px のテーマなら、
中サイズを 600〜800px
大サイズを 1000〜1200px
程度にしておくと、
「中サイズ=普通に本文に差し込む用」
「大サイズ=拡大表示やヘッダー用」
といった使い分けがしやすくなります。
「必要最小限」にするための考え方
まずは「自分のテーマの横幅」を知る
いきなり数値をいじる前に、
今使っているテーマの「本文の最大幅」がどれくらいかを把握するのが先です。
ブラウザの開発者ツールで要素を見たり、
テーマのドキュメントを確認したりして、
「記事本文の横幅はだいたい何ピクセルか」を知っておきます。
例えば、
本文の横幅が 720px なら、
それより大きい画像を本文に表示しても、結局ブラウザ側で縮小されます。
このとき、
中サイズを 720px 前後
大サイズを 1000px 前後
のように設定しておけば、
「無駄に巨大な画像を読み込む」ことを避けられます。
「使う場面が明確なサイズ」だけ残す
メディアサイズを設計するときのコツは、
「このサイズはどこで使うのか」を具体的に言えるかどうかです。
例えば、
サムネイルサイズ=記事一覧のカード画像用
中サイズ=本文中に差し込む標準画像用
大サイズ=ヘッダー画像やフル幅セクション用
といった具合に、
用途がはっきりしているサイズだけを残し、
それ以外は極力増やさない、という方針にします。
プログラミングで言えば、
「使われていない関数を削る」「役割がかぶっている関数を統合する」
のと同じ発想です。
具体例でサイズ設計をイメージする
例1:シンプルなブログ(本文幅 720px 前後)
想定:
一般的なブログテーマ、1 カラム、本文幅 720px くらい。
画像は主に本文中に 1 カラムで表示する。
この場合の一つの目安は、こんな感じです。
サムネイル:幅 300px、高さ 300px(正方形トリミング ON でも OK)
中サイズ:幅 720px、高さは自動(縦は制限しない)
大サイズ:幅 1200px、高さは自動
こうしておくと、
サムネイルは一覧用に十分小さく、
中サイズは本文にぴったり、
大サイズはヘッダーや拡大表示に使える、
というバランスになります。
例2:写真多めのポートフォリオサイト
想定:
写真を大きく見せたい、ギャラリー表示も多い。
フル幅セクションで横 1200〜1400px くらいまで使う。
この場合は、
中サイズを 800〜1000px
大サイズを 1400〜1600px
くらいにしておくと、
「通常表示」と「大きく見せる表示」の両方をカバーできます。
ただし、元画像があまりに巨大(4000px 以上など)だと、
生成される大サイズもファイルサイズが重くなりがちなので、
アップロード前に適度にリサイズしておく運用もセットで考えると良いです。
途中でサイズを変えたときに起きること
新しくアップロードする画像には新設定が適用される
メディア設定を変更すると、
その後にアップロードする画像には、新しいサイズでの生成が適用されます。
つまり、
「今日から先の画像」は新ルール、
「過去にアップした画像」は旧ルール、
という状態になります。
テーマやレイアウトを大きく変えたタイミングでサイズを見直すのは良いことですが、
過去画像との整合性をどうするかは、別途考える必要があります。
過去画像を新サイズで作り直したい場合
本格的にやるなら、「サムネイル再生成系」のプラグインを使って、
既存の画像から新しいサイズを一括生成し直す、という手もあります。
ただし、これは
画像点数が多いと時間がかかる
サーバー負荷もそれなりにかかる
という処理なので、
本番環境でやるときは時間帯やバックアップを考慮する必要があります。
プログラミングで言えば、
「既存データに対するマイグレーションスクリプトを流す」
のと同じ感覚です。
プログラミングの感覚で「メディアサイズ最適化」を捉える
「ストレージ設計」と「レスポンス最適化」
メディアサイズの調整は、
ストレージ設計(どれだけのファイルを持つか)と、
レスポンス最適化(どのサイズをクライアントに返すか)
の両方に関わる話です。
使わないサイズを量産するのは、
不要なキャッシュを延々と溜め続けるのと同じです。
逆に、
必要なサイズをきちんと定義しておけば、
「このコンポーネントではこのサイズを使う」という設計が明確になり、
フロントエンドの実装も安定します。
「とりあえずデフォルト」のままにしない
WordPress は汎用 CMS なので、
初期値は「どんなテーマでもそこそこ動く」ように設定されています。
でも、あなたのサイトのデザインや用途がはっきりしているなら、
その実態に合わせてメディアサイズをチューニングした方が、
パフォーマンスも運用も確実に良くなります。
フレームワークの config を、
プロジェクトに合わせてちゃんと調整するのと同じです。
まとめ:最初に「どのサイズを本当に使うか」を決める
「メディアサイズを必要最小限に調整する」というのは、
単に数字を小さくすることではなく、
どのサイズを
どの場面で
どのくらいの幅で
使うのかを、最初に設計しておく、ということです。
そのうえで、
使わないサイズは増やさない
本文幅に対して過剰に大きなサイズは作らない
サムネイル・本文用・大きめ表示用の役割をはっきり分ける
こうしておけば、
サーバー容量も守れ、
ページ表示も軽くなり、
管理画面の操作もシンプルになります。


