WordPress4.5が先日リリースされました。
私がWordPressをいじり始めた時が3.0になる直前だったので、
もうそんな進んでるんだなー・・・という思いもあったりなかったり。
・・・で、先日、仕事で「何だか画像が荒くなった」という声があり調べてみました。
そうしたらこれ、新しいWordPressの機能だったみたいです。
今回は「WordPress4.4にしたら画像が荒くなった時の対処法」についてご紹介します。
<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って何よってことなんですが、html5における画像をレスポンシブに対応させるためのものらしい。
今までは例えばPC用、タブレット用、スマホ用の画像をCSSとかでウィンドウの幅に合わせて切り替えていたんだけど、
imgタグに記述することで切り替え可能！ということなんですね。
上記の画像の場合、ウィンドウの幅が697pxと150pxで切り替わるということ・・・かな？
ってか150pxっていらなくね。
そして本題。
このsrcsetを画像のタグに入れないようにするには、以下のコードをfunctions.phpに記述します。
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
1980年6月生まれ。
秋田県在住。
地元のIT関連会社や市の機関でweb制作に携わり、2011年1月にフリーランスに。現在は子育てしながら日々業務にあたっています。