WordPressで画像がぼやけるときは、まず「元画像も粗いのか」「記事に表示したときだけ粗いのか」を比べます。原因を確かめる前に、プラグインの追加や画像の一括処理をする必要はありません。
元画像はきれいなのに記事内でぼやける場合は、画像ブロックで選んだ解像度と表示幅を確認します。一覧やアイキャッチだけが粗い場合は、本文とは分けてテーマ側の画像設定を調べます。
画像を差し替えた後だけ変化が見えないときは、キャッシュの影響も確認しましょう。
この記事では、元画像、画像ブロック、表示場所、キャッシュの順に、安全に原因を絞る方法を解説します。
画像がぼやける仕組みを最初に理解する
デジタル画像は、小さな点であるピクセルの集まりです。たとえば横幅600ピクセルの画像を、ページ上で横幅1200ピクセルに広げて表示すると、存在しない細部をきれいに増やすことはできません。ブラウザは周囲の色を補いながら拡大するため、輪郭や文字がにじんで見えます。
一方、横幅3000ピクセルの画像を600ピクセルで表示すれば、見た目は比較的きれいでも、必要以上に大きなファイルを読み込む可能性があります。画質だけを優先して常に最大の画像を使うと、表示速度や通信量に影響します。画像は、実際に表示する大きさに対して小さすぎず、大きすぎないものを選ぶ必要があります。
WordPressは画像をアップロードしたとき、元画像に加えて「サムネイル」「中」「大」など複数のサイズを自動生成します。テーマやプラグインが独自のサイズを追加することもあります。同じ一枚を選んだつもりでも、ページでは元画像ではなく小さな派生画像が表示されている場合があるのです。
最初に切り分けたい四つの状態
元の画像ファイルがぼやけていないか
WordPressへ入れる前の画像をパソコンやスマートフォンで開き、等倍に近い状態で確認します。元画像の時点でピントが合っていない、保存を繰り返して劣化している、スクリーンショットの文字が小さすぎる場合は、WordPressの設定だけでは鮮明になりません。
SNSやメッセージアプリから保存した画像は、送信時に縮小・圧縮されていることがあります。デザインツールのプレビュー画像を保存した、画面を拡大してスクリーンショットを撮った、といった場合も元の解像度を確認してください。可能なら、撮影データやデザインツールから直接書き出した原本を用意します。
編集画面だけか公開ページもぼやけるか
WordPressの編集画面は、実際のテーマと表示幅やCSSが異なることがあります。編集画面のプレビューが少し粗くても、公開前プレビューでは問題がない場合があります。反対に、編集画面ではきれいでも、テーマ側のアイキャッチや一覧カードだけが粗くなることもあります。
記事編集画面だけで判断せず、プレビューを新しいタブで開きます。パソコンとスマートフォンの両方で、記事本文、トップページ、カテゴリ一覧など実際に画像が使われる場所を確認してください。
一枚だけかサイト全体か
特定の画像だけがぼやけるなら、元画像の大きさ、画像ブロックの解像度、切り抜き方に原因がある可能性が高いでしょう。多くの画像が一斉に粗くなった場合は、テーマ変更、画像最適化プラグイン、CDN、キャッシュ、CSSなどサイト全体に関わる設定を疑います。
「どのページでも起きる」「記事本文は正常だが一覧だけ起きる」「新しくアップロードした画像だけ起きる」のように範囲を整理すると、確認箇所を絞れます。
ぼやけなのか切り抜きなのか
顔や文字が途中で切れている状態は、解像度不足ではなく、縦横比やトリミングの問題かもしれません。テーマのサムネイル枠を埋めるために画像が中央で切り抜かれていると、見せたい部分が欠けたり、切り抜いた狭い範囲が拡大されたりします。
「粗い」「引き伸ばされている」「一部が切れている」「色がにじむ」を分けてメモします。同じ画像トラブルでも対処は異なります。
WordPressで画像がぼやける主な原因
表示枠より小さい画像を使っている
最も分かりやすい原因は、画像の実寸より大きく表示していることです。横幅500ピクセルの画像を、記事本文の横幅800ピクセルいっぱいに表示すれば拡大されます。特に文字入りの図、ロゴ、管理画面のスクリーンショットは、写真より輪郭の粗さが目立ちます。
元画像の横幅と、ページ上で画像が表示される横幅を比べます。ブラウザの検証機能を使える場合は表示サイズと読み込まれたファイルの大きさを確認できます。難しい場合は、画像を右クリックして新しいタブで開き、ファイル自体の大きさと見え方を確認するだけでも手がかりになります。
画像ブロックで小さい解像度を選んでいる
WordPressの画像ブロックでは、テーマや元画像に応じて「サムネイル」「中」「大」「フルサイズ」などの解像度を選べます。記事幅いっぱいに表示する画像で「中」を選ぶと、小さな画像ファイルが引き伸ばされてぼやけることがあります。
次の順番で、画像ブロックの解像度を確認します。
- 記事の編集画面で、ぼやける画像を選びます。
- 画像ブロックの設定にある「解像度」を確認します。項目名や位置は環境によって異なる場合があります。
- 「中」など小さいサイズが選ばれていたら、利用できる「大」などへ切り替えます。
- 公開前プレビューを開き、同じ表示幅で画質を比べます。
鮮明になったら、必要以上に大きな画像を読み込んでいないかも確認します。「フルサイズ」への一括変更は避け、画質と表示速度のバランスを見て選びましょう。
元画像をどの大きさで用意すればよいか迷う場合は、WordPress画像サイズの目安で、本文画像やアイキャッチなど用途別の決め方を確認してください。表示幅に合う画像を用意してから、この記事の手順でぼやけの原因を切り分けます。
アップロード後に画像サイズを変更した
「設定」の「メディア」でサムネイル、中、大の寸法を変更しても、通常は変更前にアップロードした画像の派生サイズが自動で作り直されるわけではありません。過去の画像には古い寸法のファイルが残り、新しい画像だけ新しい設定で生成される状態になることがあります。
設定変更後に古い画像だけぼやける場合は、必要な画像サイズの再生成が検討対象です。再生成プラグインを使う方法もありますが、処理対象が多いとサーバー負荷や保存容量へ影響する可能性があります。先にバックアップを取り、少数の画像で確認してから進めます。
テーマが小さいサムネイルを拡大している
記事本文ではきれいなのに、トップページや関連記事のカードだけ粗い場合は、テーマのサムネイル指定と表示枠が合っていない可能性があります。テーマが横幅300ピクセルの画像を取得し、CSSで600ピクセルに広げていれば、元画像が大きくても表示は粗くなります。
この問題は投稿編集画面だけでは直らないことがあります。テーマの推奨アイキャッチサイズ、カスタマイザーやサイトエディターの画像設定、テーマ更新情報を確認します。子テーマや独自CSSを使用している場合は、画像の幅や高さを固定していないか制作者へ確認してください。
縦横比の違う画像を無理に枠へ合わせている
16対9の枠へ正方形の画像を入れると、テーマや画像ブロックの「カバー」表示により上下が切れたり、拡大されたりします。元画像のピクセル数が足りていても、トリミング後に使える範囲が狭くなると粗さが目立つ場合があります。
画像ブロックのアスペクト比、幅、高さ、拡大方法を確認します。WordPress公式の画像ブロック資料では、カバーは枠全体を埋めるため一部が切り抜かれ、コンテインは画像全体を表示する代わりに余白ができる場合があると説明されています。用途に合う方を選び、必要なら最初から表示枠と同じ縦横比で画像を書き出します。
圧縮や最適化が強すぎる
画像最適化プラグインやCDNは、ファイルを軽くするために圧縮や形式変換を行います。適切に使えば表示速度の改善に役立ちますが、画質設定が低すぎる、何度も再圧縮される、特定の端末へ小さすぎる画像が配信されると、色の境界や細い文字が崩れることがあります。
最適化機能を疑う場合でも、すぐに一括削除や全画像の再処理をしないでください。テスト用の一枚を用意し、最適化前後のファイルを比較します。CDNの画像変換、遅延読み込み、WebP変換が別々のプラグインで重複していないかも確認します。
ブラウザやキャッシュに古い画像が残っている
同じファイル名で画像を差し替えると、ブラウザ、キャッシュプラグイン、サーバー、CDNのどこかに古い画像が残り、修正前の粗い画像が表示されることがあります。編集者の画面だけ古く、別の端末では新しい画像が表示されることもあります。
シークレットウィンドウや別の端末で確認し、ページを再読み込みします。それでも変わらなければ、使用中のキャッシュ機能の手順に従って対象ページや画像のキャッシュを消します。公開中サイトで全キャッシュを頻繁に削除すると一時的に負荷が上がる場合があるため、対象を限定できるなら限定します。
初心者向けの確認順
元画像の寸法を確認する
メディアライブラリで対象画像を開き、画像の寸法を確認します。パソコン側のファイル情報でも構いません。記事本文の表示幅が分からない場合でも、極端に小さな画像でないかは判断できます。たとえば横幅300ピクセルの画像をページ幅いっぱいのメイン画像に使うなら、解像度不足を疑うべきです。
ただし、「必ず何ピクセルなら安全」という共通の正解はありません。テーマの本文幅、全幅表示の有無、高精細ディスプレイへの対応、画像の内容によって必要な大きさは変わります。サイトの実際の表示枠を基準にします。
画像ブロックの解像度を確認する
投稿または固定ページの編集画面で対象画像を選択し、設定サイドバーを開きます。解像度が「サムネイル」や「中」なら、「大」に変更してプレビューします。ここで改善すれば、選ばれていた派生画像が小さすぎた可能性が高いでしょう。
画像の幅だけをCSSやブロック設定で大きくしても、読み込むファイルが小さいままなら鮮明にはなりません。表示幅と解像度の両方を見ることが重要です。
公開前プレビューを複数の幅で見る
デスクトップ幅、タブレット幅、スマートフォン幅で確認します。WordPressは利用可能な複数サイズを画像のマークアップへ含め、ブラウザが画面幅などに応じた画像を選べる仕組みを備えています。ある端末だけぼやける場合は、生成されたサイズやテーマが指定する情報に問題がある可能性があります。
端末を変えたときに、同じ画像の別ファイルが読み込まれることは正常な動作です。重要なのは、表示幅に対して十分な画像が選ばれているかです。
同じ場所に別の大きな画像を入れて比べる
原因が画像か表示枠か分からないときは、テスト記事または下書きで、十分な大きさの別画像へ一時的に置き換えます。別画像が鮮明なら元画像側、どちらも粗いならテーマや表示設定側の可能性が高くなります。
公開記事で試す場合は、元に戻せるよう変更前の状態を控えます。公開中の重要ページを直接編集するより、複製した下書きや検証環境を使うと安全です。
キャッシュの影響を除外する
別ブラウザやシークレットウィンドウで同じURLを開きます。ログイン中だけ、または自分の端末だけ表示が違うなら、キャッシュや管理者向け表示の影響が考えられます。画像URLの末尾やファイル名が、差し替え前と同じかも確認します。
記事本文の画像を直す方法
十分な大きさの元画像へ置き換える
元画像が表示枠より小さいなら、より大きな原本から書き出し直します。小さなJPEGを画像編集ソフトで拡大保存しても、失われた細部は基本的に戻りません。撮影データ、デザイン元ファイル、元のスクリーンショットから再作成するのが確実です。
文字入り画像は、文字を後から画像へ重ねた元データから再書き出しします。本文で表現できる文字は画像に閉じ込めず、見出しや文章として置くことも検討してください。画面幅が変わっても読みやすく、修正もしやすくなります。
適切な解像度を選び直す
大きな元画像が登録されているなら、画像ブロックの解像度を「大」など適切なものへ変更します。必要以上にフルサイズを使わず、プレビューで輪郭と読み込み速度の両方を見ます。複数画像が並ぶギャラリーや小さなカードでは、中サイズで十分な場合もあります。
幅と高さの固定を見直す
画像ブロックの幅と高さを両方固定すると、元画像と異なる縦横比へ引き伸ばされることがあります。WordPress公式資料でも、多くの場合は高さを自動にし、幅に合わせて比率を保つ考え方が案内されています。意図的なデザインでなければ、高さを自動へ戻して確認します。
独自CSSで width と height を指定している場合は、height: auto; で比率が保たれるかを制作者へ相談します。変更は他の画像にも影響するため、意味が分からないままテーマファイルを直接編集しないでください。
アイキャッチ画像や一覧だけがぼやける場合
記事本文の画像ブロックと、テーマが表示するアイキャッチは別の仕組みで出力されることがあります。本文で解像度を変えても、トップページのサムネイルは変わらない場合があります。
まず、利用中テーマの推奨アイキャッチ寸法と縦横比を確認します。過去にアップロードした画像だけ粗いなら、テーマ変更前の小さなサムネイルが残っている可能性があります。バックアップを用意したうえで画像サイズの再生成を検討します。
一覧カードの表示枠がテーマの想定より大きく変更されている場合は、CSSだけでなく、テーマが取得する画像サイズの指定も合わせる必要があります。これはPHPやテンプレートの知識が必要になることがあるため、テーマ提供元または制作者へ相談する方が安全です。
ロゴや線画、文字入り画像がぼやける場合
ロゴ、アイコン、細い線の図、文字入りバナーは、写真よりも拡大や圧縮の影響が目立ちます。元データがベクター形式で用意されている場合は、サイトの安全設定や対応状況を確認したうえでSVGなどの利用を検討できます。ただし、WordPressではSVGのアップロードが標準で許可されない構成もあり、信頼できないSVGには安全上の問題があり得ます。初心者が拡張子だけを変えてアップロードする方法は避けてください。
PNGで書き出す場合は、表示予定サイズより余裕のある寸法にし、透明部分や細い文字が崩れていないか確認します。JPEGは写真に向いていますが、文字や線の境界に圧縮ノイズが出やすいことがあります。WebPやPNGを含め、内容に合う形式を選びます。
画像サイズを再生成するときの注意点
テーマを変更した、メディア設定を変更した、アイキャッチの表示枠を作り直した場合は、既存画像の派生サイズを再生成すると改善することがあります。ただし、再生成はサイト内の多数の画像ファイルへ影響する作業です。
- 作業前にデータベースとアップロードフォルダのバックアップを用意する
- 現在使っているテーマが必要とする画像サイズを確認する
- 最初は少数の画像または検証環境で試す
- サーバー容量と処理時間を確認する
- 完了後に記事本文、一覧、関連記事、スマートフォン表示を確認する
- キャッシュやCDNを利用している場合は、提供元の手順に沿って更新する
不要になった派生画像を一括削除する機能もありますが、テーマや過去記事が参照しているファイルまで消す危険があります。何を削除する処理か理解できない場合は実行せず、バックアップから戻せる担当者へ依頼します。
やってはいけない対処
小さい画像を単純に拡大して保存する
画像編集ソフトで縦横の数字を増やすだけでは、元になかった細部は戻りません。AI拡大などで見た目が改善する場合もありますが、商品写真の文字、図表の数値、人物の特徴が変わる可能性があります。正確さが必要な画像では原本から作り直します。
すべての画像をフルサイズへ変更する
フルサイズにすれば解像度不足が改善することはありますが、巨大な画像を大量に読み込めばページが重くなります。小さく表示するサムネイルまで最大ファイルを使う必要はありません。表示場所ごとに適切なサイズを選びます。
原因を確認せずプラグインを追加する
画像の再生成、圧縮、キャッシュ、CDNなどのプラグインを重ねると、どの機能が画像を処理したのか分かりにくくなります。まず既存機能と表示状態を確認し、不足する機能が明確になってから追加します。使わないプラグインは残さず、安全な手順で整理します。
公開中のテーマファイルを直接書き換える
親テーマのファイルを直接変更すると、更新で変更が消えたり、構文ミスでサイトが表示できなくなったりします。コード修正が必要な場合は、バックアップと検証環境を用意し、子テーマや適切なカスタマイズ方法を使います。
直らないときに確認する情報
制作者やテーマのサポートへ相談するときは、「画像がぼやけます」だけでなく、再現に必要な情報をまとめます。認証情報や管理画面のパスワードは送らないでください。
- 問題が見えるページのURL
- 記事本文、アイキャッチ、一覧など発生場所
- 元画像の横幅・高さとファイル形式
- 画像ブロックで選んだ解像度
- パソコンとスマートフォンのどちらで起きるか
- 使用中のテーマ名と、画像関連プラグインの有無
- いつから起きたか、直前にテーマや設定を変えたか
- 別ブラウザやシークレットウィンドウでも再現するか
画面のスクリーンショットを添える場合は、個人情報、管理画面URL、ユーザー名、注文情報などが映っていないか確認します。元画像と実際に表示された画像のURLが分かれば、どのサイズが読み込まれているか判断しやすくなります。
症状から確認場所を絞る
画像内の文字だけ読みにくい
写真部分は問題ないのに、小さな文字や細い線だけがにじむ場合は、書き出し寸法や圧縮方式が合っていない可能性があります。文字を含む画像をJPEGで強く圧縮すると、文字の周囲に色のむらが出やすくなります。元のデザインデータから、表示枠に余裕のある寸法でPNGや適切な品質のWebPへ書き出し直して比較します。
文字が情報の中心なら、画像を大きくするだけでなく、同じ内容を本文にも書きます。スマートフォンで画像が縮小されたときにも読者が情報を得られ、検索やコピーもしやすくなります。
一覧では粗いが記事を開くときれい
この症状は、記事本文と一覧で別の派生画像が使われている可能性を示します。投稿編集画面で本文画像を入れ直しても、一覧のアイキャッチには反映されないことがあります。テーマのアイキャッチ推奨寸法とカードの縦横比を確認し、同じテーマの標準設定でも再現するかを見ます。
独自CSSでカード幅だけを広げた場合は、取得する画像サイズが以前のままかもしれません。見た目の幅と、実際に読み込むファイルの指定を一緒に調整する必要があります。
管理画面のプレビューだけ粗い
編集画面は記事の完成表示ではありません。ブロックエディター内で軽いプレビュー画像が使われていても、公開前プレビューでは適切な画像が表示される場合があります。変更を始める前に、公開前プレビューと実際のテーマ側を確認します。
公開ページが正常なら、読者に届く画像の画質問題ではありません。ただし、編集作業に支障があるほど粗い場合は、ブラウザの拡大率、管理画面用CSS、画像最適化機能が管理画面にも働いていないかを確認します。
時間がたつと粗くなる、または端末ごとに違う
最初はきれいだったのに後から粗くなった場合は、画像最適化の非同期処理やCDN変換が完了した後に別ファイルへ切り替わった可能性があります。端末ごとに違う場合も、レスポンシブ画像やCDNの端末別配信が関係していることがあります。
同じページを同じ時刻に複数端末で開き、画像URLと表示幅を記録します。最適化プラグインを停止して公開サイトを長時間放置するような確認は避け、検証環境または一枚のテスト画像で比較します。
画像をクリックして開くときれい
記事内では粗いのに、画像をクリックして元ファイルを開くときれいなら、記事内で小さい派生画像を拡大している可能性が高くなります。画像ブロックの解像度を確認し、表示枠に合う「大」などへ変更します。
リンク先が元画像であることと、記事内で元画像を読み込むことは別です。リンク設定を「メディアファイル」に変えても、ページ内で表示される画像の解像度が自動的に上がるとは限りません。
画像のぼやけを防ぐ運用
記事を作るたびに原因調査をしなくて済むよう、サイトで使う画像の基本ルールを決めます。アイキャッチ、記事内の横長画像、正方形サムネイル、ロゴなど、用途ごとに推奨する縦横比と書き出し寸法をまとめます。
ただし、テーマを変えれば表示枠も変わります。数字を永久のルールにせず、現在のテーマと実際の表示を基準に更新します。画像を書き出した人、記事へ入れる人、公開確認をする人が同じチェック項目を使うと、品質がそろいやすくなります。
- 原本を別に保管し、圧縮済み画像だけを唯一のデータにしない
- 用途に合う縦横比で書き出す
- 画像ブロックの解像度を表示場所に合わせる
- 幅と高さを無理に固定しない
- 公開前にパソコンとスマートフォンで確認する
- テーマ変更後は主要なアイキャッチと一覧を再確認する
- 最適化前後の画質と容量を少数の画像で比較する
よくある疑問
画像は大きいほどきれいですか
表示枠に対して小さすぎる画像はぼやけやすいですが、大きいほど常に最適とは限りません。必要以上に大きい画像はファイル容量が増え、表示速度へ影響します。実際の表示幅、端末、画像の内容に合う大きさを選びます。
メディア設定を変えれば過去画像も直りますか
設定を変えただけでは、過去にアップロードした画像の派生サイズが作り直されない場合があります。設定変更後の画像だけ状態が違うときは、バックアップを取ったうえで必要なサイズの再生成を検討します。
WebPにすればぼやけは直りますか
WebPは画像形式の一つであり、小さな画像を大きく表示している問題や、テーマが小さなサムネイルを選ぶ問題を自動で直すものではありません。変換時の画質設定によっては、かえって文字や輪郭が崩れることもあります。まず寸法と表示サイズを確認します。
スマートフォンだけ粗く見えるのはなぜですか
画面幅や画面密度に応じて、ブラウザが別サイズの画像を選んでいる可能性があります。また、モバイル用レイアウトで画像が大きく表示されている、CDNが端末別に変換していることも考えられます。スマートフォンで読み込まれた画像URLと表示幅を確認できると切り分けやすくなります。
画像を差し替えたのに変わりません
同じファイル名やURLを使ったため、ブラウザ、キャッシュプラグイン、サーバー、CDNに古い画像が残っている可能性があります。別ブラウザで確認し、利用中サービスの手順に沿って対象キャッシュを更新します。新しいファイル名でアップロードすると違いを確認しやすくなります。
公開前の確認チェック
- 元画像そのものは鮮明で、必要な寸法がある
- 画像ブロックで小さすぎる解像度を選んでいない
- 表示幅より極端に小さな画像を拡大していない
- 幅と高さの指定で縦横比が崩れていない
- 切り抜きとぼやけを区別できている
- 記事本文とアイキャッチ一覧を別々に確認した
- パソコンとスマートフォンの両方で見た
- 別ブラウザでキャッシュの影響を確認した
- 圧縮やCDNの処理が重複していない
- 一括再生成や削除の前にバックアップを用意した
まとめ
WordPressで画像がぼやけるときは、すぐにプラグインやコードを変更するのではなく、元画像、選択した解像度、表示サイズ、表示場所、キャッシュの順で確認します。特に多いのは、小さな画像を大きく表示しているケースと、画像ブロックやテーマが小さい派生画像を使っているケースです。
記事本文だけが粗いなら画像ブロックの解像度を、一覧やアイキャッチだけが粗いならテーマの推奨寸法や生成サイズを確認します。設定変更後の過去画像は再生成が必要になる場合がありますが、必ずバックアップと少数テストを先に行います。
画質と表示速度はどちらか一方を最大にすればよいものではありません。実際の表示枠に合う画像を用意し、WordPressとブラウザが適切なサイズを選べる状態にすることが、鮮明さと軽さを両立する基本です。
