WordPressに画像をアップロードするとき、「横幅は何ピクセルにすればよいのか」「大きい画像をそのまま入れても問題ないのか」と迷う方は少なくありません。画像が小さすぎるとぼやけやすく、大きすぎるとページが重くなります。ただし、すべてのサイトに共通する一つの正解はありません。必要な大きさは、テーマの本文幅、画像を置く場所、縦横比、端末の解像度によって変わるためです。
この記事では、WordPress初心者が用途に合う画像サイズを決めるための考え方を、本文画像、アイキャッチ、サムネイル、ロゴなどに分けて解説します。最後まで読むと、必要以上に大きな画像をアップロードせず、見た目の鮮明さと表示速度のバランスを取りやすくなります。
WordPressの画像サイズで最初に知っておきたいこと
画像について考えるときは、「画像の縦横の大きさ」と「ファイルの重さ」を分ける必要があります。横1600ピクセル、縦900ピクセルという情報は寸法です。一方、200KBや1MBという情報はファイル容量です。寸法が同じでも、写真の内容、保存形式、圧縮率によって容量は変わります。
WordPressの公式ドキュメントでも、画像の物理的な大きさには画面上の表示サイズとファイルサイズの両方が関係すると説明されています。初心者は「ピクセル数さえ合えばよい」と考えがちですが、鮮明さ、容量、縦横比をまとめて確認することが大切です。
アップロードサイズと表示サイズは同じとは限らない
パソコンからアップロードした元画像が横1600ピクセルでも、記事本文では横800ピクセル程度で表示されることがあります。ブラウザが表示する大きさは、テーマのレイアウトや画像ブロックの設定に左右されます。そのため、元画像の横幅だけを見ても、読者の画面でどの程度の大きさになるかは判断できません。
反対に、本文の表示領域が横800ピクセルなのに、横500ピクセルの画像を横幅いっぱいまで拡大すると、輪郭や文字がぼやける場合があります。小さな画像を後から引き伸ばしても、失われた情報は戻りません。表示予定の大きさ以上の元画像を用意し、必要な範囲で縮小して使うのが基本です。
テーマによって本文幅が違う
本文部分の幅はテーマやレイアウトで異なります。サイドバーがあるページと、画面いっぱいに表示するページでも条件が変わります。したがって、「ブログ画像は必ず横1200ピクセル」のような数字を、そのまま全サイトへ当てはめることはできません。
最初に確認したいのは、自分のサイトで画像が実際に表示される最大幅です。テーマの説明書に推奨サイズがあれば、それを優先します。説明がない場合は、公開ページをパソコンで開き、ブラウザの開発者ツールや画像の表示情報で本文幅を確認する方法があります。難しい場合は、横幅を変えたテスト画像を下書きへ入れ、パソコンとスマートフォンのプレビューを比較しても構いません。
初心者が使いやすい画像サイズの決め方
画像サイズは、最初に用途を決め、次に実際の表示幅を確認し、最後に鮮明さと容量を調整する順番で考えると迷いにくくなります。単純に大きい画像を選ぶのではなく、「どこで、どのくらいの幅で見せるか」から逆算する方法です。
表示する最大幅を基準にする
本文のコンテンツ幅が最大800ピクセルで、画像を本文いっぱいに表示するなら、アップロード前の画像は少なくともその幅を満たす必要があります。高密度ディスプレイでの見え方も考慮する場合は、表示幅の約2倍を一つの制作上の目安にできます。この例なら横1600ピクセルです。ただし、これはすべての画像を必ず2倍にする規則ではありません。
写真は高密度ディスプレイ向けの余裕があるときれいに見えやすい一方、スクリーンショットや図解は細かな文字が読めることが重要です。元画像を大きくしすぎるほど容量も増えやすいため、圧縮後の重さや表示速度まで確認して決めます。テーマが生成する画像サイズや配信方法も含めて考える必要があります。
縦横比を先にそろえる
同じ横幅でも、16対9、4対3、1対1では高さが異なります。記事一覧でアイキャッチが一定比率に切り抜かれるテーマでは、元画像の縦横比が合っていないと、人物の顔や文字が端で欠けることがあります。
アイキャッチを作る前に、テーマが記事一覧、関連記事、SNS共有でどのように切り抜くかを確認しましょう。重要な被写体や短い文字は端へ寄せず、中央付近に余白を持たせると、複数の表示枠に対応しやすくなります。WordPressの画像ブロックで比率を変更した場合、見た目だけが切り抜かれ、元画像そのものは変わらないこともあります。
拡大せず縮小して使う
画像は、元の寸法より小さく表示する分には大きな問題が起きにくい一方、元の寸法を超えて拡大すると粗さが目立ちます。特にロゴ、文字入り図解、画面キャプチャでは、少しのぼやけでも読みにくさにつながります。
作成時には必要な表示幅より余裕のある画像を用意し、アップロード前に適切な寸法へ縮小します。WordPress上で見た目の幅だけを小さくしても、元の大きなファイルを配信する状況が残る場合があります。画像編集ソフトや圧縮ツールで、寸法と容量を事前に整えるほうが管理しやすくなります。
用途別に考える画像サイズの目安
画像サイズは、まず「サイト上で表示する幅」と「テーマが指定する縦横比」から決めます。以下は準備するときの例であり、すべてのサイトに共通する推奨値ではありません。テーマの公式マニュアルに指定がある場合は、そちらを優先してください。
| 用途・表示条件 | 用意する画像の例 | 確認すること |
|---|---|---|
| 本文で横幅800pxに表示する画像 | 横幅800〜1600pxを比較して選ぶ | 高密度画面での鮮明さと容量を確認。必ず2倍にする必要はありません。 |
| 横幅400pxに表示する一覧用サムネイル | 横幅400〜800pxを比較して選ぶ | テーマによる切り抜きと、文字・被写体の欠けを確認します。 |
| 16:9で表示するアイキャッチ | 1600×900pxなど、指定比率に合う画像 | 一覧やSNSでは別の比率で切り抜かれる場合もあるため、実際の表示を確認します。 |
| ロゴ・操作画面の画像 | ロゴはテーマ指定を優先。操作画面は必要箇所を切り出す | 小さな文字が読めるか、余白や不要な情報が多くないかを確認します。 |
「px」は画像の縦横の大きさ、「KB・MB」はファイル容量です。同じ横幅でも、写真や図の内容、保存形式、圧縮の強さによって容量は変わります。一律の容量だけを目標にせず、実際の表示幅で文字や輪郭が読めることを確認してから、不要な大きさや容量を減らしましょう。
WordPressは複数サイズの画像やレスポンシブ画像の仕組みを利用します。ただし、テーマや画像の挿入方法によって表示は異なるため、元画像を大きくしただけで問題が解決するとは限りません。詳しくはWordPress公式のレスポンシブ画像の説明も参照してください。
記事本文の写真や図解
本文幅いっぱいに表示する画像は、サイトの最大コンテンツ幅を基準にします。一般的なブログの本文領域を想定すると、作成時の横幅を1200〜1600ピクセル程度から検討すると扱いやすい場合があります。本文幅がそれより広いサイトや、細部を拡大して見せたい図解では、さらに大きい元画像が必要になることもあります。
一方、本文中に小さく置く補足写真を、毎回大きな寸法で用意する必要はありません。最終的に横400ピクセル程度でしか表示しないなら、その用途に見合う寸法へ縮小できます。重要なのは、記事内のすべての画像を同じ寸法にすることではなく、最大表示幅に不足しない範囲で無駄を減らすことです。
アイキャッチ画像
アイキャッチは、記事上部だけでなく、記事一覧、関連記事、SNS共有など複数の場所で使われる可能性があります。横長で運用するサイトでは、16対9前後の比率が扱いやすいことがあります。たとえば横1600ピクセル、縦900ピクセルは16対9ですが、テーマが別の比率を推奨しているならその指定に合わせます。
アイキャッチに文字を入れる場合は、文字量を少なくし、小さなサムネイルでも読める大きさにします。画像の端は切り抜かれる前提で余白を確保してください。記事タイトルをそのまま全部入れると、一覧表示で読めなくなったり、画像が窮屈になったりします。高レベルなテーマ語を短く見せるほうが安定します。
操作説明のスクリーンショット
スクリーンショットは、写真よりも文字の読みやすさを優先します。画面全体をそのまま載せると、記事幅に合わせて縮小されたときに文字が小さくなります。説明対象の部分だけを切り出し、必要なら矢印や枠で注目箇所を示します。
読者が拡大しなくても確認できることが理想です。横長の管理画面を載せる場合は、一枚に詰め込まず、手順ごとに複数枚へ分ける方法もあります。また、ユーザー名、メールアドレス、サイトURL、アクセス解析の数値などが写っていないか、アップロード前に必ず確認してください。
ロゴや小さなアイコン
ロゴはテーマのヘッダー設定が指定する表示枠を基準にします。大きな写真と同じ寸法にする必要はありません。背景を透過したい場合はPNGなどが使われますが、写真のように色数が多い画像をPNGにすると容量が大きくなりやすい点に注意します。
単純な図形で拡大しても劣化させたくない場合はSVGが適することもあります。ただし、WordPressの標準環境やセキュリティ設定ではSVGのアップロードが許可されていない場合があります。初心者は、テーマが案内する対応形式を確認し、安易にアップロード制限を解除しないほうが安全です。
WordPressが自動生成する画像サイズ
WordPressは一枚の画像をアップロードすると、テーマや設定に応じて複数の中間サイズを生成します。標準の管理画面では、サムネイル、中サイズ、大サイズについて最大寸法を設定できます。画像ブロックの解像度では、元画像の大きさやテーマの対応状況に応じて、フルサイズ、大、中、サムネイルなどを選べます。
メディア設定の役割
「設定」から「メディア」を開くと、サムネイル、中サイズ、大サイズの幅と高さを確認できます。WordPress公式ドキュメントによると、ここにある寸法は、投稿本文へ画像を挿入するときに使う最大寸法を決める設定です。サムネイルには、指定寸法へ切り抜く選択肢もあります。
ただし、テーマやプラグインが独自の画像サイズを追加することがあります。管理画面に見える三種類だけが、サイト内に存在するすべての画像サイズとは限りません。また、設定を後から変更しても、過去にアップロード済みの画像へ自動で同じ中間サイズが作り直されない場合があります。むやみに数値を変える前に、テーマの説明を確認しましょう。
レスポンシブ画像の仕組み
WordPressは、生成した画像の候補を画像タグのsrcsetやsizes属性でブラウザへ伝える仕組みに対応しています。ブラウザは画面幅などに合う候補を選べるため、スマートフォンに必要以上に大きな画像を送ることを抑えられます。
この仕組みがあるからといって、どれほど大きな元画像でも問題ないわけではありません。元画像のアップロード、保存領域、中間画像の生成、バックアップには負荷がかかります。適切な元画像を用意したうえで、WordPressのレスポンシブ画像機能を活用する、という順番で考えるのが安全です。
フルサイズを毎回選ばない
画像ブロックでフルサイズを選ぶと、元画像が表示候補として使われます。高解像度カメラで撮った数千ピクセルの写真をそのまま使えば、記事本文に必要な範囲を大きく超える可能性があります。表示上は小さく見えても、配信するファイルが重いと読み込み時間へ影響します。
本文で必要な解像度を満たす「大」などの中間サイズが選べるなら、プレビューを見ながら適切なものを選びます。ただし、テーマの本文幅より小さい候補を無理に拡大するとぼやけます。候補名だけで判断せず、実際のピクセル寸法と表示結果を確認してください。
画像のファイル容量を軽くする方法
表示速度を考えるときは、寸法だけでなく容量を減らすことが重要です。画像はページ容量の大きな割合を占めやすく、一枚ずつの差が記事全体では大きな差になります。ただし、強く圧縮しすぎると、人物の輪郭、グラデーション、細い文字が崩れます。
アップロード前にリサイズする
スマートフォンやカメラで撮影した写真は、ブログ本文に必要な寸法よりかなり大きいことがあります。最初に不要な部分をトリミングし、次に用途に合う横幅へ縮小します。この順番にすると、使わない領域へデータを割かずに済みます。
複数の記事で同じ制作ルールを使う場合は、本文画像、アイキャッチ、プロフィール画像などのテンプレート寸法を決めておくと作業が安定します。ただし、将来テーマを変える可能性もあるため、編集可能な高品質の原本はWordPressとは別の安全な場所へ保管しておくと安心です。
内容に合うファイル形式を選ぶ
JPEGは写真に向き、PNGは透過や輪郭の明確な図に向くことが多い形式です。WebPは写真や図の容量を抑えやすく、WordPressでも利用できます。どの形式が最小になるかは画像の内容と圧縮設定で変わるため、変換前後を見比べます。
細かな文字がある図解を強く圧縮すると、文字の周囲ににじみが出ることがあります。写真と図解で同じ圧縮率を機械的に使わず、実際の表示サイズで品質を確認してください。元形式と拡張子が一致していることも大切です。
容量の目標は画質を見ながら決める
「必ず100KB以下」のように容量だけを絶対条件にすると、写真の品質を必要以上に落とす場合があります。反対に、見た目が少し良くなるだけで容量が何倍にも増えるなら、読者の待ち時間に見合わない可能性があります。
同じ画像を複数の品質で書き出し、実際の表示幅で比較すると判断しやすくなります。見た目の差がほとんど分からない範囲まで圧縮し、PageSpeed Insightsなどでページ全体を確認します。画像一枚の数値だけでなく、記事内の枚数や他の読み込み要素も含めて評価してください。
画像サイズを決める具体例
考え方だけでは判断しにくい方のために、よくある三つの場面で決め方を整理します。ここで示す数値は計算例です。実際には、自分のテーマの表示幅と推奨比率を確認して置き換えてください。
本文幅が800ピクセルのブログ
記事の本文領域が最大800ピクセルで、写真を横幅いっぱいに見せるとします。この場合、横800ピクセル未満の画像は拡大される可能性があるため避けます。高密度ディスプレイも意識して余裕を持たせるなら、横1600ピクセル程度の元画像から試せます。写真が3対2なら、横1600ピクセル、縦約1067ピクセルです。
ただし、書き出したファイルが非常に重い場合は、横幅を少し抑えるか、画質設定や形式を見直します。最終的に横1200ピクセルでも見た目の差が分からず、容量が大きく減るなら、1200ピクセルを採用する判断も合理的です。必要十分な大きさは、表示結果を比較して決めます。
16対9のアイキャッチを使うブログ
テーマが16対9の横長アイキャッチを推奨し、記事上部では横1000ピクセル程度で表示するとします。この場合、1600×900ピクセルなどの16対9テンプレートを用意すると、複数の記事で比率をそろえやすくなります。重要な被写体と短い文字は中央寄りに置き、四辺には切り抜き用の余白を残します。
記事一覧では画像がさらに小さくなるため、細い線や小さな注釈は避けます。スマートフォンの一覧で文字が読めるか、タイトルと画像内の文字が同じ内容を繰り返していないかも確認します。画像だけで詳細を説明しようとせず、本文や記事タイトルと役割を分けることが大切です。
管理画面の操作を説明する記事
パソコン画面全体を横1920ピクセルで撮影し、横800ピクセルの本文へ縮小すると、管理画面の文字は半分以下の大きさになります。そこで、説明する設定欄の周辺だけを切り出し、横1000〜1400ピクセル程度で書き出すと、本文で読みやすくなる場合があります。
一枚のスクリーンショットに複数の操作を載せるのではなく、「ボタンを選ぶ」「設定値を確認する」「保存する」のように分割します。画像内に手順番号を大量に入れなくても、本文の直後に対応する画像を置けば理解しやすくなります。画像が将来の画面変更で古くなる可能性も考え、重要な説明は本文にも書いておきます。
画像とSEO・アクセシビリティの関係
適切な寸法と容量は表示速度に役立ちますが、画像の役割を検索エンジンや支援技術へ伝える準備も必要です。画像SEOは、ファイルを大きくすることではありません。ページ内容との関連、標準的な画像要素、分かりやすい代替テキスト、周辺の文章などを整えることが基本です。
ファイル名は内容が分かる形にする
カメラが付けた「IMG_1234.jpg」のままでも表示はできますが、管理するときに内容が分かりません。アップロード前に、画像の内容を短く表す英数字のファイル名へ変更すると探しやすくなります。単語はハイフンで区切り、意味のない連番だけにしない方法が一般的です。
一度アップロードしたファイルの名前を後から変えると、URLや参照関係へ影響する場合があります。名前はWordPressへ入れる前に決めておくほうが安全です。同じ名前のファイルを繰り返しアップロードすると管理しにくいため、必要に応じて内容や用途を区別できる語を追加します。
代替テキストは見えない読者にも役立つ
代替テキストは、画像を見られない状況で内容や役割を伝えるための文章です。Googleの公式ガイドでも、画像の主題を理解する情報としてalt属性が使われ、アクセシビリティにも役立つと説明されています。キーワードを詰め込む場所ではありません。
装飾だけの画像は空の代替テキストが適切な場合があります。操作手順の画像なら、「投稿編集画面の右側にある画像ブロックの解像度メニュー」のように、本文との関係が分かる説明を考えます。画像内の文字をすべて機械的に写すのではなく、その場で読者に必要な情報を簡潔に伝えます。
画像の近くに説明文を置く
画像だけを突然置くより、直前または直後の文章で「何を見る画像か」を示すと理解しやすくなります。検索エンジンも、画像の周囲にある本文やキャプションなどを手がかりにします。図解で結論を示す場合も、重要な内容を画像だけに閉じ込めず、本文で説明してください。
グラフや比較表を画像として掲載する場合は、数値や結論を文章でも確認できるようにします。画面が小さい読者、画像を拡大できない読者、読み上げ機能を使う読者にも情報が届きやすくなります。画像の見た目と情報設計を分けず、一つのコンテンツとして考えることが大切です。
ぼやける・切れる・重いときの確認ポイント
画像の問題は、元画像、WordPressの設定、テーマのCSS、キャッシュなど複数の要因で起きます。症状だけを見て画像を再アップロードする前に、原因を順番に切り分けましょう。
- アップロードはできたものの画像がぼやける場合は、WordPressの画像がぼやけるときの確認・改善方法で、表示サイズや元画像から確認してください。
- 画像をアップロードする段階でエラーになる場合は、表示サイズとは問題を分け、WordPressで画像をアップロードできないときの対処法を確認してください。
画像がぼやける場合
まず、選択している画像の実寸が表示幅より小さくないか確認します。画像ブロックで「サムネイル」や「中」を選んだまま横幅いっぱいに拡大している場合は、より大きな解像度へ変更すると改善することがあります。
次に、元画像自体がぼやけていないか、圧縮を強くしすぎていないかを見ます。管理画面のプレビューだけで判断せず、下書きのプレビューを実際の端末で確認してください。キャッシュや画像最適化サービスが古い画像を配信している場合もあるため、更新が反映されないときはキャッシュの影響も疑います。
アイキャッチの端が切れる場合
記事一覧の枠と元画像の縦横比が合っていない可能性があります。テーマが画像をcoverのような方法で表示すると、枠を埋めるために上下または左右が切り抜かれます。重要な被写体を中央へ寄せ、余白を増やすと対応しやすくなります。
テーマが推奨するアイキャッチ比率を確認し、同じ比率の制作テンプレートを用意すると、記事ごとのばらつきを減らせます。SNSでは別の比率で見える場合があるため、公開前に共有プレビューも確認すると安心です。
画像を入れるとページが重くなる場合
元画像の寸法と容量、実際に配信される画像URL、ページ内の画像枚数を確認します。見た目が横800ピクセルなのに数千ピクセルの元画像が使われているなら、リサイズや適切な中間サイズの選択を検討します。
画面の下にある画像は遅延読み込みで負荷を分散できることがありますが、最初に見える主要画像まで遅れると体感を悪くする場合があります。最適化プラグインを追加する前に、元画像が過剰に大きくないかを見直すほうが根本的です。プラグインを複数重ねると、変換やキャッシュの競合が起きることもあります。
アップロード前の実践チェック
画像を毎回同じ流れで確認すると、サイズの判断が速くなります。次の項目を公開前のチェックリストとして使ってください。
- 画像の用途が本文、アイキャッチ、スクリーンショット、ロゴのどれか決まっている
- テーマの推奨寸法や実際の最大表示幅を確認した
- 表示枠に合う縦横比で作成した
- 小さな元画像を無理に拡大していない
- 不要な余白をトリミングした
- 用途に合うファイル形式を選んだ
- 画質を確認しながら容量を圧縮した
- ファイル名を内容が分かる短い名前にした
- 代替テキストが必要な画像には内容に合う説明を付けた
- 個人情報や管理情報が画像に写っていない
- パソコンとスマートフォンの下書きプレビューを確認した
- アイキャッチの重要部分が一覧表示で切れていない
既存画像を差し替えるときの注意
同じファイル名で上書きすると、ブラウザやCDNのキャッシュにより古い画像が残る場合があります。また、一つのメディアを複数の記事で使っていると、差し替えが別の記事にも影響する可能性があります。
どの記事で使われているかを確認し、必要なら新しいファイル名でアップロードします。不要になった画像をすぐ削除するのではなく、公開ページやOGP、構造化データから参照されていないかも確認してください。画像の整理は、表示確認とバックアップを行ってから進めると安全です。
画像サイズでよくある疑問
大きな画像をアップロードしてWordPressに任せればよいですか
WordPressは複数サイズの生成やレスポンシブ画像に対応していますが、過剰に大きな元画像を無制限に入れる理由にはなりません。サーバー容量、バックアップ時間、画像処理負荷が増えるため、用途に合う寸法へ整えてからアップロードするのが基本です。
横幅は1200ピクセルと1600ピクセルのどちらがよいですか
本文の最大表示幅と用途によります。表示幅が比較的小さく、細部の拡大も不要なら1200ピクセルで十分な場合があります。広いレイアウト、高密度画面、細かな図解への余裕を持たせるなら1600ピクセルを検討できます。圧縮後の容量と実機表示を比較して決めてください。
画像サイズを後から変更してもよいですか
変更はできますが、メディア設定の変更だけでは過去画像の中間サイズが揃わない場合があります。また、記事内で選ばれている画像URLやキャッシュの確認も必要です。サイト全体を一括変更する前に、下書きや一記事でテストし、バックアップを取ってから進めます。
スマートフォン用の画像を別に作る必要はありますか
通常の本文画像は、WordPressのレスポンシブ画像とテーマの設計によって端末に合わせて表示されます。そのため、すべての画像でスマートフォン専用ファイルを手作業する必要はありません。ただし、画像内の文字配置や縦横比が小さな画面に向かない場合は、デザイン自体を見直すか、テーマの対応範囲で端末別の見せ方を検討します。
画像サイズは表示幅から逆算する
WordPressへアップロードする画像は、万能なピクセル数を覚えるより、用途と表示幅から逆算することが大切です。本文画像ならコンテンツの最大幅、アイキャッチならテーマの縦横比、スクリーンショットなら文字の読みやすさを基準にします。そのうえで、必要な鮮明さを保ちながら寸法と容量を減らします。
まずは自分のサイトの本文幅とアイキャッチ比率を確認し、代表的な一記事でテストしてください。パソコンとスマートフォンの下書きプレビューを見て問題がなければ、その寸法を制作テンプレートとして記録します。記事ごとに迷う時間が減り、サイト全体の見た目と表示速度を整えやすくなります。
運用を始めた後も、テーマ変更やレイアウト変更の際には基準を見直します。以前の推奨寸法をそのまま使い続けるのではなく、現在の表示幅、切り抜き方、配信されるファイルを再確認してください。少数の記事で試してから共通ルールを更新すれば、過去画像への思わぬ影響を抑えながら改善できます。
