【随時更新】wordpressで画像や文字がぼやける劣化する状態の解決法（jpg・png）

 

＝＝＝ここから本記事＝＝＝

 

こんにちは、あさぺんです。

長らく僕の頭を悩ませていた

「wordpressに画像アップロードをするとぼやけたり劣化したりする現象」

について、一定のパターンと一時的な解決策を発見しましたのでシェアします。

 

その前にまず前提の共有です。

僕が想定しているのは、

アイキャッチ画像や記事中の解説画像などを作成し、

それをアップロードする場合にぼやけたり劣化したりする

ケースです。

 

カメラで撮った写真などを上げるケースについては検討していません。

そこは知っておいてください。

 

あと念の為、初めに書いておきます。

こちらに掲載する方法は、現在の僕が行っている「とりあえずこうすればぼやけない劣化しない」方法であり、根本的な解決策ではないと感じています。

 

そもそも、なぜ画像が劣化してしまうのかの原因も解明できていません。

ネットで「wordpress 画像 ぼやける」と3週間くらい検索し続けましたがどれも不十分…

というか改善しませんでした（今でも）。

 

ですが、数値や拡張子を調整したり、プラグインを抜いてみたりした結果、ひとまずの解に出会えたのでそちらを書いていきます。

ですので、改善しなくても落ち込まないでくださいね。

 

では以下からどぞー！

とりあえずの解決策

回りくどいのは性に合わないため最初にゴールを書いてしまいます。

wordpressにアップロードした画像や文字をぼやけさせない劣化させないためにやっているのは以下です。

拡張子png形式でアップロード

まず１つ目について。

これは、wordpressにアップロードする段階で、jpg形式ではなくpng形式にするということです。

こうすることにより「文字がぼやけなく」なります。

jpg形式とpng形式の違いによる色文字ぼやけ検証

以下に２つの画像を掲載します。

見ていただきたいポイントは、エメラルド色の文字部分です。

画像１は色文字部分がぼやけて見え、
画像２は色文字部分もハッキリ見えているはずです。

 

画像１：jpg形式

画像２：png形式

 

画像１はjpg形式の画像、画像２はpng形式の画像でした。

それぞれjpg形式/png形式でwordpressにアップロードし、ライブラリ内で撮影しました。

 

この２つの画像からわかることは、
jpg形式でアップロードした画像はウェブ掲載前からすでに色文字がぼやけていて、
png形式でアップロードした画像はハッキリ表示されているということです。

 

なぜこのように表示されるのか、原因はわかっていません。

wordpressにアップロードする前、つまり自分のPC内でチェックする段階ではどちらもハッキリ表示されているのです。

ですが、ネット上にアップロードするとjpg形式の方だけぼやけてしまう。

 

こういうわけで、解決策その１ではpng形式を推奨しています。

ファイルサイズが大きくなりますが、ぼやけた画像表示されるより何倍もマシでしょう。

画像横幅 ＜ コンテンツ幅

続いて２つ目の、

画像横幅 ＜ コンテンツ幅

についてお話していきます。

 

コンテンツ幅というのは、今この文字が並んでいる横幅を指しています。正式名はわかりません。

もし今このサイトをPCから見ていれば、白い部分の幅です（おそらく画面両端がグレーで、文字の並んでいる部分が白くなっているはず）。

 

このコンテンツ幅よりも画像横幅が小さいときに、画像がクリアに表示されます。

 

ネット上でこの「画像ぼやける問題」の解決策を探していると、

画像サイズは大きめなものを用意するとクリアに表示される

と書かれています（そういう記事があります）。

 

ですが、少なくとも僕のケースではこれは当てはまりませんでした。

というかむしろ逆で、

画像サイズをコンテンツ幅よりも小さくしたら画像のぼやけを抑制できました。

画像横幅とコンテンツ幅の関係からぼやけるたり劣化したりする現象を検証

検証するために、以下４パターンの画像をスクリーンショットにて撮影しました。

それぞれの画像をコンテンツ幅848pxのところに表示させたときのものです。

• 画像１：jpg形式_横幅1280px
• 画像２：jpg形式_横幅640px
• 画像３：png形式_横幅1280px
• 画像４：png形式_横幅640px

ここで注目していただきたいのは、画像１～３と画像４のぼやけ劣化状態の違いです。

 

画像１：jpg形式_横幅1280px

画像２：jpg形式_横幅640px

画像１と２はjpg形式ですから、そもそもwordpressにアップロードした段階で（ライブラリ内の段階で）文字がぼやけています。

それでも1280pxある画像１よりも、予め640pxにリサイズしてある画像２の方が若干クリアです。

 

引き続き以下もご覧ください、以下はpng形式同士の比較です。

画像３：png形式_横幅1280px

画像４png形式_横幅640px

画像３と４はpng形式で、wordpressにアップロードした段階ではどちらにもぼやけは見られません。

 

ですが、コンテンツ幅848pxのサイトで表示させると、
横幅＞コンテンツ幅の画像３は若干ぼやけ、
横幅＜コンテンツ幅の画像４はクリアです。

 

画像が小さいため判別しにくいかもしれませんが、
エメラルド色の文字部分を見ると画像４の方がクリアに見えると思います。

2020年8月時点での解決策

いくつか検証画像を見てもらいましたが、現時点での結論は以下です。

wordpressにアップロードした画像や文字をぼやけさせない劣化させないためには、

をやると問題解決につながるかもしれません。

 

ただし今回のケースは、作成したアイキャッチ画像をアップロードする前提で考えています。

つまり、出力段階で拡張子の形式を選べる前提です。

「最初からjpg形式しか選択肢ないんだけど…」という場合は未調査です。

 

本当は、リサイズとか無視してフルサイズでwordpressにアップロードできたら楽なんですけどね！

jpg形式とかpng形式とか考えずに、アップロードできたらいいんですけどね！

 

今はその方法が見つからないので、しばらくは現状の解決策で我慢です。

 

もし「こんな風にやったらこうなった！」的な発見があったらぜひコメントしていただけると嬉しいです٩(๑´3｀๑)۶