WordPressの画像サイズ完全ガイド｜最適な設定・変更方法・表示崩れを防ぐコツ
はじめに
WordPressでブログやサイトを運営していると、「画像をアップロードしたら表示が大きすぎる」「スマホで画像がはみ出す」「アイキャッチ画像が切れてしまう」「ページの表示速度が遅い」といった悩みに直面することがあります。
その原因の多くは、WordPressの画像サイズ設定や、アップロードする画像の大きさが適切でないことにあります。
WordPressでは、画像を1枚アップロードすると、サムネイル・中サイズ・大サイズなど複数の画像サイズが自動生成されます。さらに、使用しているテーマやプラグインによって独自の画像サイズが追加されることもあります。そのため、何も考えずに画像を追加し続けると、不要な画像ファイルが増えたり、表示速度の低下につながったりする可能性があります。
この記事では、WordPressの画像サイズについて、基本知識からおすすめ設定、変更方法、画像が崩れる原因、表示速度を改善するコツまでまとめて解説します。これからブログを始める方はもちろん、すでに運営中のサイトで画像まわりを見直したい方も参考にしてください。
1. WordPressの画像サイズでまず押さえるべき基本
1-1. WordPressにおける「画像サイズ」とは
WordPressにおける画像サイズとは、主に画像の横幅・縦幅をピクセル単位で表したものです。たとえば「1200×800px」の画像であれば、横幅が1200ピクセル、縦幅が800ピクセルという意味になります。
WordPressでは、投稿本文に挿入する画像、アイキャッチ画像、一覧ページのサムネイル、ヘッダー画像など、使う場所によって適した画像サイズが異なります。本文エリアの横幅が800px程度なのに、4000pxを超える巨大な画像をそのまま使うと、必要以上に重くなります。一方で、横幅300pxの画像を大きく引き伸ばして表示すると、ぼやけた印象になります。
つまり、WordPressの画像サイズは「どこに、どの大きさで表示するか」を基準に考えることが重要です。
1-2. 画像サイズとファイルサイズの違い
画像サイズとファイルサイズは混同されやすいですが、意味が異なります。
画像サイズは、横幅と縦幅の寸法です。たとえば「1200×800px」のように表します。一方、ファイルサイズは画像データの重さで、「KB」や「MB」で表します。
たとえば、同じ1200×800pxの画像でも、圧縮率や保存形式によってファイルサイズは大きく変わります。JPEGで適度に圧縮した画像は200KB程度でも、PNG形式で保存すると1MB以上になることがあります。
WordPressで画像を最適化するには、表示に必要な画像サイズに調整したうえで、ファイルサイズも軽くすることが大切です。画像の見た目だけでなく、ページの読み込み速度にも大きく関わります。
1-3. 画像サイズが表示速度・SEO・デザインに与える影響
画像サイズは、サイトの表示速度、SEO、デザインの安定性に影響します。
画像が大きすぎると、ブラウザが読み込むデータ量が増え、ページ表示が遅くなります。表示速度が遅いページはユーザーの離脱につながりやすく、検索エンジンからの評価にも悪影響を与える可能性があります。
また、画像サイズが適切でないと、レイアウト崩れの原因にもなります。たとえば、アイキャッチ画像の縦横比がテーマの推奨比率と合っていない場合、画像の一部が切れたり、意図しない余白が出たりします。
画像は記事の読みやすさや印象を大きく左右する要素です。きれいに見せるだけでなく、軽く、崩れにくく、検索にも伝わりやすい状態に整えることが大切です。
1-4. 大きすぎる画像・小さすぎる画像で起こる問題
大きすぎる画像を使うと、次のような問題が起こります。
表示速度が遅くなる、サーバー容量を圧迫する、バックアップに時間がかかる、スマホユーザーの通信量が増える、画像編集やメディアライブラリの管理が重くなる、といった点です。
一方で、小さすぎる画像にも問題があります。表示サイズに対して元画像が小さいと、画像が引き伸ばされてぼやけます。特にアイキャッチ画像やメインビジュアルなど、目立つ場所では粗さが目立ち、サイト全体の印象が悪くなります。
画像サイズは「大きければ安心」でも「小さければ軽くてよい」でもありません。表示場所に対して、少し余裕のあるサイズを用意するのが基本です。
2. WordPressで自動生成される画像サイズの種類
2-1. サムネイル・中サイズ・大サイズ・フルサイズの違い
WordPressでは、画像をアップロードすると、元画像とは別に複数の画像サイズが自動生成されます。代表的なものは、サムネイル、中サイズ、大サイズ、フルサイズです。
サムネイルは、記事一覧や関連記事、ウィジェットなどで使われる小さな画像です。中サイズは、投稿本文内に小さめに画像を挿入したいときに使われます。大サイズは、本文幅いっぱいに近い大きさで画像を表示したいときに便利です。フルサイズは、アップロードした元画像そのものです。
WordPressのテーマハンドブックでも、画像アップロード時にWordPressが定義されたサブサイズを生成する仕組みが説明されています。
2-2. WordPressが複数サイズの画像を作る理由
WordPressが複数サイズの画像を作る理由は、表示場所に応じて適切な画像を使い分けるためです。
たとえば、記事一覧で100×100px程度に表示するサムネイルに、横幅2000pxの画像を読み込む必要はありません。逆に、本文内で大きく見せたい画像に小さなサムネイルを使うと、ぼやけてしまいます。
WordPressは、ブラウザや表示エリアに応じて適切な画像を選びやすくするため、複数の画像サイズを用意します。これにより、画質を保ちながら、余計なデータ読み込みを減らすことができます。
2-3. テーマやプラグインが追加する画像サイズ
WordPress標準の画像サイズに加えて、テーマやプラグインが独自の画像サイズを追加することがあります。
たとえば、ブログカード用、スライダー用、商品一覧用、ギャラリー用、ランキング表示用などです。テーマによっては、アイキャッチ画像専用のサイズや、トップページ用の大きな画像サイズを自動生成する場合もあります。
開発者向けには、add_image_size()を使って独自の画像サイズを登録できます。この関数では、横幅・縦幅・トリミング方法を指定して画像サイズを追加できます。
便利な仕組みですが、使わない画像サイズまで大量に生成されると、サーバー容量を圧迫します。テーマやプラグインを変更したあとに、不要な画像サイズが残り続けることもあります。
2-4. 使われていない画像サイズが増える原因
使われていない画像サイズが増える主な原因は、テーマ変更、プラグイン追加、過去の設定変更です。
たとえば、以前使っていたテーマが独自のサムネイルサイズを生成していた場合、テーマを変えても過去に生成された画像ファイルは自動で消えません。また、画像ギャラリー系やEC系のプラグインを導入すると、用途ごとに複数の画像サイズが追加されることがあります。
さらに、メディア設定で画像サイズを変更しても、過去にアップロードした画像が自動で新しいサイズに作り直されるわけではありません。そのため、古いサイズと新しいサイズが混在することがあります。
不要な画像サイズが増えている場合は、実際に使われているサイズを確認し、必要に応じてサムネイルの再生成や整理を行いましょう。
3. WordPress画像サイズのおすすめ設定
3-1. ブログ記事本文に適した画像サイズ
ブログ記事本文に使う画像は、本文エリアの横幅に合わせるのが基本です。
一般的なブログでは、本文カラムの横幅は700〜900px程度であることが多いため、記事内画像は横幅1000〜1200px前後を目安にすると扱いやすくなります。Retinaディスプレイなど高解像度環境を考慮する場合でも、横幅1200〜1600px程度あれば、多くのブログでは十分です。
ただし、写真を大きく見せるギャラリーサイトやポートフォリオサイトでは、もう少し大きめの画像が必要になる場合があります。反対に、テキスト中心のブログであれば、横幅1000px程度でも十分きれいに表示できます。
重要なのは、本文幅より極端に大きい画像をそのまま使わないことです。スマホやPCでの表示幅を確認しながら、必要十分なサイズに調整しましょう。
3-2. アイキャッチ画像におすすめのサイズ
アイキャッチ画像は、記事の第一印象を決める重要な画像です。トップページ、記事一覧、SNSシェア、関連記事など、さまざまな場所で使われます。
おすすめのサイズは、横幅1200px以上です。比率は、16:9なら1200×675px、1.91:1なら1200×630px、4:3なら1200×900pxが目安になります。
ブログやオウンドメディアでは、1200×630pxまたは1200×675pxが使いやすいサイズです。SNSでシェアされたときにも見栄えがよく、多くのテーマで扱いやすい比率です。
ただし、最適なアイキャッチ画像サイズはテーマによって異なります。使用しているテーマの公式マニュアルに推奨サイズがある場合は、それを優先してください。
3-3. サムネイル画像におすすめのサイズ
サムネイル画像は、記事一覧、関連記事、人気記事、サイドバーなどで表示される小さな画像です。
WordPressのメディア設定では、サムネイルサイズを指定できます。一般的には、150×150px、300×300px、320×180px、400×225pxなどがよく使われます。
正方形で統一したい場合は150×150pxや300×300px、記事一覧で横長に見せたい場合は320×180pxや400×225pxが適しています。ブログカードやカード型デザインでは、16:9の横長サムネイルが使われることが多いです。
サムネイルは小さく表示されるため、ファイルサイズを軽くしやすい画像です。ただし、小さすぎる画像を高解像度ディスプレイで表示すると粗く見える場合があるため、表示サイズの2倍程度を目安にしておくと安心です。
3-4. ヘッダー・メインビジュアルに適した画像サイズ
ヘッダー画像やメインビジュアルは、サイトの上部に大きく表示されるため、本文画像よりも大きめのサイズが必要です。
一般的な目安は、横幅1920px前後です。フルワイドで表示する場合は1920×800px、1920×900px、1920×1080pxなどが使われます。高さはデザインによって大きく変わるため、テーマの推奨サイズを確認するのが確実です。
ただし、メインビジュアルはファイルサイズが大きくなりやすいため注意が必要です。横幅1920pxの画像を使う場合でも、圧縮して300KB前後、重くても500KB以内を目指すと扱いやすくなります。
ファーストビューに表示される画像は、ページ表示速度やCore Web Vitalsにも影響します。画質を保ちながら、できるだけ軽量化しましょう。
3-5. スマホ表示を考慮した画像サイズの目安
スマホ表示では、横幅は多くの場合360〜430px程度の画面に収まります。しかし、高解像度ディスプレイでは実際の表示幅より大きな画像が必要になることがあります。
そのため、スマホだけを考えるなら横幅800px程度でも十分なケースが多いですが、PC表示や高解像度環境も考慮すると、ブログ本文画像は横幅1000〜1200px程度で用意しておくとバランスがよくなります。
スマホで重要なのは、画像の横幅だけではありません。縦に長すぎる画像はスクロール量が増え、読みにくくなります。説明用のスクリーンショットや図解は、文字が読めるサイズに調整しつつ、余白を削ってコンパクトに見せるのがおすすめです。
4. WordPressで画像サイズを設定・変更する方法
4-1. 管理画面の「メディア設定」から変更する方法
WordPressの基本的な画像サイズは、管理画面から変更できます。
管理画面にログインし、「設定」から「メディア」を開きます。ここで、サムネイルのサイズ、中サイズの最大幅・高さ、大サイズの最大幅・高さを設定できます。
サムネイルサイズでは、画像を指定サイズにトリミングするかどうかも選べます。正方形サムネイルをきれいにそろえたい場合はトリミングを有効にし、画像全体を見せたい場合はトリミングを避けるとよいでしょう。
ただし、ここで設定を変更しても、すでにアップロード済みの画像には自動で反映されません。既存画像にも新しいサイズを適用したい場合は、サムネイルの再生成が必要です。
4-2. 投稿・固定ページ内で画像サイズを選ぶ方法
投稿や固定ページに画像を挿入するときは、WordPress上で画像サイズを選べます。
画像ブロックを追加し、メディアライブラリから画像を選択すると、サイドバーや画像設定で「サムネイル」「中」「大」「フルサイズ」などを選択できます。通常の記事本文では、「大」またはテーマに合ったカスタムサイズを選ぶとよいでしょう。
フルサイズは元画像をそのまま使うため、画像が大きい場合はページが重くなります。特に、スマホで撮影した写真をそのままアップロードしている場合、横幅3000px以上、ファイルサイズ数MBということもあります。本文に挿入する画像としては過剰な場合が多いため、必要に応じて大サイズや中サイズを選びましょう。
4-3. ブロックエディターで画像の表示サイズを調整する方法
ブロックエディターでは、画像ブロックを選択すると、表示サイズを調整できます。
画像の角をドラッグして見た目の大きさを変更したり、サイドバーで幅や高さを指定したりできます。また、パーセンテージ指定や「幅広」「全幅」などの配置オプションが使えるテーマもあります。
ただし、ここで変更されるのは基本的に表示上のサイズです。元画像のファイルサイズが小さくなるわけではありません。たとえば、横幅4000pxの画像を画面上で600pxに縮小表示しても、元の大きな画像を読み込んでいれば表示速度は改善されにくいです。
ブロックエディターでの調整は、レイアウトを整えるための機能と考えましょう。画像そのものを軽くしたい場合は、アップロード前のリサイズや圧縮が必要です。
4-4. アップロード済み画像のサイズを変更する方法
アップロード済み画像のサイズを変更する方法はいくつかあります。
1枚だけ調整したい場合は、メディアライブラリから画像を開き、「画像を編集」を選択します。ここで、画像の拡大縮小、トリミング、回転、反転などができます。
複数の画像をまとめてリサイズしたい場合は、画像最適化プラグインやリサイズ系プラグインを使う方法があります。たとえば、アップロード済み画像を一括で圧縮したり、最大横幅を指定してリサイズしたりできるプラグインがあります。
ただし、一括処理を行う前には必ずバックアップを取りましょう。画像サイズを変更すると、元に戻すのが難しい場合があります。
4-5. functions.phpで独自の画像サイズを追加する方法
テーマに独自の画像サイズを追加したい場合は、functions.phpにコードを追加します。
たとえば、次のように記述すると、横幅800px、高さ450pxのカスタム画像サイズを追加できます。
PHPadd_image_size( 'custom-thumbnail', 800, 450, true );
最後のtrueは、指定したサイズにトリミングする設定です。falseまたは省略した場合は、画像の縦横比を保ったまま縮小されます。add_image_size()では、ハードクロップやソフトクロップ、クロップ位置の指定も可能です。
ただし、functions.phpを直接編集する場合は注意が必要です。記述ミスがあるとサイトが表示されなくなることがあります。子テーマを使う、事前にバックアップを取る、可能であれば開発環境で試す、といった対策を行いましょう。
5. アップロード前に画像サイズを最適化する方法
5-1. WordPressにアップロードする前にリサイズすべき理由
画像は、WordPressにアップロードする前にリサイズしておくのがおすすめです。
WordPress側でも自動で複数サイズを生成できますが、元画像が大きすぎると、アップロード時の処理が重くなります。サーバー環境によっては、アップロードエラーや画像処理エラーが起こることもあります。
また、元画像を適切なサイズにしておけば、サーバー容量の節約にもなります。特に、スマホやカメラで撮影した写真は、横幅3000〜6000px、ファイルサイズ数MBになることがあります。ブログ本文やアイキャッチに使うだけなら、そこまで大きな画像は不要です。
アップロード前に横幅を1200〜2000px程度に調整し、圧縮してからWordPressに入れるだけでも、サイト全体の軽量化につながります。
5-2. 画像の横幅・縦幅を調整するポイント
画像の横幅・縦幅は、使う場所に合わせて調整します。
本文画像なら横幅1000〜1200px前後、アイキャッチ画像なら1200×630pxや1200×675px、ヘッダー画像なら1920px前後が目安です。縦幅はデザインや用途によって変わりますが、無駄な余白を残さないことが大切です。
スクリーンショットを使う場合は、不要なブラウザ枠や余白をトリミングしましょう。図解画像では、文字が小さすぎるとスマホで読みにくくなります。スマホ表示でも文字が読めるかを確認しながら作成すると、ユーザーに親切です。
画像は、単に小さくすればよいわけではありません。読みやすさ、見やすさ、軽さのバランスを考えて調整しましょう。
5-3. JPEG・PNG・WebPの使い分け
画像形式は、内容に応じて使い分けましょう。
写真にはJPEGが向いています。色数が多い写真でもファイルサイズを抑えやすく、ブログ記事の写真に適しています。
ロゴ、アイコン、図解、スクリーンショットなど、文字や線が多い画像にはPNGが向いています。ただし、PNGはファイルサイズが大きくなりやすいため、必要以上に多用しないようにしましょう。
WebPは、JPEGやPNGより軽量化しやすい画像形式です。WordPressは5.8でWebP画像のサポートを追加しており、WebPでもレスポンシブ画像や遅延読み込みの恩恵を受けられると説明されています。
現在は多くの環境でWebPが使いやすくなっていますが、古いブラウザや特殊な環境を考慮する場合は、JPEGやPNGとの互換性も確認しておきましょう。
5-4. 画質を落としすぎずに圧縮するコツ
画像圧縮では、画質と軽さのバランスが重要です。
圧縮しすぎると、写真にノイズが出たり、文字がにじんだりします。逆に、画質を優先しすぎるとファイルサイズが大きくなり、表示速度が低下します。
JPEG写真の場合は、品質を70〜85%程度に設定すると、見た目を大きく損なわずに軽量化しやすいです。図解やスクリーンショットは、文字が読みにくくならない範囲で圧縮します。
圧縮後は、必ず実際の表示サイズで確認しましょう。拡大して細部を見るより、ユーザーが読む画面サイズで自然に見えるかを基準にすることが大切です。
5-5. 画像ファイル名と代替テキストの設定
画像をアップロードする前に、ファイル名も整えておきましょう。
たとえば、IMG_1234.jpgのようなファイル名よりも、wordpress-image-size.jpgやwordpress-eyecatch-size.jpgのように内容がわかる名前のほうが管理しやすくなります。日本語ファイル名は環境によって文字化けすることがあるため、半角英数字とハイフンで設定するのがおすすめです。
また、WordPressにアップロードした画像には、代替テキストを設定しましょう。代替テキストは、画像が表示されないときやスクリーンリーダーで読み上げるときに使われます。SEOだけを意識してキーワードを詰め込むのではなく、画像の内容が自然に伝わる説明文にすることが大切です。
たとえば、WordPressのメディア設定画面の画像であれば、「WordPressのメディア設定で画像サイズを変更する画面」のように具体的に書くとよいでしょう。
6. アップロード後に画像サイズを変更・再生成する方法
6-1. メディアライブラリで画像を編集する方法
WordPressのメディアライブラリでは、アップロード済み画像を簡単に編集できます。
管理画面から「メディア」を開き、編集したい画像を選択します。「画像を編集」をクリックすると、トリミング、回転、反転、拡大縮小などの操作ができます。
画像の一部を切り抜きたい場合はトリミングを使います。画像全体を小さくしたい場合は、拡大縮小で新しいサイズを指定します。
ただし、WordPress上での画像編集は簡易的な機能です。複雑な加工や高品質なリサイズをしたい場合は、画像編集ソフトやオンラインツールで調整してから再アップロードするほうが安心です。
6-2. 画像サイズ変更に便利なプラグイン
画像サイズの変更や最適化には、プラグインを使う方法もあります。
画像圧縮プラグインを使えば、アップロード時に自動で画像を圧縮したり、過去の画像を一括で軽量化したりできます。リサイズ機能を備えたプラグインでは、最大横幅を指定して、巨大な画像を自動で縮小することもできます。
また、サムネイル再生成プラグインを使えば、メディア設定やテーマ変更後に、既存画像のサムネイルを作り直せます。
ただし、プラグインを入れすぎると管理が複雑になり、サイトの動作に影響することがあります。画像圧縮、WebP変換、サムネイル再生成など、目的を整理して必要なものだけを導入しましょう。
6-3. サムネイルを再生成する方法
メディア設定を変更したり、テーマを変更したりした場合、既存画像のサムネイルを再生成する必要があります。
たとえば、以前は150×150pxのサムネイルを使っていたけれど、新しいテーマでは400×225pxのサムネイルが必要になった場合、過去画像にはそのサイズが存在しないことがあります。この状態では、記事一覧の画像がぼやけたり、意図しないサイズで表示されたりします。
サムネイル再生成プラグインを使えば、既存の画像から新しいサイズの画像を作成できます。WordPressの公式ドキュメントでも、既存のアイキャッチ画像は関数を設定しただけではリサイズされず、再生成が必要になるケースが説明されています。
再生成前には、バックアップを取っておくと安心です。
6-4. 不要な画像サイズを削除・整理する方法
不要な画像サイズが増えている場合は、整理を検討しましょう。
まず、どの画像サイズが実際に使われているかを確認します。テーマのテンプレート、CSS、プラグイン設定、記事一覧や関連記事の表示をチェックしましょう。
使われていないサイズが明確であれば、今後生成されないように設定を見直します。開発者向けには、remove_image_size()を使って登録済みの画像サイズを削除する方法もあります。ただし、予約済みの画像サイズには使えない制限があります。
すでに生成された不要画像ファイルを削除する場合は、誤って必要な画像を消さないよう注意が必要です。専用プラグインを使う場合も、実行前に必ずバックアップを取りましょう。
6-5. 画像を差し替えるときの注意点
画像を差し替えるときは、画像URL、ファイル名、記事内での使用場所に注意しましょう。
WordPressでは、同じ見た目の画像でも、新しくアップロードすると別のURLになります。記事内に古い画像URLが残っていると、差し替えたつもりでも古い画像が表示され続けることがあります。
また、アイキャッチ画像を差し替える場合は、記事一覧、SNSシェア、関連記事などでどのように表示されるかも確認しましょう。比率が変わると、トリミング位置が変わったり、文字が切れたりする場合があります。
画像を差し替えたのに表示が変わらない場合は、ブラウザキャッシュ、WordPressキャッシュ、CDNキャッシュが残っている可能性もあります。キャッシュを削除してから再確認しましょう。
7. WordPressの画像表示が崩れる原因と対処法
7-1. 画像がぼやける・粗く表示される原因
画像がぼやける主な原因は、表示サイズに対して元画像が小さいことです。
たとえば、横幅400pxの画像を本文幅800pxで表示すると、画像が引き伸ばされて粗くなります。特に、文字入りの図解やスクリーンショットではぼやけが目立ちやすくなります。
対処法は、表示サイズより大きめの画像を用意することです。本文幅が800pxなら、横幅1000〜1200px程度の画像を使うと安心です。サムネイルやアイキャッチでも、テーマが求めるサイズ以上の元画像を用意しましょう。
また、WordPressで挿入する画像サイズが「サムネイル」になっていないかも確認してください。本文に大きく表示したい画像に小さなサムネイルを使っていると、ぼやける原因になります。
7-2. 画像が切れる・トリミングされる原因
画像が切れる原因は、テーマやWordPressの画像サイズ設定でトリミングが有効になっていることが多いです。
特に、サムネイル画像やアイキャッチ画像では、表示エリアに合わせるために中央部分だけが切り抜かれることがあります。人物の顔や文字が端にある画像では、重要な部分が切れてしまうことがあります。
対処法としては、画像の重要な要素を中央に配置する、テーマの推奨比率に合わせて画像を作る、トリミングなしの画像サイズを使う、といった方法があります。
サムネイルを正方形に統一するデザインでは、横長画像や縦長画像の一部が切れるのは避けにくいです。あらかじめトリミングされる前提で画像を作成しましょう。
7-3. スマホで画像がはみ出す原因
スマホで画像がはみ出す原因は、CSSやHTMLで固定幅が指定されていることです。
たとえば、画像にwidth: 800px;のような固定幅が設定されていると、画面幅が390pxのスマホでは横にはみ出してしまいます。
対処法は、CSSで画像に次のような指定を入れることです。
CSSimg {
max-width: 100%;
height: auto;
}
これにより、画像は親要素の幅を超えず、縦横比を保ったまま縮小されます。
多くのWordPressテーマでは標準でレスポンシブ対応されていますが、独自CSSや古いテーマを使っている場合は確認が必要です。記事内に直接HTMLで画像サイズを固定している場合も、スマホ表示で崩れることがあります。
7-4. アイキャッチ画像の比率が合わないときの対処法
アイキャッチ画像の比率がテーマの表示枠と合っていないと、画像が切れたり、余白が出たりします。
たとえば、テーマ側が16:9の横長画像を前提にしているのに、正方形の画像を設定すると、上下が切れたり、左右に余白が出たりすることがあります。
対処法は、テーマの推奨サイズと比率を確認し、それに合わせてアイキャッチ画像を作成することです。ブログでよく使われる比率は、16:9、1.91:1、4:3、1:1です。どの比率が最適かはテーマやデザインによって異なります。
アイキャッチ画像に文字を入れる場合は、端に文字を置かないようにしましょう。SNSや記事一覧でトリミングされたときに、タイトル文字が切れる可能性があります。重要な文字や人物は中央寄りに配置すると安全です。
7-5. テーマ変更後に画像サイズが崩れた場合の対処法
テーマ変更後に画像サイズが崩れるのは、新しいテーマが求める画像サイズと、既存画像のサイズが合っていないためです。
テーマによって、記事一覧のサムネイルサイズ、アイキャッチ画像の比率、本文幅、ヘッダー画像の推奨サイズは異なります。以前のテーマでは問題なかった画像でも、新しいテーマではぼやけたり、切れたりすることがあります。
対処法は、まず新しいテーマの推奨画像サイズを確認することです。そのうえで、必要に応じてサムネイルを再生成します。アイキャッチ画像の比率が大きく変わる場合は、重要な記事から順に画像を作り直すとよいでしょう。
テーマ変更時は、トップページ、記事一覧、個別記事、スマホ表示、SNSシェア画像まで確認しておくと安心です。
8. 表示速度を改善する画像サイズ最適化のコツ
8-1. 画像サイズとページ表示速度の関係
画像は、ページ全体のデータ量の中でも大きな割合を占めやすい要素です。そのため、画像サイズを最適化するだけで、表示速度が改善することがあります。
特に、ファーストビューに大きな画像を複数使っている場合や、記事内に高解像度の写真を多く掲載している場合は、画像の重さが表示速度に直結します。
表示速度を改善するには、まず画像の横幅を必要以上に大きくしないことが大切です。次に、JPEG、PNG、WebPなど適切な形式を選び、圧縮してファイルサイズを抑えます。
また、同じ画像を何度も使い回す場合は、メディアライブラリから既存画像を選ぶようにしましょう。似た画像を何度もアップロードすると、サーバー容量も管理コストも増えてしまいます。
8-2. 遅延読み込みを活用する
遅延読み込みとは、ページを開いた瞬間にすべての画像を読み込むのではなく、ユーザーがスクロールして画像が表示位置に近づいたタイミングで読み込む仕組みです。
WordPressでは、5.5以降、画像に対してネイティブのloading属性を使った遅延読み込みが標準で導入されています。
遅延読み込みを活用すると、ページ初期表示時の読み込み量を減らせます。特に、画像が多い記事や長文記事では効果が期待できます。
ただし、ファーストビューに表示される重要な画像まで遅延読み込みされると、表示が遅れて見えることがあります。メインビジュアルや記事冒頭の重要画像は、必要に応じて遅延読み込みの対象から外すなど、バランスを取ることが大切です。
8-3. WebP変換で画像を軽量化する
WebPは、画像を軽量化しやすい形式です。写真にも図解にも使いやすく、JPEGやPNGよりファイルサイズを抑えられることがあります。
WordPressは5.8でWebP画像をサポートしているため、WebP画像をメディアライブラリにアップロードして利用できます。
既存画像をWebPに変換したい場合は、画像最適化プラグインを利用する方法があります。プラグインによっては、JPEGやPNGを自動でWebP化し、対応ブラウザにはWebPを配信し、非対応環境には元画像を配信する機能があります。
ただし、WebP化だけで安心せず、元の画像サイズも見直しましょう。横幅4000pxの画像をWebPにしても、表示に必要なサイズより大きすぎれば無駄が残ります。リサイズとWebP変換を組み合わせるのが効果的です。
8-4. レスポンシブ画像を正しく表示させる
レスポンシブ画像とは、画面サイズや表示環境に応じて、適切な画像を読み込む仕組みです。
WordPressでは、画像のsrcsetやsizes属性を使って、複数サイズの画像から適切なものをブラウザが選びやすくしています。WordPress 5.3では、より大きなディスプレイ向けに1536pxと2048pxのサブサイズが追加され、srcsetやsizesに適した画像を生成する目的が説明されています。
レスポンシブ画像を正しく機能させるには、WordPressの標準機能を無理に壊さないことが大切です。画像HTMLを手動で大きく書き換えたり、テーマ側で不適切なサイズ指定をしていたりすると、適切な画像が選ばれにくくなります。
基本的には、WordPressの画像ブロックやメディアライブラリを使って画像を挿入し、テーマのレスポンシブ対応に沿って表示させるのがおすすめです。
8-5. Core Web Vitalsを意識した画像最適化
Core Web Vitalsを意識する場合、画像では特にLCPとCLSに注意しましょう。
LCPは、ページの主要コンテンツが表示されるまでの速度に関わる指標です。ファーストビューに大きなアイキャッチ画像やメインビジュアルがある場合、その画像が重いとLCPが悪化しやすくなります。
CLSは、ページ読み込み中のレイアウトのズレに関わる指標です。画像に幅と高さが指定されていない場合、画像が読み込まれたタイミングで文章が押し下げられ、レイアウトが動くことがあります。
対策としては、ファーストビュー画像を軽量化する、適切な画像サイズを指定する、画像の幅と高さを明示する、重要画像を遅延読み込みしすぎない、といった方法があります。
WordPress 6.7では、遅延読み込み画像に対するsizes="auto"の対応が追加され、ブラウザがレイアウト幅をもとに画像を選びやすくする改善が行われています。
9. 画像サイズ変更時の注意点
9-1. 元画像を削除する前にバックアップする
画像サイズを変更したり、不要画像を削除したりする前には、必ずバックアップを取りましょう。
特に、一括リサイズやサムネイル再生成、未使用画像削除プラグインを使う場合は注意が必要です。誤って必要な画像を削除すると、記事内の画像が表示されなくなることがあります。
バックアップは、WordPress全体のバックアップに加えて、uploadsフォルダだけでも保存しておくと安心です。画像ファイルは記事の見た目や検索流入にも関わる重要な資産です。容量削減を急ぐ前に、復元できる状態を作っておきましょう。
9-2. 既存記事への影響を確認する
画像サイズを変更すると、既存記事の表示に影響する場合があります。
たとえば、本文内で画像サイズを指定している記事、独自HTMLで画像を挿入している記事、古いエディターで作成した記事などでは、新しい設定が想定どおり反映されないことがあります。
設定変更後は、アクセスの多い記事から順に確認しましょう。特に、アイキャッチ画像、記事冒頭の画像、比較表や図解など、ユーザー体験に影響しやすい画像は優先してチェックします。
PCだけでなく、スマホやタブレットでも表示を確認することが大切です。PCでは問題なくても、スマホで文字が小さすぎたり、画像がはみ出したりすることがあります。
9-3. 画像URLの変更によるリンク切れを防ぐ
画像を新しくアップロードし直すと、基本的には画像URLが変わります。
記事内で古い画像URLを直接指定している場合、新しい画像に差し替えても反映されないことがあります。また、外部サイトやSNSで画像URLが使われている場合、削除によってリンク切れが起こる可能性もあります。
画像を差し替える場合は、既存URLを維持できるプラグインを使う方法もあります。ただし、ファイル名や形式が変わる場合は慎重に作業しましょう。
リンク切れを防ぐには、差し替え前にどの記事でその画像が使われているかを確認し、必要に応じて記事内の画像を更新します。作業後は、リンク切れチェックツールやプラグインで確認すると安心です。
9-4. プラグインの入れすぎに注意する
画像最適化に便利なプラグインは多くありますが、入れすぎには注意が必要です。
画像圧縮、WebP変換、遅延読み込み、CDN、キャッシュ、サムネイル再生成など、似た機能を持つプラグインを複数入れると、機能が重複して不具合の原因になることがあります。
たとえば、複数のプラグインが同時に遅延読み込みを制御すると、画像が表示されない、表示が遅れる、HTMLが複雑になるといった問題が起こることがあります。
プラグインは、目的ごとに必要最小限に絞りましょう。導入後は、表示速度だけでなく、画像が正しく表示されているか、スマホで崩れていないかも確認してください。
9-5. テーマごとの推奨サイズを確認する
WordPressの画像サイズは、テーマによって最適解が異なります。
同じアイキャッチ画像でも、あるテーマでは16:9がきれいに見え、別のテーマでは4:3や1:1が推奨されることがあります。記事一覧のカードデザイン、トップページのスライダー、ヘッダー画像、プロフィール画像なども、テーマごとに適したサイズがあります。
そのため、一般的なおすすめサイズだけで決めるのではなく、使用中のテーマの公式マニュアルを確認しましょう。テーマによっては、推奨アイキャッチサイズやヘッダー画像サイズが明記されています。
テーマ変更を予定している場合は、変更後の画像比率も考慮しておくと、後から大量の画像を作り直す手間を減らせます。
10. WordPress画像サイズに関するよくある質問
10-1. WordPressにアップロードする画像サイズの上限は？
WordPressにアップロードできる画像サイズの上限は、WordPress本体だけでなく、サーバーの設定にも左右されます。
管理画面のメディアアップロード画面には、アップロード可能な最大ファイルサイズが表示されます。たとえば、上限が2MB、8MB、32MB、64MBなど、サーバー環境によって異なります。
ただし、上限までアップロードできるからといって、大きな画像をそのまま使うのはおすすめしません。ブログ記事やアイキャッチ画像であれば、事前にリサイズ・圧縮し、数百KB程度に抑えるのが理想です。
画像が大きすぎてアップロードできない場合は、画像編集ソフトやオンライン圧縮ツールで軽量化してから再度アップロードしましょう。
10-2. 画像サイズは大きいほどきれいに表示される？
画像サイズは、大きければ大きいほどよいわけではありません。
確かに、表示サイズに対して元画像が小さすぎるとぼやけます。しかし、表示幅が800pxの場所に横幅4000pxの画像を使っても、見た目の差は小さい一方で、ファイルサイズは大きくなりやすいです。
大切なのは、表示サイズに対して十分な解像度を確保することです。本文画像なら横幅1000〜1200px程度、アイキャッチなら横幅1200px以上を目安にし、必要以上に巨大な画像は避けましょう。
高画質と表示速度のバランスを取ることが、WordPressの画像サイズ最適化では重要です。
10-3. アイキャッチ画像の最適な比率は？
アイキャッチ画像の最適な比率は、テーマや表示場所によって異なります。
一般的には、16:9、1.91:1、4:3、1:1がよく使われます。ブログ記事やSNSシェアを考えるなら、1200×630pxや1200×675pxが扱いやすいサイズです。
ただし、テーマが正方形サムネイルを採用している場合や、記事一覧で縦長カードを使っている場合は、別の比率が適していることもあります。
最も確実なのは、使用中のテーマの推奨サイズを確認することです。複数の場所で使われることを考えると、重要な文字や人物を中央に配置し、端が多少切れても問題ないデザインにしておくと安心です。
10-4. アップロード済み画像を一括でリサイズできる？
アップロード済み画像は、プラグインを使えば一括でリサイズできます。
画像最適化プラグインやリサイズ専用プラグインを使うと、最大横幅を指定して既存画像を縮小したり、ファイルサイズを圧縮したりできます。また、サムネイル再生成プラグインを使えば、メディア設定やテーマ変更に合わせて新しい画像サイズを作り直せます。
ただし、一括処理は元に戻すのが難しい場合があります。実行前には、必ずバックアップを取りましょう。まずは少数の画像で試して、問題がないことを確認してから全体に適用するのがおすすめです。
10-5. 画像サイズを変更しても表示が変わらない原因は？
画像サイズを変更しても表示が変わらない場合、いくつかの原因が考えられます。
まず、メディア設定を変更しても、過去にアップロードした画像には自動で反映されません。既存画像にはサムネイル再生成が必要です。
次に、記事内でフルサイズ画像や固定サイズが指定されている場合、メディア設定の変更が反映されにくいことがあります。画像ブロックの設定やHTMLを確認しましょう。
また、キャッシュが原因で古い画像が表示されている可能性もあります。ブラウザキャッシュ、WordPressのキャッシュプラグイン、サーバーキャッシュ、CDNキャッシュを削除してから再確認してください。
それでも変わらない場合は、テーマ側で画像サイズが固定されている可能性があります。テーマの設定やテンプレート、CSSを確認しましょう。
まとめ
WordPressの画像サイズは、サイトの見た目、表示速度、SEO、ユーザー体験に大きく関わります。
基本は、画像を使う場所に合わせて適切なサイズを用意することです。本文画像なら横幅1000〜1200px前後、アイキャッチ画像なら1200×630pxや1200×675px、ヘッダーやメインビジュアルなら横幅1920px前後を目安にすると、多くのサイトで扱いやすくなります。
また、WordPressでは画像アップロード時に複数のサイズが自動生成されます。サムネイル、中サイズ、大サイズ、フルサイズの違いを理解し、必要な場所で適切なサイズを選びましょう。テーマやプラグインによって独自サイズが追加されることもあるため、不要な画像サイズが増えすぎないように管理することも大切です。
画像を最適化する際は、アップロード前のリサイズと圧縮が効果的です。JPEG、PNG、WebPを使い分け、ファイルサイズを抑えながら見やすい画質を保ちましょう。WordPressの遅延読み込みやレスポンシブ画像の仕組みも活用すれば、表示速度の改善につながります。
画像がぼやける、切れる、スマホではみ出す、テーマ変更後に崩れるといった問題は、画像サイズや比率、CSS、サムネイル再生成で解決できることが多いです。
WordPressの画像サイズは、一度整えて終わりではありません。テーマ変更、デザイン変更、表示速度改善のタイミングで定期的に見直し、軽くて見やすいサイトを維持していきましょう。