iPhoneでブログを見たら画像が荒い…？WordPress4.4新機能「レスポンシブ画像」が関係あるかも。

WordPressで運営しているウェブサイトで、iPhone/スマートフォンで見ると画像が荒く表示される場合、「レスポンシブ画像」が関係あるかもしれません。「srcset属性」を停止する方法をご紹介するとともに、なぜこうなってしまうのかを調べてみました。

WordPress4.4にアップグレードしたら画像が荒い？と思ったときの対処法

使用中のテンプレートセット内にあるfunction.phpに、次のような記述を追加します。後述する「srcset」が原因だった場合はこれで対処できると思います。

add_filter( 'wp_calculate_image_sizes', '__return_false'); add_filter( 'wp_calculate_image_srcset', '__return_false');

なぜ画像が荒くなってしまったのか

なぜ画像が荒くなってしまったのか、特にテンプレートに変更を加えたとかではないのに…ということで気になったので調べてみました。変わったことといえば最近WordPressを4.4にアップデートしたことくらい。ちなみにテンプレートセットはWordPress添付のものではなく、自前で制作したものです。

例えば私のところでは、テンプレート内のある箇所にこんな関数で画像を表示させています。

wp_get_attachment_image($attachment_id)

すると、WordPressは該当の部分にこんなタグを吐き出しました（見やすいよう、適当に折り返しています）。

<img width="640" height="640" src="http://wpurl/wp-content/uploads/img.png" alt="画像の説明" srcset="http://wpurl/wp-content/uploads/img-150x150.png 150w, http://wpurl/wp-content/uploads/img-300x300.png 300w, http://wpurl/wp-content/uploads/img-480x480.png 480w, http://wpurl/wp-content/uploads/img.png 640w" sizes="(max-width: 640px) 100vw, 640px">

ふつうの画像タグかと思いきや、「srcset」という属性が長々と書かれていますね。WordPressのメディア一覧にアップロードしたときに生成されたであろう複数サイズの画像URLが列記されています。

結論からいうと、これが画像が荒くなっていた原因でした。

では「srcset」とは何か？

「srcset」は、html5における画像タグの属性で、端末によって違う画像を表示させる「レスポンシブイメージ」を実現させるためのしくみです。

WordPressは4.4から、srcset属性を自動的に書き出すようになったようです。WordPress4.4の新機能を紹介するページにもこのように書かれています。

レスポンシブ画像:
WordPress はあらゆるデバイスで、毎回完全にフィットした適切な画像サイズを表示するためによりスマートな手法を使用するようになりました。テーマでは何もする必要はありません。そのままで動作します。

「srcset」属性を設定しておくと、対応しているブラウザはその端末に適切と思われる画像を勝手に選択して表示します。「あらゆるデバイス」への対応はいまやほぼすべてのウェブページに必須ですが、srcset属性をうまく設定できていれば、端末ごとに違う画像が必要なとき、これまでのようにテンプレート上で分岐させる必要がなくなります。「よりスマートな技法」とはこのことなのでしょう。

ところが、私の自前のテンプレートでは想定より小さいサイズの画像が選択されてしまい、それが「画像が荒い」という結果になりました。

小さい端末のための分岐は自前で用意してあったり、リサイズされる画像サイズも最小限にカスタマイズしてあったため、WordPress本体が書き出すsrcsetとの齟齬が生まれたのでしょう。