「画像が小さくなってしまう…」「サムネイルがぼやける」「ページの表示が遅い」
WordPressで画像を使う中で、このような悩みを持ったことはありませんか？
この記事では、WordPressにおける画像サイズの仕組みから最適なサイズ設定、よくあるトラブルの解決法、そしてSEO・表示速度に貢献する画像最適化のポイントまで、web制作会社が分かりやすく解説いたします！
目次
目次
WordPressにおける画像サイズの基本
WordPressでは、画像をアップロードすると自動的に複数のサイズが生成されます。
- サムネイルサイズ（150×150）
- 中サイズ（300×300）
- 大サイズ（1024×1024）
- フルサイズ（アップロードした元のサイズ）
また、使用しているテーマやプラグインによっては、独自の画像サイズが追加されることもあります。これにより、テーマデザインに合わせた画像が自動で選ばれますが、設定ミスや選択ミスがあると意図しないサイズで表示されたり、レイアウトが崩れたりする原因になります。
用途別｜おすすめの画像サイズ一覧
以下は、ブログ記事はもちろん、固定ページでも汎用的に使える用途別の推奨画像サイズです。
| 用途 | 推奨サイズ（px） | 備考 |
|---|---|---|
| アイキャッチ画像 | 1000~1400×500~800 | SNSシェア時にも対応（OGP） |
| サムネイル | 200~400×200~400 | トリミングの有無に注意 |
| 記事内画像 | 600～900 × 400～700 | レイアウトやカラム構成に合わせて調整 |
| ヘッダー画像 | 幅1920 | フルスクリーン表示に適応 |
| ロゴ・アイコン | 400×100（@2x推奨） | Retinaディスプレイ対策 |
サイズ設定は、ユーザー体験やデバイスによる見え方にも大きく影響します。たとえば、スマホでは大きすぎる画像はレイアウト崩れを引き起こす可能性があるため、他のデバイスでどのように表示されるのかも合わせて考えることが大切です。
❓️何故1920pxで作成するの？
→A.一般的なデスクトップPCの画面解像度が1920pxだから！
「大きい画像のほうがきれいに表示される」と考えがちですが、実は多くのPCディスプレイやノートパソコンの解像度はフルHD（1920×1080px）が主流。これを超える大きさの画像を使っても、実際の表示領域が1920pxを超えない限り、ブラウザ側で縮小されて表示されるため、見た目の美しさは大きく変わりません。
よくある画像トラブルと対処法（WordPress編）
アップロードした画像が小さくなってしまう
原因：リサイズプラグインが作用している
対処法：プラグインの設定を変更する
画像サイズが大きすぎるとサイトが重くなり、サイトの表示速度に悪影響を及ぼします。
そのため、上限を超えるサイズの画像を小さく調整するプラグイン（スマホでいうアプリのようなものです）を導入して調整することが多いのですが、高さがありすぎる画像を入れると、横幅が極端に小さくなってしまうことがあります。
こんなときはプラグインの画像サイズの上限設定を変更しましょう。おすすめの設定は「横幅1920px、高さ無制限」です。
エディターで画像が小さくなってしまう
原因：エディターでサイズが指定されている
対処法： エディターで「フルサイズ」を選択／メディア設定を見直す
画像が小さく表示される問題は、WordPress初心者の方によく見られるトラブルの一つです。高解像度でアップロードされた画像であっても、WordPressが自動生成するサムネイル画像が意図せず使用されることで、縮小表示されてしまうことがあります。
画像を選択し、サイズ指定がされていないか確認してみましょう。
画像がぼやける・荒く見える
原因： 解像度不足／Retina未対応／小さい画像を拡大表示している
対処法： 高解像度画像を用意し、エディターかCSSでサイズ調整
スマートフォンや高解像度ディスプレイで閲覧した際に、画像が荒く見えると少しチープな印象を受けてしまう可能性があります。読者の信頼を得るためにも、鮮明な画像表示は大切なポイントです。レティーナディスプレイに関しては次項目で詳しく解説いたします。
レティーナディスプレイに対応するには？
Retina（高解像度）ディスプレイとはApple社が開発した高精細ディスプレイのことです。同じ面積に従来のディスプレイの2倍以上のピクセルを配置しているため、通常の画像だとぼやけて表示されることがあります。これに対応するために、webデザイナーは実際の表示サイズの2倍サイズ（@2x）の画像を用意し、表示サイズをCSSやHTMLで調整します。
ただし、もともと大きな画像を2倍サイズにするとファイルサイズが非常に大きくなってしまいます。また、元から大きな画像は、Retina環境でもぼやけが目立ちにくいため、筆者は一つの目安として「700px以下の画像は2倍サイズで用意する」ことを推奨しています。
サムネイルが勝手に切り抜かれる
原因： テーマや使用先が固定比率を要求
対処法： フルサイズや中サイズを選ぶ／画像の縦横比を整える
WordPressでは、サムネイル等で特定の画像サイズや比率を使用します。アイキャッチやギャラリー画像など、仕様上共通のサイズで表示される部分は特に気をつけて画像を選びましょう。
モバイルで画像がはみ出す・崩れる
原因： 幅・高さが固定されている／レスポンシブ対応が未設定
対処法： サイズを指定するクラスがついていない確認/max-width: 100% と height: auto を設定
スマホユーザーが多い昨今、モバイル表示での画像の見え方は重要です。テキストが読みづらくなったり、ページ離脱の原因にもなります。
もし画像表示が崩れている場合は、まずサイズ指定を確認してみましょう。
画像が表示されない／リンク切れになる
原因： ファイルの削除・移動／URLの間違い
対処法： メディアライブラリで再アップロード／投稿内の画像リンクを修正
アップロードした画像を削除したり、画像の場所が変わったりするとリンク切れが発生し画像が表示されなくなります。サイトの引っ越しなどを行った際は要注意です。
画像のデータ形式と使い分け
| 形式 | 特徴 | 向いている用途 |
| JPEG | 軽量で写真向き。透過不可 | アイキャッチ、背景など |
| PNG | 高画質で透過対応 | ロゴ、スクリーンショット、図解など |
| WebP | 高画質・高圧縮。用意が少し大変 | 汎用的なすべての画像におすすめ |
| SVG | 解像度に依存しないベクター形式 | ロゴ、アイコン、図形など |
| GIF | アニメーション対応。色数制限あり | 装飾的な簡易アニメに限定 |
WordPressでの注意点：
WebPやSVGを使用するにはプラグインや設定変更が必要な場合があります。テーマやエディターの対応状況も確認しておくと安心です。
基本的にJPEGを用い、背景を透明にしたい画像にはPNGを、ロゴなどの単純な形状かつ拡大縮小をしても画像を劣化させたくないものにはSVGを用います。
画像最適化で表示スピードとSEOを強化
画像はページの読み込み速度に直結します。特にモバイルファーストが重要な現在では、画像の最適化はSEOにも大きく影響します。
画像サイズは1枚あたり200KB以下が目安となります。
画質を保ちながら容量を軽くしたい場合は、iLoveIMG・TinyPNG・Squooshなどの画像圧縮ツールを活用するのがおすすめです。
WordPressで画像サイズを設定・調整する方法
WordPressでは、画像サイズの管理を複数の方法で行えます。
ここでは、CSSを用いずに画像サイズを変更する方法を紹介します。
- 画像挿入時に「サムネイル／中／大／フルサイズ」から選択する
- 画像を入れた後、幅や高さを細かく指定することも可能です
- フルを選ぶことでオリジナル画像をそのまま表示できます
上記の操作は使用しているエディターの種類（クラシックエディターまたはブロックエディター）や、適用しているテーマによって利用できない場合があります。もし画像サイズの選択肢が見当たらない場合は、お使いのエディターやテーマの設定を確認してみましょう。
まとめ
WordPressにおける画像サイズの設定は、サイトの見た目、表示速度、SEO対策すべてに影響する重要な要素です。
- 用途に応じた適切なサイズ設定で、表示崩れやぼやけを防ぐ
- Retina対応・画像圧縮で画質と軽さを両立
- 投稿・固定ページともに、管理画面やテーマに合わせて柔軟にサイズを調整
画像の扱いを最適化することで、ユーザーにとってもGoogleにとっても評価される、快適で魅力的なサイトに一歩近づきます。
＼あわせてチェック！／
サイトの見直しをお考えの方へ──
「サイトリニューアルお役立ち資料」を無料配布中！
サイトへの流入数を増やすための「SEO」に焦点を当て、構成の見直しや記事作成にも役立つヒントを詰め込んだ実践的な資料です。
