WordPress
WordPress4.4にしたら画像が荒くなった時の対処法

1
WordPress4.5が先日リリースされました。
私がWordPressをいじり始めた時が3.0になる直前だったので、
もうそんな進んでるんだなー・・・という思いもあったりなかったり。

・・・で、先日、仕事で「何だか画像が荒くなった」という声があり調べてみました。
そうしたらこれ、新しいWordPressの機能だったみたいです。

今回は「WordPress4.4にしたら画像が荒くなった時の対処法」についてご紹介します。

WordPress4.4以降、投稿ページなど、アップローダーでアップした画像のコードが以下のようになっていました。

[xml]

<img src="http://*****/uploads/20150923_2.png"
alt="*****" width="697" height="394" class="alignnone size-full wp-image-2966"
srcset="http://*****/uploads/20150923_2.png 697w,
http://*****/uploads/20150923_2-150×85.png 150w"
sizes="(max-width: 697px) 100vw, 697px" />

[/xml]

画像が荒くなったのは、この「srcset」属性の仕業でした。

「srcset」ってなによ?

そもそもsrcsetって何よってことなんですが、html5における画像をレスポンシブに対応させるためのものらしい。
今までは例えばPC用、タブレット用、スマホ用の画像をCSSとかでウィンドウの幅に合わせて切り替えていたんだけど、
imgタグに記述することで切り替え可能!ということなんですね。

上記の画像の場合、ウィンドウの幅が697pxと150pxで切り替わるということ・・・かな?
ってか150pxっていらなくね。

「srcset」を表示させないコード

そして本題。
このsrcsetを画像のタグに入れないようにするには、以下のコードをfunctions.phpに記述します。

[xml]

add_filter( ‘wp_calculate_image_sizes’, ‘__return_false’);
add_filter( ‘wp_calculate_image_srcset’, ‘__return_false’);

[/xml]

これでsrcset属性が表示されなくなりました。

ちょっと厄介な感じもしますが、うまく使えると画像の切り替えがとても楽になる気がします。
これから使う場面が出てくるかもしれませんね。

>>参考サイト

HTMLのsrcsetを使って画像をレスポンシブにRetina対応させてみよう
http://kia-king.com/blog/tutorial/responsive-images-with-srcset/

iPhoneでブログを見たら画像が荒い…?WordPress4.4新機能「レスポンシブ画像」が関係あるかも。
http://blog.factory70.com/make-websites/wordpress4-4-how-to-disable-srcset

Contact
お問い合わせ
ホームページ制作に関するお問い合わせは、
こちらのメールフォームからお気軽にどうぞ。