SWELLの記事内画像がぼやける原因は？元画像・挿入サイズ・表示幅の確認方法

SWELLの記事に入れた画像や、画像の中の文字がぼやけるときは、元画像・挿入サイズ・表示幅を順番に確認しましょう。元のファイルが粗いのか、小さい画像を大きく表示しているのかで、直す場所が変わります。

最初から画像を削除したり、サイト全体の設定を変更したりする必要はありません。この記事では、問題の画像を1枚選び、確認結果に合わせて修正し、記事のプレビューで見直す流れを解説します。

ぼやけ方から、最初の確認先を選ぶ

まず、ぼやけているのが編集画面だけか、記事のプレビューでも同じかを確認します。公開済みの記事なら公開ページでも見比べてください。読み込み直後だけ粗い場合は、画像の読み込みが終わってから判断します。

見え方	最初の確認先	次の行動
元のファイルも粗い	元画像の画質	再撮影・再書き出しをする
元画像は鮮明で、記事では粗い	挿入サイズ	小さいサイズを選んでいないか調べる
画像を大きくすると粗い	表示幅	幅を戻すか、大きい元画像を用意する
特定の端末だけ粗い	その端末での表示	同じ画像の幅と、読み込み後の状態を比べる
差し替えても古い画像に見える	保存とキャッシュ	保存後に開き直し、古い表示が残るか調べる

「元画像」は画像ファイルそのもの、「挿入サイズ」は記事で使う画像ファイルのサイズ候補、「表示幅」は記事の画面上で見せる幅です。この3つを同じ「画像サイズ」と考えないことが、原因を切り分けるポイントです。

元画像の鮮明さとピクセル寸法を確認する

アップロード前のファイルを、100％表示で見る

手元に元のファイルがある場合は、画像を見るアプリで開き、表示倍率を100％にして文字や輪郭を確認します。「100％」が見つからない場合は、アプリの表示設定で「等倍」「実際のサイズ」などの項目を探してください。「画面に合わせる」では画像が縮小されることがあるため、小さい表示で鮮明に見えるだけでは判断できません。

元画像の時点で文字がつぶれたり、輪郭がにじんだりしている場合、WordPressで「フルサイズ」を選んでも、失われた細部は戻りません。スクリーンショットなら必要な領域を広い画面で撮り直す、図解なら制作元から大きい寸法で書き出す、写真なら縮小前のファイルを探す、といった対応をします。

メディアの詳細で「寸法」を確認する

WordPressに入れたファイルは、管理画面の「メディア」→「ライブラリ」から対象画像を開いて確認します。グリッド表示なら添付ファイルの詳細、リスト表示なら画像の編集画面に、幅×高さの寸法が表示されます。

画像のピクセル寸法は、幅と高さの数値です。「1200 × 900ピクセル」なら幅1200px・高さ900pxで、px（ピクセル）はその単位です。一方、画面の「101KB」はファイル容量を表します。容量が大きいことと、文字や輪郭が鮮明なことは同じではありません。

アップロード後に画像編集や最適化をしている場合は、手元の元ファイルと、WordPressで使っている画像を分けて見比べます。管理画面の画像ファイルへのリンクを開くと、そのファイル自体の見え方も確認できます。

画像ブロックの挿入サイズを確認する

元画像が鮮明なら、次は記事の画像ブロックを確認します。WordPressは、アップロードした画像から複数のサイズを用意することがあります。元画像が大きくても、小さいサイズを選んで挿入していると、記事内で拡大されたときに粗さが目立ちます。

今回の確認では、幅1200pxの図解で「中」を選ぶと幅300pxの画像が使われました。「フルサイズ」に戻すと、画像ブロックで使う画像が幅1200pxのファイルに戻りました。その後、記事上の表示幅を600pxに指定できました。サイズ候補の寸法はサイトによって異なります。

この手順は、画像ブロックで使用するサイズを見直す操作です。元画像のピクセル数を増やす操作ではありません。画像ブロックのサイズ候補については、WordPress公式の画像ブロックの説明でも確認できます。

記事上の表示幅を確認する

画像ブロックの幅と配置を確認する

挿入サイズを見直しても粗い場合は、画像をどこまで広げているかを確認します。画像ブロックの「スタイル」タブ（白黒に分かれた円のアイコン）にある幅・高さ、ドラッグでの拡大、ツールバーの配置にある「幅広」「全幅」などを見ます。表示される項目はテーマやブロックの状態によって変わります。

この画面の幅600pxは操作例で、推奨値の固定指定ではありません。たとえば幅300pxの画像を600px幅で表示すると、横方向に2倍へ引き伸ばすことになります。一方、幅1200pxの画像を同じ600px幅で表示すると、横方向は半分に縮小されます。下の図で、画像ファイルの幅と表示幅の関係を見比べてください。

拡大したときに粗さが出る場合は、表示幅を小さくするか、より大きく鮮明な元画像を用意します。小さい画像ファイルを加工アプリで大きくするだけでは、元の細部を取り戻せません。

幅が「自動」や「100％」の場合、画面の横幅そのものではなく、画像を入れた領域に応じて見え方が変わります。設定欄の数値だけで判断せず、次のプレビュー確認まで行いましょう。

PCとスマートフォン幅で、同じ画像を見比べる

編集画面上部の「表示」から、デスクトップ・タブレット・モバイルなどの表示を切り替え、画像が本文の幅を超えていないか、文字が小さすぎないかを確認します。続けて「新しいタブでプレビュー」を開き、保存後の記事でも見直してください。プレビュー内の幅の切り替えは、実際の端末と完全に同じ条件になるわけではありません。端末だけで起きる問題は、その端末でも確認します。

画面上では小さく見える画像でも、高精細な画面では多くのピクセルを使います。幅600pxで見せる画像に対して、幅1200pxの鮮明な元画像を用意する、といった2倍の考え方は目安になります。ただし、画像内の文字、圧縮、端末によって見え方は異なるため、「2倍なら必ず直る」という基準ではありません。

文字の輪郭がぼやけているのか、鮮明でも小さすぎて読めないのかを分けて確認します。小さすぎる場合は、画像の画質だけを見直しても読みやすくなりません。文字を大きくした図解に作り直す、必要な画面だけを切り出す、説明を本文の文字へ移す、といった対応を検討します。

数値で調べたい場合は、ブラウザーの検証機能を使う

ここからは発展的な確認です。PCのChromeでは、プレビューの画像を右クリックして「検証」を開きます。開いた開発者ツールの左上にある要素選択ツール（矢印のアイコン）を有効にし、ページ上の画像にマウスを合わせると、幅・高さを確認できます。表示される数値はCSS上のピクセル数で、画像ファイルに記録された幅・高さとは別です。ブラウザーによって表示方法は異なります。Chrome公式の検査モードの説明

独自のCSSで画像を広げている場合は、その指定も確認します。CSSの幅指定を調べるときは、width・height・max-width・min-heightの違いを参考にしてください。画像の画質確認だけなら、最初からCSSを書き換える必要はありません。

改善しない場合は、圧縮と配信される画像を確認する

圧縮後の画像と、古い表示が残っていないかを見る

画像の軽量化で細部が失われている場合は、挿入サイズだけを変えても改善しません。元ファイルと、記事から開いた画像を同じくらいの大きさで比べ、文字の周りのにじみや輪郭を確認します。PNG・JPEG・WebPなどの形式名だけで原因を決めず、実際の画像を見て判断してください。

画像最適化のプラグインやCDN（画像などを配信する仕組み）を使っている場合は、画像の縮小・圧縮設定を確認します。調査のために設定を変えるなら変更前の値を記録し、1項目ずつ試してください。サイト全体に影響する設定は、対象画像の確認を済ませてから扱います。

差し替えても前の画像に見える場合は、記事が保存されているか、画像のURLが新しいものになっているかを確認し、プレビューやページを開き直します。それでも古い表示なら、利用中のキャッシュ機能の説明を確認します。キャッシュは表示用の情報を一時保存する仕組みです。元画像の画質不足そのものを直す機能ではありません。

srcsetは、一律に無効化せず確認する

srcset（ソースセット）は、画面の幅や精細さに合わせて、ブラウザーが複数の候補から画像を選ぶための仕組みです。「フルサイズ」を選んだ画像でも、記事のHTMLや配信の仕組みによって、別のサイズが読み込まれる場合があります。仕組みはMDNのレスポンシブ画像の解説で確認できます。

小さい画像が意図せず使われている疑いがある場合は、検証機能で読み込まれた画像と表示幅の関係を調べます。srcsetを無効にする設定があっても、最初の対処としてサイト全体へ適用しないでください。端末に合うサイズを選ぶ働きも変わり、必要以上に大きい画像を読み込む可能性があります。

ここまでの確認で絞れない場合は、対象記事のURL、問題がある画像、端末・ブラウザー、元画像の寸法、選択した解像度、試した変更を整理します。相談先が同じ条件を確認できるため、設定を手当たり次第に変更するより原因を調べやすくなります。

よくある質問

すべての画像をフルサイズにすれば直りますか？

必ず直るわけではありません。小さい挿入サイズを選んでいた場合は改善することがありますが、元画像が粗い場合、表示幅が大きすぎる場合、強い圧縮が原因の場合は、それぞれの確認が必要です。まず問題の画像1枚で見比べましょう。

PNGで保存し直せば、文字は鮮明になりますか？

すでにぼやけた画像をPNGに変換しても、失われた細部は戻りません。文字を含む図解や画面画像は、鮮明な制作元から形式・圧縮を変えて書き出し、文字の周りを見比べます。写真と図解では適した保存方法も異なります。WordPress公式の画像サイズと品質の説明

「設定」→「メディア」の数値を大きくすればよいですか？

まず、問題の画像ブロックで選んだサイズを確認してください。メディア設定の「中サイズ」「大サイズ」は、画像サイズ候補に関する設定です。記事の表示幅や、粗い元画像を修復する設定ではありません。設定値の意味はWordPress公式のメディア設定画面の説明で確認できます。

スマートフォンだけ、画像の文字が読みにくい場合は？

同じ画像について、輪郭がにじむのか、縮小されて文字が小さすぎるのかを分けます。にじむなら画質・読み込まれたサイズを、小さすぎるなら図解内の文字サイズや切り出す範囲を見直します。幅の切り替えだけで再現しない場合は、問題が出る端末でも確認してください。

まとめ

SWELLの記事内画像がぼやけるときは、元画像の鮮明さとピクセル寸法、画像ブロックの挿入サイズ、記事上の表示幅の順に確認します。直すのは、確認して原因が見つかった場所からです。

まず問題の画像を1枚選び、元ファイルと記事の見え方を比べましょう。小さい挿入サイズなら選び直し、拡大しすぎなら表示幅か元画像を見直します。修正後は、次の3点を確認してください。

• 保存してプレビューを開き直す
• 同じ画面幅・表示倍率で、文字や輪郭を比べる
• PCとスマートフォン幅で、読める大きさか確認する

読みやすさを確認できたら、同じ原因の画像へ対応を広げてください。

目的別に次の記事を選ぶ

基本操作の確認や、画像を整理する前の判断には、次の記事が役立ちます。

画像の選択やブロック設定など、SWELLで記事を書く基本操作を確認したい方は、ブロックエディターの使い方をご覧ください。

差し替え後の画像を削除するか迷う方は、使用箇所の調べ方を先に確認してください。メディアの「未添付」という表示だけでは、未使用とは判断できません。