SWELLで画像がぼやける原因と対処法｜くっきり表示するコツ

2026年10月29日

※本記事はアフィリエイト広告を含む記事へのリンクを含みます。

記事に貼った画像が、なんだかぼやけていたり文字がにじんでいたりして気になったことはありませんか。せっかく用意した画像も、ぼやけていると記事全体が安っぽく見えてしまいますよね。実は画像がぼやけるのには、いくつかの決まった原因があります。

この記事では、SWELLで画像がぼやける原因を6つに分けてわかりやすく解説します。私が実際にやってしまった失敗をもとに、原因を知ってから対処法へ進む順番でお伝えしますね。今日から、くっきりした画像で記事を作れるようになりますよ。

※まだSWELLを導入していない方へ：SWELLは買い切り型のWordPressテーマなので、一度購入すれば追加費用なしでずっと使えます。この記事で紹介している設定も、ブロックエディタ上でクリックするだけで再現できますよ。

デザインに悩む時間を減らして、記事を書くことに集中できる環境が手に入ります。

ニャフィ

貼った画像が、なんだかぼやけて見えるにゃ…

たいがブログ

気になりますよね。原因がわかれば、くっきり直せますよ。

ニャフィ

大きい画像にすると、今度は重くならないかにゃ？

たいがブログ

画質と軽さのバランスも含めて、順番にご案内しますね。

▼あわせて読みたい：画像の多い記事も快適に表示するなら、サーバーの速さが土台になります。ブログの土台になるサーバー選びはこちらで解説しています。

SWELLで画像がぼやける主な原因

画像がぼやける原因の多くは、SWELLの不具合ではなく、画像そのものや設定にあります。特に多いのが、表示する大きさに対して画像が小さすぎるケースです。

画像は、小さいものを引き伸ばすと必ずぼやけてしまう性質があります。まずは「画像のサイズ」と「選んでいる表示サイズ」を疑ってみましょう。

記事の横幅より小さい画像をアップロードすると、表示するときに引き伸ばされてぼやけます。私もスマホで撮った画像を縮小しすぎて、記事に貼ったら輪郭がにじんでいたことがありました。

WordPressは、アップロードした画像からサムネイルや中サイズなどの縮小版を自動で作ります。画像ブロックの設定で小さいサイズが選ばれていると、それが引き伸ばされてぼやけて見えるんです。

画像サイズ以外にも、圧縮のしかたや保存形式がぼやけの原因になることがあります。ここからは、見落としやすい原因を紹介していきます。

以前使っていた別のテーマでは、アイキャッチが意図しない大きさに引き伸ばされ、ぼやけて見えることがよくありました。SWELLは画像を比較的きれいに表示してくれるぶん、ぼやけるときは画像側に原因があることが多いですよ。

表示速度を上げようと圧縮率を高くしすぎると、画質が落ちてぼやけます。私も軽さを優先して圧縮を強めにしたところ、レビュー記事の商品写真が粗く見えてしまった失敗があります。

スクリーンショットなど文字が多い画像をJPEGで保存すると、文字のまわりがにじみやすくなります。文字入りの画像はPNGで保存するほうがくっきり見えますよ。

最近のスマホやパソコンは画面がとても精細なため、表示する幅ちょうどの画像だと物足りなく見えることがあります。表示幅の2倍程度の大きさを目安にすると、くっきりしますよ。

アイキャッチに縦長や小さめの画像を使うと、表示枠に合わせて拡大され、ぼやけることがあります。横長で大きめの画像を用意するのがおすすめです。

原因がわかったら、いよいよ画像をくっきり表示させる対処法に進みましょう。ここでは、前半で紹介した6つの原因に合わせた対処法を手軽なものから順番にまとめています。

ポイントは、画質と軽さのバランスをとることです。大きすぎず小さすぎない画像を用意できれば、くっきり見えて表示も速くなりますよ。

原因①⑤⑥への対処です。画像は表示する幅の2倍程度の大きさで書き出し、アイキャッチは横長で大きめのものを用意しましょう。私もこのルールに変えてから、スマホで見ても画像がにじまなくなりました。

原因②への対処です。画像ブロックを選び、右サイドバーの「画像サイズ」を「大」や「フルサイズ」に変えてみましょう。選び直すだけで一気にくっきりすることも多いですよ。

原因③への対処です。画像圧縮プラグインやツールの圧縮率を一段階ゆるめて、画質と容量のバランスを確認しましょう。以前使っていた別の圧縮ツールでは粗さが目立ちましたが、設定を見直すだけで見違えるほどきれいになりました。

原因④への対処です。スクリーンショットや図解など文字が多い画像はPNGで保存しましょう。私は手順解説のスクショをPNGに変えてから、細かい文字まで読みやすくなったと実感しています。

▼あわせて読みたい：画像がきれいになったら、次は読まれる記事を増やしていきましょう。無料から使えるキーワード調査ツールの実力はこちらで正直にレビューしています。

大きい画像を使うとページが重くなりませんか？: 大きすぎる画像は重くなるので、適度に圧縮してからアップロードしましょう。WordPressには、極端に大きな画像を自動で縮小する仕組みも備わっています。
スマホだけ画像がぼやけて見えます。: スマホは画面がとても精細なため、小さめの画像だとぼやけやすくなります。表示幅の2倍程度の画像に差し替えてみてください。
過去の記事の画像もすべて直すべきですか？: すべてを一度に直す必要はありません。アクセスの多い記事から順番に差し替えていくのが、効率よく効果を出すコツです。
写真はPNGとJPEGどちらがいいですか？: 風景や商品などの写真はJPEGのほうが軽く、きれいに表示できます。文字が多い画像はPNG、写真はJPEGと使い分けましょう。