本記事はアフィリエイト広告を含みます。
WordPressで画像がぼやけるときは、元画像もぼやけるなら再取得、公開画面だけなら読込サイズと配信設定を先に調べます。小さいサムネイルを拡大表示しているだけなら、画像加工なしで直せる場合があります。同じ箇所を比べて、劣化する段階を絞りましょう。
元ファイルに細部が足りないのか、WordPressが小さい派生画像を表示しているのかで対処は変わります。引き伸ばす前に、公開画面で使われているファイルを特定しましょう。
特定サイトで行った画質改善の実測結果ではありません。
どの段階からぼやけるか、同じ箇所で比較
元ファイル、メディアライブラリ、公開記事の順に、文字やロゴの縁など同じ箇所を見ます。ブラウザーの拡大率と画面条件もそろえます。「スマホだけ」「特定の一枚だけ」「全体」という範囲が分かると、元画像、テーマ、画像配信のどこから調べるか決めやすくなります。
元画像からぼやけるなら、ピント、取得時の寸法、保存時の圧縮を確認します。元画像は鮮明で公開記事だけぼやけるなら、画像ブロックやテーマ、配信された派生画像を確認します。どちらかを先に分けると、不要な加工を減らせます。
比較するときはブラウザの拡大率をそろえてください。片方が200％、もう片方が100％では、表示条件の違いを画質の違いと見誤ります。
確認用に画像を何度も上書き保存せず、元ファイルを残してください。後からどの段階で劣化したかを見分けられるように、加工版は別名にします。
読み込まれた画像が表示幅に足りているか
実際に読み込まれた画像のピクセル寸法と、記事内の表示幅を比べます。画像リンクを別タブで開くだけでは原本へ移動する場合があるので、必要なら開発者ツールの読込URLを見ます。小さい派生画像を広げているなら、画像ブロックやテーマ側で選択する解像度が修正候補です。
配信サイズを直しても元ファイルの輪郭が曖昧な場合は、元画像の再取得や撮り直しを先に検討します。それができず、掲載に必要なサイズが足りないときに限って拡大処理を試し、文字やロゴの正確さは元資料と照合します。
ピクセル数は画像の縦横の寸法です。ファイル容量が大きくても、記事で表示する幅に必要なピクセル数があるとは限りません。
横300ピクセルの画像を900ピクセル幅へ伸ばしても細部は増えません。まず大きい原本がライブラリに残っているかを探します。容量の大きさやDPIの数値だけを画質の基準にせず、縦横の寸法と、実際に表示される大きさを合わせて見ましょう。
WordPressの画像ブロックには、元画像とテーマの対応に応じて、フルサイズ・大・中・サムネイルなどの解像度選択があります。画像を選択し、設定内の解像度と表示幅を見直します。WordPress公式・画像ブロック
フルサイズを選んでも、ブラウザーはsrcsetの候補とsizesの表示幅、画面のピクセル密度などから画像を選びます。スマートフォンだけぼやける場合も、配信された候補を調べる理由があります。原因を特定する前に、この仕組みをサイト全体で無効にしないようにします。MDNのレスポンシブ画像説明
URLにサイズの接尾辞や-scaledがある場合も、元と派生画像の寸法を比較する手掛かりにします。縮小されたというだけで不具合とは限りません。テーマ変更後から発生したなら、必要な画像サイズと既存の派生画像が合っているかを調べ、全画像の削除や再生成はバックアップと影響を整理してから検討します。
確認を依頼するときは、テーマ名、問題の公開ページ、画像URL、表示幅、元画像の寸法を添えます。「全画像か一枚だけか」「PCとスマホのどちらか」も分かると、テーマ設定と個別画像の問題を絞りやすくなります。
圧縮・切り抜き・背景表示の違い
縦横の寸法が足りていても、保存時に強く圧縮された画像では、文字の周りににじみが残ることがあります。元画像と公開画像の同じ文字を拡大し、寸法不足と分けて見ます。
圧縮プラグインやCDNを使うなら、元を残して一枚だけ条件を変えます。形式や圧縮を変えた画像で文字のにじみが変わるかを見て、変更点を記録しましょう。配信設定を直しても古い画像が残る場合はキャッシュの影響も分けます。複数機能を同時に止めると原因を追いにくくなります。
画像の一部が見えないなら、画質ではなく切り抜き設定の問題かもしれません。WordPressの「Cover」は枠を埋めるように表示するため一部が切れ、「Contain」は画像全体を収めるという違いがあります。WordPress公式・背景設定
ヘッダーの背景画像は、横幅だけでなく枠の高さとの比率も影響します。Cocoonのヘッダーを使っている場合は、ヘッダー画像のサイズと表示の確認へ進むと、本文の画像ブロックと分けて設定できます。
元画像が小さい場合は再取得・撮り直しから検討
元が小さい場合は、大きな原本を探す→撮り直す→表示を小さくする→作り直す、の順に考えます。料金や操作画面の文字なら再取得が優先です。撮り直せない写真に限って補正を候補にし、元にない細部を事実として復元できるとは考えないようにします。
操作画面の文字なら、大きい画面で撮り直す方法が有力です。ロゴなら正規の大きい素材やベクター形式を探します。読み取れない料金や数字をAIで補い、正しい情報として掲載するのは避けてください。
撮り直せない写真の見え方を整えたいなら、Aiarty Image Enhancerなどを自分の一枚で試せます。改善の判断は鮮明さだけでなく、顔・文字・模様・色が変わっていないことです。WordPressの表示設定が原因だった画像に、有料の補正を追加する必要はありません。
次の確認手順はこちらです。
商品画像は、形や色が変わると読者の理解に影響します。見た目の改善だけでなく、元の商品を誤って伝えないかを確認して採用してください。
元画像を撮り直せない写真だけ、補正を試す
読込サイズや圧縮を直しても元画像の不足が残る場合は、Aiarty Image Enhancerが候補です。まず一枚を同じ掲載サイズで比べ、顔・文字・商品の形が不自然になっていないか見ましょう。
公式サイトで料金・利用条件を確認
利用前に製品案内へ移動します。WordPressの表示設定で直る場合は補正不要です。無料版には出力制限があります。
直した後は掲載サイズで見直す
直したらPCとスマートフォンの公開記事で、本文を読む大きさに戻して見ます。画像単体の等倍では良くても、記事中で小さすぎたり切れたりする場合があります。変更前後を同じ条件で比べ、画質と読み込み負担の両方が用途に合う状態を選びます。
見る箇所は、必要な文字が読めるか、輪郭が不自然でないか、画像が枠から切れていないかです。差し替え後も古い画像が出る場合は、ブラウザやサイトのキャッシュの影響を切り分けます。
表示サイズや配信で直れば、設定を記録して完了です。元画像の補正が必要な人は無料版で保存結果を試す手順へ、モデルを迷う人は同じ寸法で比べる方法へ進めます。原因に合う対処を選べば、不要な再加工を減らせます。
