管理画面「メディア設定」のWordPressで自動生成される画像サイズの使い方等を徹底解説

みなさんこんにちは！エンジニアの高澤です！

今回は管理画面「メディア設定」のWordPressで自動生成される画像サイズの使い方等を徹底解説していきたいと思います。

WordPressでは、画像をアップロードすると自動的に複数のサイズの画像が生成される機能があります。

この機能について、WordPressエンジニアの方でもよくわかっていない方がいらっしゃることと思います。（筆者はしばらく分かりませんでした笑）

この機能の仕組みやメリット・デメリットを知っておけば、WordPressと言うリソースを大いに活かして開発することができ、SEO向上や効率化などに大いに役立つことと思います。

当記事では、管理画面「メディア設定」のWordPressでの画像自動生成機能について詳しく解説します。

WordPressの画像の自動生成とは

WordPressの自動生成する画像サイズとは、ブロックエディタやメディアアップローダーなどを使って画像をアップロードした時に自動的に複数のサイズの画像が生成される機能のことを言います。

つまり、アップロードした画像のサイズをもとに、その画像の大・中・小の3つの複数のサイズで複製される機能のことを言います。（元の画像が小さいと例えば中・小しか生成されない場合もあります）

画像が自動生成されるタイミングやパターンがわかったほうが話が早いので、ここで触れておきます。

画像が自動生成されるパターンの一つは、下図のようにブロックエディタにて画像を本文の箇所にアップロードしたときです。

アップロードした画像を選択していただき、画面右に設定パネルにある「ブロック」タブを選択していただくと「解像度」という項目があります。

「解像度」の項目をクリックすると、下図のようにデフォルトで「サムネイル」「中」「フルサイズ」の3つから選べるようになっているかと思います。

これが今回非常に重要となる、自動生成された画像サイズとなります。

つまり、この3つのサイズが選択できるということは、画像が自動生成されたということになります。

また他にも、画像ブロックなどから開いたメディアアップローダーから画像をドラッグ＆ドロップなどしてアップロードした画像や…

WordPress管理画面左メニュー「メディア」から画像をドラッグ＆ドロップなどしてアップロードした場合も同様に画像が自動生成されるようになっております。

WordPressの自動生成する画像サイズとは

WordPressの自動生成する画像サイズとは、WordPress管理画面左メニュー「設定」の「メディア」にある「サムネイルのサイズ」「中サイズ」「大サイズ」のことを言います。

デフォルトでは「サムネイル（150×150px）」「中サイズ（300×300px）」「大サイズ（1024×1024px）」として作成されるようになっています。

これに加え、使用しているテーマやプラグインによって独自のサイズが追加される場合もあります。

これらの自動生成された画像は、サーバー上のファイルの保存場所として、WordPressコアのwp-content/uploadsフォルダに保存され、メディアライブラリから選択できるようになります。

ちなみに、WordPressインストール後のデフォルトでは下図のようにサーバー上のファイルの保存場所が「wp-content/uploads/【年】/【月】」という階層で整理されて保存されるようになっております。

上図のようにアップロードした日付ごとにファイルを作成して整理させる方式を変更したい場合は、「アップロードしたファイルを年月ベースのフォルダーに整理」のチェックを外して設定を保存してください。

すると、下図のように「wp-content/uploads/」の階層に直接保存されるようになります。何かしらの都合でこちらの保存場所方式のほうがよければ設定を変更しましょう。

ちなみに、これまでアップロードした画像の階層はそのままなのでご注意ください。

このように、WordPressが自動で複数のサイズでファイルを保存してくれるのは良いですが、自動生成されたサイズのファイルで「フルサイズ」以外使わない場合もあります。（筆者の場合はこのパターンが多いです）

不要なサイズが増えると、サーバーのストレージを圧迫し、サイトのバックアップや管理が煩雑になることもあります。そのため、必要に応じて自動生成の設定を見直すことが重要です。

WordPressのデフォルトの自動生成サイズの変更方法

WordPressのデフォルトの自動生成サイズの変更方法について解説いたします。

デフォルトでは「サムネイル（150×150px）」「中サイズ（300×300px）」「大サイズ（1024×1024px）」として自動生成されるようになっておりますが、それぞれサイズを任意の数値に変更したい場面があるかと思います。

そんな時は、WordPress管理画面「メディア設定」の各サイズの数値を変更しましょう。

やり方はたったこれだけです。何も難しいことはないかと思います。

ちなみに「サムネイルのサイズ」には「サムネイルを実寸法に切り抜く (通常は相対的な縮小によりサムネイルを作ります)」と言うチェックボックスが設置されているかと思います。

この設定は、サムネイル画像の作り方を「トリミング」または「縮小」にするかの選択ができる機能です。

チェックをつけたままのデフォルトの場合は下図のようにトリミングされます。（下図の例のように、画像によって中身が見切れちゃう場合があることに注意が必要です）

チェックを外すと、下図のように元の画像の相対的な比率を保ったまま縮小されます。

「サムネイルのサイズ」は、使い道として想定されているもので言うとサイドバーによくある「記事一覧」があるかと思います。

上図の例ではサムネイル画像は正方形なのでデフォルトのままで最適と言えますが、もし横長の場合は「サムネイルを実寸法に切り抜く (通常は相対的な縮小によりサムネイルを作ります)」のチェックを外して対応することが必要になるかと思います。

チェックをつけたままのデフォルトのトリミングでは、画像が勝手に切り抜かれて中身が見切れちゃうことには注意が必要です。

WordPressの自動生成のメリット・デメリット

WordPressの自動生成にはメリット・デメリットが明確にあるかと思います。

画像の自動生成の仕組みをしっかり理解することで、WordPressでのWebサイト制作やアプリ開発などで手が届かなかったことや、今までやっていた大変な作業を少しの手間で一瞬で解決できるなどの可能性が高まるので、理解しておいて損はないと大いに思います。

WordPressの自動生成のメリット

まずはWordPressの自動生成のメリットについて解説いたします。

メリットとしてはあげられるものは以下があるかと思います。

• さまざまな画面サイズに対応できる
• ページスピードを向上させてSEO対策につながる
• 手動リサイズの手間が省ける

それぞれ解説いたします。

さまざまな画面サイズに対応できる

WordPressの画像自動生成機能により、デバイスごとに適した画像サイズを提供できます。

スマートフォン・タブレット・PCなど、異なる画面サイズに最適化された画像を使用することで、ページの表示速度を向上させ、ユーザー体験を改善できます。

ページスピードを向上させてSEO対策につながる

WordPressの画像自動生成機能を活用すると、適切なサイズの画像を提供できるため、ページの読み込み速度が向上します。

適切な画像サイズを使用することで、不要に大きな画像を読み込むことを防ぎ、サーバーの負荷を軽減できます。結果として、ユーザーが快適にサイトを閲覧でき、離脱率の低下につながります。

また、Googleはページスピードをランキング要因の一つとしているため、サイトの表示速度を最適化することでSEO対策にも貢献します。特に、モバイルユーザーの増加に伴い、素早く表示されるサイトは検索エンジンからの評価が高まりやすくなります。

手動リサイズの手間が省ける

画像をアップロードするだけで、必要なサイズの画像が自動的に作成されるため、手動でリサイズする手間が省けます。

これにより、サイト運営者や投稿者は画像の加工作業に時間を取られることなく、スムーズにコンテンツを更新できるメリットがあります。

WordPressの自動生成のデメリット

次に、WordPressの自動生成のデメリットについて解説いたします。

デメリットとしてはあげられるものは以下があるかと思います。

• サーバーのストレージを圧迫する
• バックアップや移行時の負担が増える
• そもそも必要のないサイズが生成される可能性がある

それぞれ解説いたします。

サーバーのストレージを圧迫する

画像の自動生成により、1枚の画像をアップロードするたびに複数のサイズの画像が保存されるため、サーバーのストレージが無駄に消費される可能性があります。

特に、大量の画像を扱うサイトでは、不要なファイルが増えてしまい、管理が煩雑になることがあります。

バックアップや移行時の負担が増える

WordPressのメディアフォルダに大量の不要な画像が蓄積されることで、サイトのバックアップやサーバー移行時のデータサイズが大きくなります。

結果として、バックアップの処理時間が長くなったり、サイト移行がスムーズに行えなくなったりする可能性があります。

そもそも必要のないサイズが生成される可能性がある

テーマやプラグイン開発などでいうと、この自動生成機能による画像サイズ別の生成は、不要な画像サイズが追加されるということにつながる可能性があります。

特に、他の複数のプラグインを導入している場合はそれぞれが独自の画像サイズを生成したり、テーマの作りや方針によって無駄なファイルが増えてしまうケースがあります。

この場合、適切に設定を変更しなければ、不要な画像が増え続けてしまうことになります。

WordPressの画像複数サイズを出力する方法

前提知識の解説が長くなりましたが、早速、画像複数サイズを出力する方法について解説いたします。

出力コードの解説に入る前に、コードを記述する際に知っておくべき「サイズを指定するサイズ名」を表にいたしました。

それぞれサイズごとに「thumbnail」「medium」「large」「full」とありますが、このサイズ名をコードにて使用して、出力する画像のサイズを指定することになります。

これらを使い分けることで、投稿一覧にはサムネイル、記事内には中サイズ、フルサイズはギャラリー用に活用などといった形で出力することができるので、必ず覚えておきましょう。

the_post_thumbnail()関数で記事のアイキャッチ画像を表示

the_post_thumbnail()関数を使って、投稿やカスタム投稿のアイキャッチ画像を簡単に出力できます。

the_post_thumbnail()関数を使った実装例として、以下のコードをindex.phpなどテーマを構成するPHPテンプレートファイルにコピー＆ペーストしてください。

<?php if (have_posts()) : ?>
    <div class="post-list">
        <?php while (have_posts()) : the_post(); ?>
            <article class="post-item">
                <?php if (has_post_thumbnail()) : ?>
                    <div class="post-thumbnail">
                        <a href="<?php the_permalink(); ?>">
                            <?php the_post_thumbnail('medium'); ?>
                        </a>
                    </div>
                <?php endif; ?>
                <h2 class="post-title">
                    <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
                </h2>
            </article>
        <?php endwhile; ?>
    </div>
<?php else : ?>
    <p>投稿が見つかりませんでした。</p>
<?php endif; ?>

ペーストしていただいたら、実際にページの表示を確認してみてください。

すると、下図のように一覧が表示されているかと思います。（CSSを記述しておらず、環境などの問題で全く同じ表示にならないかと思いますのでざっくり同じであれば大丈夫です）

上記コードのポイントとなるのか以下の箇所です。

<?php the_post_thumbnail('medium'); ?>

the_post_thumbnail()関数は記事ページごとに設定されているサムネイル画像を表示するテンプレートタグですが、引数にサイズ名の一つである「medium」を設定していることで、WordPressが自動生成する中サイズ（300×300px）の画像を出力できます。（※「300×300px」はデフォルトの設定のままにしている場合です）

このように、自動生成された複数サイズの画像はテンプレートタグの引数などに「thumbnail」「medium」「large」「full」などのいずれかのサイズ名を追加することによって、対応するサイズの画像が出力されるようになります。

以下はそれぞれのサイズごとに出力された表示のイメージになります。（※元の画像の大きさは1000 x 571pxとします）

◾️「thumbnail」の場合

<?php the_post_thumbnail('thumbnail'); ?>

下図のように、横幅150px（デフォルトの場合）で表示されます。

◾️「medium」の場合

<?php the_post_thumbnail('medium'); ?>

下図のように、横幅300px（デフォルトの場合）で表示されます。

◾️「large」の場合

<?php the_post_thumbnail('large'); ?>

下図のように、横幅1000px（デフォルトの場合）で表示されます。

ここで注意点ですが、メディア設定では、「大サイズ」を1024px × 1024px（デフォルトの場合）と設定しておりますが、元の画像の大きさが1000px x 571pxとなっており、大きさが1024px以下のため、頭打ちとなって引き伸ばされることなく1000pxで表示されている形になります。

◾️「full」の場合

<?php the_post_thumbnail('full'); ?>

下図のように、横幅1000px（デフォルトの場合）で表示されます。

「full」では元の画像の大きさで出力されるため、元の画像の大きさが1000px x 571pxであるため、横幅1000pxで表示される形になります。

ここまでで基本は解説できたかと思いますので、一通り仕組みや使い方が理解できたかと思います。

wp_get_attachment_image()関数で特定の画像を取得

wp_get_attachment_image()関数を使うと、任意の画像IDを指定して表示できます。

$image_idに画像IDを代入すれば、その画像が表示されます。

<?php 
$image_id = 288; // ここに表示したい画像の添付IDを指定
echo wp_get_attachment_image( $image_id, 'medium' ); 

wp_get_attachment_image_src()関数で画像のURLを取得

wp_get_attachment_image_src()関数を使うと、画像のURLを取得できます。

wp_get_attachment_image_src()関数の第1引数に画像IDを代入すれば、その画像が表示されます。

<?php
$image = wp_get_attachment_image_src( 288, 'large' ); // 第1引数に画像の添付IDを指定
echo '<img src="' . esc_url($image[0]) . '" alt="">';

srcset属性を活用してデバイスに最適な画像を出力

WordPress 4.4以降では、srcsetにより異なるデバイスごとに適切なサイズの画像を自動選択できます。
srcsetとは、画面サイズや解像度に応じて最適な画像を自動選択するためのHTML属性のことをいいます。

srcsetにより、スマートフォン・PCなどで適切なサイズの画像が選ばれ、ページ速度の向上やSEO対策にもつながります。

以下のコードがsrcsetに対応させたサンプルコードになります。

<img src="<?php echo esc_url(get_the_post_thumbnail_url(get_the_ID(), 'medium')); ?>" 
     srcset="<?php echo esc_attr(wp_get_attachment_image_srcset(get_post_thumbnail_id())); ?>" 
     sizes="(max-width: 600px) 100vw, 50vw" 
     alt="<?php the_title(); ?>">

上記コードは、WordPressの投稿に設定されたアイキャッチ画像を適切なサイズで表示するためのものです。

src属性には、現在の投稿のアイキャッチ画像のURLが指定されており、中サイズ（medium）が取得されます。
srcsetには、レスポンシブ対応の画像セットが含まれ、画面サイズに応じて最適な画像が自動で選ばれます。

sizes属性では、画面幅600px以下の場合は100%の幅、それ以上では50%の幅で画像が表示されるよう設定されています。また、alt属性には投稿のタイトルが設定され、SEO対策やアクセシビリティ向上にも貢献します。

このコードを使用することで、アイキャッチ画像を効率的に表示しつつ、デバイスごとに適したサイズの画像を提供することができます。

まとめ

今回は管理画面「メディア設定」のWordPressで自動生成される画像サイズの使い方等について解説いたしました。

WordPressでは、画像をアップロードすると自動的に複数のサイズが生成される機能があります。この仕組みを理解し、適切に活用することで、サイトのパフォーマンス向上やSEO対策、効率的な開発に役立てることができます。

当記事では、管理画面「メディア設定」における画像自動生成の仕組みや、そのメリット・デメリットについて詳しく解説しました。
WordPressのリソースを最大限に活かし、最適な画像管理を行うことで、より快適なサイト運営を実現しましょう。