WordPressの画像サイズ完全ガイド｜最適な目安・変更方法・表示速度を落とさない設定まで解説

はじめに

WordPressでサイトを運営していると、「画像サイズは何pxにすればいいのか」「アイキャッチ画像が切れる」「スマホで画像がぼやける」「画像が重くて表示速度が遅い」といった悩みによく直面します。

画像は記事の読みやすさやデザイン性を高める一方で、サイズ設定を間違えるとページ表示速度の低下、SEO評価の悪化、レイアウト崩れ、画質劣化の原因になります。特にWordPressでは、画像をアップロードすると複数のサイズが自動生成されるため、「元画像のサイズ」「表示されるサイズ」「自動生成されるサイズ」を分けて理解することが重要です。

この記事では、WordPressの画像サイズについて、最適な目安、変更方法、自動生成の仕組み、表示速度を落とさない最適化方法、よくある失敗の対処法まで詳しく解説します。

1. WordPressの画像サイズでまず押さえるべき基本

1-1. 「画像サイズ」には横幅・高さとファイル容量の2つの意味がある

WordPressで「画像サイズ」と言う場合、主に2つの意味があります。

1つ目は、画像の横幅と高さです。たとえば「1200×800px」のように、ピクセル数で表されます。これは画像が画面上でどれくらいの大きさで表示されるか、またどれくらい高精細に見えるかに関係します。

2つ目は、画像ファイルの容量です。たとえば「150KB」「1.2MB」のように表されます。これはページの読み込み速度に大きく影響します。

WordPressの画像最適化では、この2つを同時に考える必要があります。横幅が大きすぎる画像は容量も重くなりやすく、容量が大きい画像は表示速度を遅くします。一方で、横幅が小さすぎる画像を無理に大きく表示すると、ぼやけたり粗く見えたりします。

1-2. WordPressで画像サイズが重要な理由

WordPressでは、記事本文、アイキャッチ、サムネイル、ヘッダー、ロゴ、背景画像、商品画像など、さまざまな場所で画像を使います。画像サイズが適切でないと、サイト全体の見た目や使いやすさに影響します。

たとえば、記事本文の表示幅が800pxなのに3000pxの画像をそのまま使うと、見た目は800pxに縮小されても、読み込み時には大きな画像データを読み込む可能性があります。逆に、表示幅800pxの場所に400pxの画像を使うと、拡大表示されて画質が落ちます。

WordPressでは、アップロードした画像から複数の中間サイズが生成され、テーマやブロック、ブラウザに応じて適切な画像が使われます。WordPressはレスポンシブ画像に対応しており、画像のHTMLにsrcsetやsizes属性を付与して、画面サイズに合った画像をブラウザが選びやすくする仕組みを持っています。

1-3. 画像が大きすぎると起こる表示速度・SEO・デザイン崩れの問題

画像が大きすぎると、ページの読み込みに時間がかかります。特にスマホ回線では、数MBの画像が複数あるだけで体感速度が大きく落ちます。ページ表示が遅いと、ユーザーが離脱しやすくなり、SEOにも悪影響を与える可能性があります。

また、テーマやCSSの設定によっては、大きすぎる画像がコンテンツ幅を超えて表示され、横スクロールやレイアウト崩れを起こすことがあります。WordPress公式ドキュメントでも、固定幅のコンテンツエリアより大きい画像を使うと、サイドバーやレイアウトに影響する可能性があると説明されています。

大きな画像を使うこと自体が悪いわけではありません。問題は、表示に必要なサイズを大きく超えた画像を、圧縮せずにそのまま使うことです。

1-4. 小さすぎる画像を使うと起こる画質劣化・ぼやけの問題

画像が小さすぎる場合も問題があります。たとえば、横幅400pxの画像を記事本文で800px幅に拡大表示すると、画像がぼやけたり、輪郭がギザギザに見えたりします。

特にアイキャッチ画像やメインビジュアルのように大きく表示される画像では、小さい画像を使うとサイト全体が安っぽく見えてしまいます。高解像度ディスプレイでは通常の画面よりも画像の粗さが目立ちやすいため、実際の表示幅より少し大きめの画像を用意するのが基本です。

目安としては、表示される最大幅の1.5〜2倍程度までを上限に考えると、画質と容量のバランスを取りやすくなります。

2. WordPressに最適な画像サイズの目安

2-1. 記事本文画像のおすすめサイズ

記事本文に挿入する画像は、本文エリアの横幅に合わせるのが基本です。多くのブログでは本文エリアの横幅が700〜900px前後に設定されているため、記事内画像は横幅800〜1200px程度を目安にすると扱いやすいです。

一般的なおすすめは以下です。

文字が入った図解やスクリーンショットは、圧縮しすぎると読みにくくなるため、少し大きめに作成してから圧縮するのがおすすめです。

2-2. アイキャッチ画像のおすすめサイズ

アイキャッチ画像は、記事一覧、関連記事、SNSシェア、トップページなど複数の場所で使われます。そのため、横長で汎用性の高いサイズにしておくと管理しやすくなります。

ブログやメディアサイトでは、1200×630px、1200×675px、1280×720pxあたりが使いやすいサイズです。SNSシェアも考慮するなら、1200×630pxが特におすすめです。Facebookのリンクシェア画像では、高解像度デバイス向けに少なくとも1200×630pxの画像が推奨されています。

ただし、テーマによってはアイキャッチ画像を正方形や縦長にトリミングする場合があります。テーマの推奨サイズがある場合は、まずテーマの仕様を確認しましょう。

2-3. サムネイル画像のおすすめサイズ

サムネイル画像は、記事一覧、関連記事、ランキング、ウィジェット、検索結果などで小さく表示される画像です。

WordPressのデフォルトでは、サムネイルは150×150pxが基準です。テーマによっては300×200px、320×180px、400×300pxなどの独自サイズが追加されることもあります。WordPressの代表的な画像サイズには、thumbnail、medium、medium_large、large、fullなどがあります。

サムネイルは小さいからといって低画質すぎる画像を使うと、一覧ページ全体の印象が悪くなります。記事一覧で大きめに表示されるテーマでは、最低でも横幅300〜600px程度のサムネイルが生成される設定にしておくと安心です。

2-4. ヘッダー・メインビジュアル画像のおすすめサイズ

ヘッダーやメインビジュアル画像は、サイトの第一印象を決める重要な画像です。PCでは横長に大きく表示され、スマホでは中央部分だけが見えることもあります。

一般的な目安は以下です。

ヘッダー画像は横幅を大きくしすぎると容量が重くなりやすいため、表示品質を確認しながらWebPやJPEGで圧縮しましょう。文字を画像内に入れる場合は、スマホで切れない位置に配置することも大切です。

2-5. ロゴ画像のおすすめサイズ

ロゴ画像は、表示されるサイズよりも少し大きめに作成します。たとえば、サイト上で横幅200pxで表示するロゴなら、横幅400px程度の画像を用意すると高解像度ディスプレイでもきれいに見えます。

一般的な目安は以下です。

ロゴは文字や線が含まれることが多いため、JPEGよりPNG、WebP、SVGが向いている場合があります。特にシンプルなロゴはSVGを使うと、拡大しても劣化せず軽量に扱えます。ただし、SVGのアップロードはセキュリティ面への配慮が必要なため、信頼できる方法で管理しましょう。

2-6. 背景画像のおすすめサイズ

背景画像は、画面いっぱいに表示されることが多いため、横幅1920px前後を目安にします。ただし、背景画像は装飾目的で使われることが多く、細部まで高精細である必要はありません。

写真背景なら1920×1080px程度、パターン背景なら小さな画像を繰り返し表示する方法もあります。背景画像は容量が大きくなりやすいため、なるべく圧縮し、必要に応じて暗いオーバーレイやぼかしを重ねると、多少画質を落としても自然に見せられます。

2-7. SNSシェア・OGP画像で推奨されるサイズ

SNSで記事をシェアしたときに表示されるOGP画像は、1200×630pxを基準にするのがおすすめです。横長の比率で、Facebook、X、LinkedInなど多くのSNSで使いやすいサイズです。

OGP画像では、中央に重要な文字や人物を配置し、端には重要な情報を置かないようにします。SNSやアプリによっては上下左右が少しトリミングされることがあるためです。

また、画像内の文字は小さくしすぎないようにしましょう。スマホのタイムラインでは画像が小さく表示されるため、タイトルを詰め込みすぎると読めなくなります。

2-8. スマホ表示を考慮した画像サイズの考え方

現在のWebサイトでは、スマホ表示を前提に画像サイズを考える必要があります。PCでは横長できれいに見えても、スマホでは画像が小さくなり、文字が読めないことがあります。

スマホ対応で意識したいポイントは以下です。

WordPressはレスポンシブ画像に対応していますが、元画像が大きすぎたり、テーマ側のsizes指定が適切でなかったりすると、必要以上に大きな画像が読み込まれることがあります。スマホでの見え方は、必ず実機またはブラウザの検証ツールで確認しましょう。

3. WordPressで自動生成される画像サイズの仕組み

3-1. サムネイル・中サイズ・大サイズ・フルサイズの違い

WordPressでは画像をアップロードすると、元画像とは別に複数のサイズが自動生成されます。主な種類は、サムネイル、中サイズ、大サイズ、フルサイズです。

フルサイズは最も高画質ですが、容量も大きくなりがちです。必要がない限り、記事本文ではフルサイズをそのまま使わず、大サイズや最適化済み画像を選ぶのがおすすめです。

3-2. WordPressのデフォルト画像サイズ

WordPressの代表的なデフォルト画像サイズは以下です。

WordPressのテーマハンドブックでは、thumbnail、medium、medium_large、large、fullなどの画像サイズが説明されており、medium_largeはデフォルトで横幅768px、高さ制限なしの中間サイズとして扱われます。

なお、管理画面の「設定 > メディア」から変更できるのは、主にサムネイル、中サイズ、大サイズです。メディア設定画面では、投稿本文に画像を挿入する際に使う最大寸法を設定できます。

3-3. テーマによって追加される画像サイズ

WordPressテーマは、独自の画像サイズを追加できます。たとえば、記事一覧用、カード型レイアウト用、スライダー用、商品一覧用、プロフィール用など、テーマが必要とする表示場所に合わせて画像サイズが登録されます。

このため、同じWordPressでも、使っているテーマによって生成される画像ファイルの数が変わります。高機能なテーマやECサイト向けテーマでは、1枚の画像から10種類以上のサイズが生成されることもあります。

テーマを変更すると、以前のテーマで使っていた画像サイズが不要になる場合があります。逆に、新しいテーマで必要なサイズが既存画像に生成されていない場合もあります。その場合は、サムネイル再生成が必要です。

3-4. アップロード時に複数サイズが生成される理由

WordPressが複数の画像サイズを生成する理由は、表示場所やデバイスに応じて適切な画像を使うためです。

たとえば、スマホの小さなサムネイル表示に2000pxの画像は不要です。小さな表示には小さな画像を、大きな表示には大きな画像を使うことで、表示速度と画質のバランスを取れます。

また、WordPressはレスポンシブ画像の仕組みにより、複数の画像候補をブラウザに提示します。ブラウザは画面サイズや表示条件に応じて、適切な画像を選択できます。

3-5. 2560px以上の画像で生成される「scaled」画像とは

WordPress 5.3以降では、非常に大きな画像をアップロードした場合、自動的に縮小された画像が作成される仕組みがあります。幅または高さがしきい値を超える画像は、-scaledというファイル名の画像が生成され、それが大きな表示用の画像として使われます。デフォルトのしきい値は2560pxです。

たとえば、sample.jpgという4000px幅の画像をアップロードすると、sample-scaled.jpgのような縮小版が作られることがあります。これは巨大画像による表示速度低下やサーバー負荷を防ぐための仕組みです。

写真サイトやポートフォリオサイトで本当にオリジナル画像を使いたい場合は、big_image_size_thresholdフィルターで制御できます。ただし、むやみに無効化すると画像容量が大きくなりやすいため注意が必要です。

3-6. 不要な画像サイズが増えるデメリット

画像サイズが多く生成されることにはメリットもありますが、デメリットもあります。

まず、サーバー容量を圧迫します。1枚の画像をアップロードしただけでも、複数の派生画像が作られるため、画像が多いサイトでは容量が膨らみます。

次に、バックアップや移行に時間がかかります。メディアファイルが増えるほど、バックアップデータが大きくなり、復元にも時間がかかります。

さらに、不要な画像サイズが多いと管理が複雑になります。テーマ変更後に使われなくなったサイズが残り続けることもあるため、必要に応じて画像サイズの整理を検討しましょう。

4. WordPressの画像サイズを変更する方法

4-1. 管理画面の「設定 > メディア」から変更する方法

WordPressの基本的な画像サイズは、管理画面から変更できます。

手順は以下です。

1. WordPress管理画面にログインする

2. 「設定」を開く

3. 「メディア」をクリックする

4. サムネイル、中サイズ、大サイズの幅・高さを入力する

5. 「変更を保存」をクリックする

ここで設定したサイズは、主に今後アップロードする画像に適用されます。すでにアップロード済みの画像には自動では反映されないため、既存画像にも適用したい場合はサムネイル再生成が必要です。

サムネイルサイズでは「サムネイルを実寸法にトリミングする」という設定があります。これを有効にすると、指定したサイズに合わせて画像が切り抜かれます。正方形のサムネイルを揃えたい場合には便利ですが、人物の顔や商品の一部が切れる原因にもなります。

4-2. 投稿画面・ブロックエディターで画像サイズを選ぶ方法

WordPressのブロックエディターでは、画像を挿入するときにサイズを選べます。画像ブロックを選択すると、右側の設定パネルでサムネイル、中、大、フルサイズなどを選択できます。

記事本文では、必要以上にフルサイズを選ばないことが重要です。本文幅が800px程度なら、大サイズや中サイズで十分なことが多いです。

ただし、画像内に細かい文字が含まれる場合は、中サイズでは読みにくくなることがあります。その場合は大サイズを選ぶか、画像自体を本文幅に合わせて作り直しましょう。

4-3. 画像ブロックで幅・高さを調整する方法

画像ブロックでは、表示上の幅や高さを調整できます。たとえば、画像の表示幅を50%、75%、100%に変更したり、ピクセル単位で幅を指定したりできます。

注意したいのは、表示サイズを小さくしても、読み込まれる画像ファイル自体が小さくなるとは限らない点です。3000pxの画像をCSSで500pxに見せても、実際には大きな画像を読み込んでいる場合があります。

表示速度を改善したい場合は、見た目のサイズだけでなく、実際に読み込まれている画像ファイルのサイズも確認しましょう。

4-4. アイキャッチ画像サイズを変更する方法

アイキャッチ画像の表示サイズは、テーマによって制御されることが多いです。管理画面のメディア設定だけでは、アイキャッチの表示サイズが変わらない場合があります。

アイキャッチ画像を調整する方法は主に以下です。

テーマによっては、アイキャッチ画像に独自の推奨サイズがあります。まずはテーマ公式ドキュメントや設定画面を確認しましょう。

4-5. テーマ側の画像サイズ設定を確認する方法

テーマ側で登録されている画像サイズを確認するには、いくつかの方法があります。

初心者の場合は、テーマの公式マニュアルを見るのが最も簡単です。推奨アイキャッチサイズやトップページ用画像サイズが記載されていることがあります。

開発者であれば、テーマファイル内のfunctions.phpを確認し、add_image_size()やset_post_thumbnail_size()が使われていないかチェックします。WP-CLIを使える環境では、登録済み画像サイズを一覧表示することもできます。WP-CLIのwp media image-sizeコマンドでは、登録されている画像サイズの名前、幅、高さ、トリミング設定などを確認できます。

4-6. functions.phpで独自の画像サイズを追加する方法

WordPressでは、functions.phpにコードを追加することで独自の画像サイズを登録できます。

たとえば、横幅1200px、高さ630pxのアイキャッチ用サイズを追加する場合は以下のように記述します。

PHP
add_action( 'after_setup_theme', function() {
    add_image_size( 'custom-ogp', 1200, 630, true );
} );

第1引数は画像サイズ名、第2引数は幅、第3引数は高さ、第4引数はトリミングの有無です。trueにすると指定サイズに切り抜かれ、falseにすると縦横比を維持して縮小されます。

切り抜き位置を指定したい場合は、以下のように書けます。

PHP
add_action( 'after_setup_theme', function() {
    add_image_size( 'custom-thumbnail', 400, 300, array( 'center', 'top' ) );
} );

コードを編集する場合は、親テーマではなく子テーマに追加するのが安全です。また、テーマ更新で消えないように管理しましょう。

4-7. 既存画像に変更後のサイズを反映させる方法

メディア設定やfunctions.phpで画像サイズを変更しても、既存の画像には自動で新しいサイズが生成されません。

既存画像に反映させるには、サムネイル再生成プラグインを使うのが一般的です。代表的には、Regenerate Thumbnails系のプラグインがあります。これにより、過去にアップロードした画像にも新しいサイズを生成できます。

ただし、画像枚数が多いサイトでは処理に時間がかかることがあります。実行前にはバックアップを取り、サーバー負荷が低い時間帯に作業すると安心です。

5. 表示速度を落とさない画像サイズ最適化の方法

5-1. アップロード前に画像をリサイズする

WordPressに画像をアップロードする前に、適切なサイズへリサイズしておくのが最も基本的な最適化です。

たとえば、記事本文で最大1000px程度にしか表示しない画像であれば、横幅3000pxのままアップロードする必要はありません。事前に1200px程度へリサイズしてからアップロードすれば、容量を大きく削減できます。

画像編集ツールは、Photoshop、Canva、Figma、Affinity Photo、Preview、ペイント系ツールなど何でも構いません。重要なのは、表示に必要なサイズを考えてからアップロードすることです。

5-2. 画像1枚あたりの容量の目安

画像容量の目安は、画像の用途によって変わります。

もちろん、写真の内容や画質によって最適な容量は変わります。グラデーションや細かい風景写真は容量が大きくなりやすく、シンプルなイラストやロゴは小さくできます。

大切なのは、1枚あたりの容量だけでなく、ページ全体の画像容量です。1枚300KBでも、10枚あれば3MBになります。画像が多い記事では、特に圧縮と遅延読み込みを意識しましょう。

5-3. JPEG・PNG・WebP・AVIFの使い分け

画像形式は、内容に合わせて選びます。

写真はJPEGまたはWebP、透過が必要なロゴや図解はPNGまたはWebP、アイコンやロゴはSVGが向いています。

WebPやAVIFは軽量化に有効ですが、サイト環境や変換方法によって運用が変わります。WordPress本体やサーバー、プラグインの対応状況を確認しながら導入しましょう。

5-4. 画像圧縮ツールを使って容量を軽くする

画像圧縮ツールを使うと、見た目の品質を大きく落とさずに容量を削減できます。

よく使われる圧縮方法には、アップロード前にブラウザ上の圧縮サービスを使う方法、画像編集ソフトで書き出し品質を調整する方法、WordPressプラグインで自動圧縮する方法があります。

写真の場合は、JPEG品質を70〜85%程度にしても見た目の違いが少ないことがあります。図解や文字入り画像は圧縮しすぎると文字がにじむため、圧縮後に必ず表示確認しましょう。

5-5. WordPressプラグインで画像を自動圧縮する

画像を毎回手動で圧縮するのが大変な場合は、WordPressプラグインを使うと便利です。画像をアップロードしたタイミングで自動圧縮したり、WebPに変換したり、既存画像を一括最適化したりできます。

プラグインを選ぶときは、以下を確認しましょう。

プラグインを入れすぎるとサイトが重くなることもあるため、画像最適化プラグインは必要な機能に絞って選ぶのがおすすめです。

5-6. lazy loadingで画像の読み込みを遅延させる

lazy loadingは、画面に表示される直前まで画像の読み込みを遅らせる仕組みです。ページ下部の画像を最初からすべて読み込まないため、初期表示を軽くできます。

特に画像が多い記事、ギャラリー、商品一覧、ランキングページでは効果的です。

ただし、ファーストビュー内の重要な画像まで遅延読み込みすると、逆に表示が遅く見えることがあります。メインビジュアルや最初に表示されるアイキャッチ画像は、遅延読み込みの対象から外すことも検討しましょう。

5-7. CDNを使って画像配信を高速化する

CDNは、画像やCSS、JavaScriptなどの静的ファイルを、ユーザーに近いサーバーから配信する仕組みです。アクセス元が国内外に分散しているサイトや、画像が多いサイトでは効果があります。

画像CDNを使うと、画像のリサイズ、WebP変換、キャッシュ配信などを自動化できる場合もあります。メディアサイト、ECサイト、ポートフォリオサイトなど、画像表示が重要なサイトでは導入価値が高いです。

ただし、CDN設定を誤ると画像が表示されない、キャッシュが更新されない、古い画像が残るといった問題が起こることがあります。導入後は、PC・スマホ・SNSシェアで表示確認しましょう。

5-8. 不要なメタデータを削除して軽量化する

画像には、撮影日時、カメラ情報、位置情報などのメタデータが含まれていることがあります。これらはWeb表示には不要な場合が多く、削除することで容量を少し軽くできます。

特に写真を多く使うサイトでは、メタデータ削除を習慣にするとよいでしょう。プライバシー保護の観点からも、位置情報が含まれた写真をそのままアップロードしないことが大切です。

画像圧縮ツールやWordPressプラグインの中には、メタデータ削除機能を備えたものもあります。

6. 画像サイズ設定でよくある失敗と対処法

6-1. 画像がぼやける原因と解決策

画像がぼやける主な原因は、表示サイズに対して元画像が小さいことです。たとえば、横幅500pxの画像を1000pxで表示すると、画像が引き伸ばされてぼやけます。

解決策は以下です。

特にロゴや文字入り画像はぼやけが目立ちやすいため、PNG、SVG、WebPなど適切な形式を選びましょう。

6-2. アイキャッチ画像が切れる原因と解決策

アイキャッチ画像が切れる原因は、テーマ側で指定された比率に合わせて画像がトリミングされているためです。たとえば、横長画像を正方形サムネイルに表示すると、左右または上下が切り取られます。

解決策は以下です。

アイキャッチ画像では、中央に重要な情報を寄せ、上下左右に余白を持たせるとトリミングに強くなります。

6-3. スマホで画像がはみ出す原因と解決策

スマホで画像が画面外にはみ出す場合、画像や親要素に固定幅が指定されている可能性があります。

よくある原因は、画像にwidth: 1000px;のような固定値が入っている、表やカラムの中に大きな画像を入れている、テーマのCSSが古い、などです。

基本的な対策として、画像に以下のようなCSSを適用します。

CSS
img {
    max-width: 100%;
    height: auto;
}

これにより、画像は親要素の幅を超えず、縦横比を保ったまま縮小されます。

6-4. 画像をアップロードすると勝手にリサイズされる場合の対処法

WordPressで大きな画像をアップロードしたとき、ファイル名に-scaledが付いた画像が作られることがあります。これはWordPressの大画像処理機能によるものです。幅または高さがデフォルトしきい値の2560pxを超える場合、縮小画像が生成されます。

通常のブログや企業サイトでは、この機能は有効なままで問題ありません。むしろ巨大画像による表示速度低下を防げます。

どうしても元画像をそのまま使いたい場合は、以下のようなコードで無効化できます。

PHP
add_filter( 'big_image_size_threshold', '__return_false' );

ただし、無効化すると大容量画像がそのまま使われる可能性があるため、写真販売サイトや高解像度ギャラリーなど、必要な場合に限定しましょう。

6-5. メディアライブラリに同じ画像が複数生成される場合の対処法

WordPressでは、1枚の画像をアップロードすると複数のサイズがサーバー上に生成されます。これは正常な動作です。メディアライブラリ上では1枚に見えていても、サーバーのuploadsフォルダには複数のファイルが存在します。

不要な画像サイズを減らしたい場合は、以下を検討します。

ただし、既存ページで使われている画像を削除すると表示崩れが起こることがあります。削除前には必ずバックアップを取りましょう。

6-6. 画像サイズを変更しても反映されない場合の対処法

画像サイズを変更しても反映されない場合、主な原因は以下です。

WordPressでは、設定変更後にアップロードした画像には新しいサイズが適用されますが、過去の画像はそのままです。既存画像も変更したい場合は、再生成が必要です。

6-7. SNSで画像が正しく表示されない場合の対処法

SNSで画像が表示されない、古い画像が表示される、画像が切れる場合は、OGP設定を確認しましょう。

主な確認ポイントは以下です。

SNSでは、一度取得されたOGP画像がキャッシュされることがあります。画像を変更したのに反映されない場合は、各SNSのデバッグツールで再取得を試しましょう。

7. SEOとユーザー体験を高める画像設定

7-1. Core Web Vitalsと画像サイズの関係

画像サイズは、Core Web Vitalsにも関係します。特に影響しやすいのは、LCPとCLSです。

LCPは、ページ内の主要コンテンツが表示されるまでの時間に関係します。ファーストビューに大きなアイキャッチやメインビジュアルがある場合、その画像が重いとLCPが悪化しやすくなります。

CLSは、ページ読み込み中のレイアウトのズレに関係します。画像の幅や高さが指定されていないと、読み込み後にスペースが確保されてレイアウトが動くことがあります。web.devでは、画像や動画にはwidthとheightを指定するか、CSSのaspect-ratioなどで必要なスペースを確保することが推奨されています。

7-2. width・height指定でレイアウト崩れを防ぐ

画像タグにwidthとheightを指定すると、ブラウザは画像が読み込まれる前に表示領域を確保できます。これにより、後から画像が表示されて文章やボタンが押し下げられる現象を防ぎやすくなります。

WordPressでは、通常の画像挿入でwidthやheightが付与されることが多いですが、テーマやカスタムHTML、外部ツールで挿入した画像では指定が抜けることがあります。

画像をHTMLで直接書く場合は、以下のように指定します。

HTML
<img src="sample.jpg" width="1200" height="630" alt="WordPressの画像サイズ設定例">

CSSでレスポンシブ対応する場合は、以下のようにします。

CSS
img {
    max-width: 100%;
    height: auto;
}

7-3. alt属性を設定して画像SEOを強化する

alt属性は、画像の内容を説明するテキストです。画像が表示されない場合の代替テキストとして使われるほか、検索エンジンが画像内容を理解する手がかりにもなります。

Google Search Centralでは、画像の近くに関連テキストを配置し、ファイル名やタイトル、altテキストをわかりやすくすることが推奨されています。また、IMG00023.JPGのような一般的なファイル名より、内容がわかる短いファイル名が望ましいとされています。

よいalt属性の例は以下です。

HTML
<img src="wordpress-image-size-setting.jpg" alt="WordPressのメディア設定で画像サイズを変更する画面">

悪い例は以下です。

HTML
<img src="image01.jpg" alt="画像">

alt属性には、キーワードを詰め込むのではなく、画像の内容を自然に説明する文を入れましょう。

7-4. ファイル名をわかりやすく設定する

画像ファイル名もSEOに関係します。アップロード前に、画像の内容がわかるファイル名へ変更しておくとよいでしょう。

たとえば、WordPressの画像サイズ設定画面のスクリーンショットなら、以下のようなファイル名が適しています。

wordpress-image-size-setting.jpg

避けたいファイル名は以下です。

IMG_1234.jpg
screenshot.png
image1.jpg

日本語ファイル名は環境によって文字化けやURLエンコードが発生することがあるため、英数字とハイフンで管理するのがおすすめです。

7-5. 画像キャッシュを活用して再読み込みを減らす

画像キャッシュを活用すると、ユーザーが再訪問したときに画像を再ダウンロードする回数を減らせます。これにより、2回目以降のページ表示が速くなります。

キャッシュには、ブラウザキャッシュ、サーバーキャッシュ、CDNキャッシュ、WordPressキャッシュプラグインなどがあります。

ただし、画像を差し替えたのに古い画像が表示される場合は、キャッシュが原因のことがあります。画像更新後は、必要に応じてキャッシュを削除しましょう。

7-6. PageSpeed Insightsで画像の改善点を確認する

画像最適化の効果を確認するには、PageSpeed Insightsを使うのがおすすめです。画像が重い、適切なサイズで配信されていない、次世代フォーマットが使われていない、遅延読み込みが必要などの改善点を確認できます。

特にチェックしたい項目は以下です。

数値だけを追うのではなく、実際の表示速度やユーザー体験も確認しましょう。

8. WordPress画像サイズのおすすめ設定例

8-1. ブログサイト向けの画像サイズ設定例

一般的なブログサイトでは、記事本文とアイキャッチ画像を中心に最適化すれば十分です。

おすすめ設定例は以下です。

ブログでは、画像の美しさよりも読み込み速度と読みやすさのバランスが重要です。スクリーンショットや図解は横幅1000〜1200px程度にし、圧縮してからアップロードしましょう。

8-2. 企業サイト向けの画像サイズ設定例

企業サイトでは、トップページのメインビジュアル、サービス紹介画像、スタッフ写真、ロゴ、導入事例画像などを使います。

おすすめ設定例は以下です。

企業サイトでは、ブランドイメージを損なわない画質が必要です。ただし、トップページの大きな画像が重いと離脱につながるため、メインビジュアルは特に圧縮とWebP化を検討しましょう。

8-3. ECサイト向けの画像サイズ設定例

ECサイトでは、商品画像の見やすさが売上に直結します。拡大表示に耐えられる画質を保ちつつ、一覧ページでは軽量な画像を使うことが重要です。

おすすめ設定例は以下です。

商品画像は比率を統一すると、一覧ページがきれいに見えます。背景色、余白、撮影角度を揃えることも大切です。

8-4. 写真・ポートフォリオサイト向けの画像サイズ設定例

写真やデザイン作品を見せるサイトでは、画質を重視します。ただし、すべてをフルサイズで表示すると極端に重くなるため、表示用とダウンロード用を分けるのがおすすめです。

おすすめ設定例は以下です。

写真サイトでは、Web表示用は圧縮し、必要に応じて原寸画像を別管理します。無断転載対策として、ウォーターマークや右クリック対策よりも、公開サイズを制御することが現実的です。

8-5. 初心者が迷ったときの基本設定

初心者が迷った場合は、まず以下の設定を基準にすると大きな失敗を避けられます。

最初から細かく調整しすぎる必要はありません。まずは「大きすぎる画像をそのままアップロードしない」「記事本文ではフルサイズを乱用しない」「画像を圧縮する」の3つを徹底しましょう。

9. WordPress画像サイズに関するよくある質問

9-1. WordPressの画像サイズは何pxが最適？

最適な画像サイズは、表示場所によって変わります。記事本文なら横幅800〜1200px、アイキャッチなら1200×630pxまたは1200×675px、メインビジュアルなら1920px幅前後が目安です。

重要なのは、実際に表示される幅に合わせることです。本文幅が800pxのサイトに、毎回3000pxの画像を入れる必要はありません。

9-2. 画像容量は何KB以下にすべき？

記事本文の画像なら、1枚あたり100〜300KB程度を目安にすると扱いやすいです。アイキャッチは150〜400KB程度、メインビジュアルは300〜800KB程度に収めるとよいでしょう。

ただし、画像の内容によって適正容量は変わります。画質を落としすぎるより、ページ全体の読み込み速度を見ながら調整することが大切です。

9-3. フルサイズ画像は使ってもいい？

必要な場合は使っても問題ありません。ただし、フルサイズ画像は容量が大きくなりやすいため、記事本文で毎回使うのはおすすめしません。

写真を大きく見せたいページや、細かい図解をクリック拡大させたい場合など、目的があるときに限定しましょう。通常の記事では、大サイズや最適化済みの画像で十分です。

9-4. WebPに変換した方がいい？

多くのサイトでは、WebPへの変換は有効です。JPEGやPNGより容量を軽くできることが多く、表示速度の改善につながります。

ただし、元画像の管理、変換方法、サーバー対応、キャッシュ設定を確認する必要があります。WordPressプラグインを使えば、アップロード時に自動でWebPへ変換できる場合があります。

9-5. 画像サイズを後から変更しても問題ない？

画像サイズは後から変更できます。ただし、メディア設定を変更しても、既存画像には自動で新サイズが生成されません。

過去の画像にも新しいサイズを適用したい場合は、サムネイル再生成が必要です。また、テーマ変更後は、旧テーマで生成された不要な画像サイズが残ることもあります。

9-6. 使わない画像サイズは削除してもいい？

使っていない画像サイズは削除しても構いませんが、慎重に行う必要があります。削除した画像サイズが過去記事やテーマ内で使われていると、画像が表示されなくなる可能性があります。

削除前には、バックアップを取り、どのサイズが使われているかを確認しましょう。特にECサイトや大量の記事があるメディアサイトでは、いきなり削除せずテスト環境で確認するのがおすすめです。

9-7. プラグインなしで画像を最適化できる？

プラグインなしでも画像最適化は可能です。アップロード前に画像をリサイズし、圧縮ツールで容量を減らし、適切なファイル名とalt属性を設定すれば、基本的な最適化はできます。

ただし、画像枚数が多いサイトや、WebP変換、既存画像の一括圧縮、CDN連携まで行いたい場合は、プラグインを使った方が効率的です。

まとめ

WordPressの画像サイズは、サイトの見た目、表示速度、SEO、ユーザー体験に大きく関わります。重要なのは、「大きければ高品質」「小さければ軽い」と単純に考えるのではなく、表示場所に合ったサイズを選ぶことです。

記事本文なら横幅800〜1200px、アイキャッチやOGP画像なら1200×630px前後、メインビジュアルなら1920px幅前後を目安にすると、多くのサイトで扱いやすくなります。

また、WordPressでは画像アップロード時にサムネイル、中サイズ、大サイズ、フルサイズなどが自動生成されます。テーマやプラグインによって追加サイズが増えることもあるため、必要なサイズと不要なサイズを把握しておくことが大切です。

表示速度を落とさないためには、アップロード前のリサイズ、画像圧縮、WebPやAVIFの活用、lazy loading、CDN、キャッシュ設定を組み合わせましょう。さらに、widthとheightの指定、alt属性、わかりやすいファイル名を設定することで、SEOとユーザー体験の両方を高められます。

ワードプレスのサイズ設定で迷ったら、まずは「実際の表示幅より少し大きめ」「容量はできるだけ軽く」「フルサイズを乱用しない」という基本を押さえることが大切です。画像サイズを適切に管理できれば、見やすく、速く、SEOにも強いWordPressサイトを作れます。