WordPress4.4にアップデートしたらRetinaディスプレイで画像がぼやけるようになった

本日ブログのテーマを更新しました。それと共に何気なくスマホからブログを見たら、画像がぼやけまくってました。端末はiPhone6plusです。原因はWordPressのアップデートによるものでした。

ドハマりした謎のぼやけ

最初はテーマのせいかな?と思ったのですが、元に戻しても治らず。他の端末(Z3TC、Garaxy s2)で確認してもぼやけていなかったので、じゃあRetina関係かな?とも思ったのですが、今まで普通に表示されていたのでそれもなさそう。

試しに超高解像度の画像をアップしてみたのですが、それもぼやけました。明らかにおかしい。レスポンシブデザインで、CSSの方でwidth100%で指定してるのでぼやけるわけがないんですよね。画像もfullサイズにしているので、自動生成されたサムネイルが表示されている可能性もない。

・・・完全にハマりました。

「Retina ぼやける」などのワードで検索してもヒットするのはRetina対応する方法のページばっかり。当たり前だけど。

こりゃ終わったなと思ったその時、Twitterで「WordPress4.4にアップデートしてからRetinaディスプレイで画像がぼやける」というツイートを発見。これだ!!!!!!!

いつだったか忘れましたが、ブログは更新しないくせにWordPressだけはアップデートしてました。詳しく調べたところ、4.4からレスポンシブ・イメージというものが導入されたらしく、端末に合わせて最適化された画像のサイズ?が選択されるみたいです(よく分かってない)。

これが原因で、本来表示されるべき解像度で表示されずにぼやけてしまったみたいです。

この機能をオフにすれば良いだけなので、すぐに対応できました。

これをfunctions.phpに書き込むだけで、低解像度の画像が表示されなくなり、ちゃんとキレイに表示できました!

詳しくはこちらのブログをごらんください。参考にさせていただきました。ありがとうございました。

※テーマを編集する場合は、必ず自己責任で行うようにしてください。