WordPressでアイキャッチ画像をアップしたけど、ぼやけてしまうのはなぜ…そんな経験はありませんか？
アイキャッチはブログの第一印象を決める、YouTubeで例えるとサムネイル的なとても大切な要素。記事の内容やチュートリアルの成果がひと目で伝わるように色々考えてデザインしているのに、いざアップしてみたらぼやけてしまいっていたり画像が粗く表示されてしまうなんてがっかりですよね。
実はこの現象、作成方法や保存方法、WordPressの設定に原因があることが多いんです。今回は、Illustratorで作った画像をWordPressにアップしても粗くならないようにする原因と対策をわかりやすく解説していきます。
アイキャッチ画像が粗く見える主な原因
まずは、WordPressにアップしたときに実際にぼんやりしてしまったアイキャッチ画像を見てみましょう。デザインはきちんと作ったはずなのに、文字の輪郭も線もにじんでしまい、全体的に粗く見えてしまっています。
せっかくデザインしたのに、この状態では記事への期待値も下がってしまいますよね。
では次に、保存方法や設定を工夫して改善したAfter画像を見てみましょう。
今度は文字も線もシャープで、全体がくっきりと表示され、記事の内容がひと目で伝わるようになっています。
この違いを見ると、少しの工夫で仕上がりが大きく変わることがよくわかると思います。では、このようにアイキャッチ画像が粗く見えてしまう原因は何なのか、そしてどう対策すればよいのかを、ここから詳しく解説していきます。
WordPressで画像がぼやけたり粗くなるのは、主にこの3つが原因です。
リサイズによる劣化
WordPressが自動で生成するサムネイルサイズに合わせて画像が縮小されると、表示がにじむことがあります。
解像度・サイズ不足
Illustratorで書き出した画像のピクセルサイズが小さいと、WordPress上で拡大されて粗く見えます。
JPEG圧縮による画質劣化
保存形式をJPEGにしていると、自動圧縮によって文字や線がにじむことがあります。
Illustratorでの保存設定のベストプラクティス
粗くならないためには、Illustratorからの書き出し設定がとても大事。
画像サイズは実寸の2倍で書き出す
WordPressで表示したいサイズの「2倍」で作成すると、Retinaディスプレイでもくっきり見えます。
例えば、アイキャッチを1200pxで表示する場合、2400pxで書き出しします。
大きくしすぎるとファイル容量が重くなるので、2倍を目安にするのがベストバランスです。
保存形式はPNG推奨
テキストや細い線を含む画像は、JPEGよりPNGの方がシャープに表示されます。
解像度は72ppiでOK
Web表示なら印刷のように高解像度は不要。72ppiで十分きれいに見えます。
WordPress側でできる対策
ここまでの書き出し設定をしてもアップロードした画像が粗く見える場合は、WordPressの設定も見直してみましょう。
テーマの推奨サイズを確認
テーマによってはアイキャッチ推奨サイズが決まっています。そのサイズに合わせて画像を書き出すのがベスト。
このブログで使っているテーマ「Cocoon」のアイキャッチ画像のベストサイズは、横1280px × 縦720px なので、私は2560px x 1440px でアイキャッチを作成しています。
サムネイル再生成プラグインを利用
「Regenerate Thumbnails」などのプラグインで、サムネイルをリサイズし直すと改善することがあります。
プラグインの追加方法は、WordPressの管理画面の「プラグイン」から「プラグインを追加」→「プラグインの検索」フォームに「Regenerate Thumbnails」と入力して検索すると一番上に表示されます。
「プラグインを追加」ボタンが反応しない、押せない場合は、追加している全てのプラグインの更新状況を確認してみてください。全て更新すると、プラグインを追加できるようになることがあります。
圧縮プラグインの設定を確認
WordPressでは、画像をアップロードしたときに自動で「圧縮」される仕組みがあります。これは表示を軽くしてページを速くするために便利なのですが、圧縮率が高すぎると画像が劣化してしまい、特に文字や細い線がにじんで見える原因になります。
「EWWW Image Optimizer」や「Imagify」などの画像圧縮プラグインを使っている場合は、圧縮モードが“高圧縮”になっていないかを確認するのが大切です。画質を優先したいときは、設定画面で「画質優先」や「可逆圧縮（ロスレス圧縮）」を選ぶと、劣化を防ぎながら最適化できます。
保存設定を変えて検証
実際にIllustratorから「表示サイズの2倍」でPNG保存し、WordPressにアップしてみました。Beforeでは文字の輪郭が少しにじんで全体がぼやけて見えていたのに対し、Afterでは文字も線もシャープになり、アイキャッチ全体がくっきりとした印象に変わりました。特に、細い線や小さな文字は違いがはっきりわかります。保存形式やサイズを少し工夫するだけで、仕上がりのクオリティがぐっと上がることを実感できました。
今回の記事のまとめ
WordPressのアイキャッチ画像が粗く見えてしまうのは、保存時のサイズや形式、そしてWordPress側の自動圧縮やサムネイル設定が大きな原因になっています。Illustratorで作成する際には、表示サイズの2倍で書き出し、形式はPNGを選ぶことで文字や線もシャープに保てます。また、WordPressではテーマの推奨サイズに合わせた画像を用意し、圧縮プラグインやサムネイルの設定を見直すことで、仕上がりの印象がぐっと変わります。ちょっとした工夫を積み重ねるだけで、デザインのクオリティをしっかり保ちながら、記事の魅力を最大限に伝えられるアイキャッチに仕上げることができますよ。
