WordPressでのレスポンシブ画像ってどうなってるの？

2017年3月5日カテゴリー : WordPress コメント : 0

モバイルからのネットアクセスが増加したことにより、WordPress 4.4からデフォルトでレスポンシブ画像に対応するようになりました。画面サイズに適した画像のみをダウンロードすることで通信量の低減を行い、ユーザーの離脱を防ぐ効果があります。思った以上に簡単に導入できるのでおすすめです。

画像のレスポンシブ対応の基本

画像をレスポンシブに対応したい場合、スタイルシートで img タグに次のように設定することが基本になります。

img {
    max-width: 100%;
    height: auto;
}

img {

max-width: 100%;

height: auto;

}

例えば、横幅480pxの画面のスマホで幅320pxの画像を表示しようとすると少し小さいです。これを画面いっぱいに拡大するために max-width に100％を指定しています。

反対に、コンテンツの横幅が768pxのブログで1024pxの画像を指定なしで表示しようとすると、当然突き抜けてしまいます。ここで max-width が指定されていれば、親要素より大きいときには縮小してくれるので、表示が崩れることがなくなります。

height に auto が指定されていますが、これは縦横比を保ったまま拡大・縮小するのに必要なものです。

従来のWordPressでの画像サイズの扱い方

今までの WordPress では画像をどのように扱ってきたのか復習しましょう。ブログコンテンツが640px、アップロードした画像が1600pxだった場合を考えてください。

ブログコンテンツが640pxを上限としているので、管理画面の「設定」→「メディア」において大サイズの幅の上限を640に変更します。高さの上限をゼロにすると縦横比を保ったまま縮小してくれます。

画像をコンテンツいっぱいに貼り付けたければ、添付ファイルの表示設定で大サイズを選択すればよいです。

原寸大の画像をユーザーに提供したければ、画像をリンク化して target=”_blank” を利用して新しいタブで開いたり、JavaScript や jQuery を使ってポップアップ表示したと思います。

WordPressでのレスポンシブ画像

バージョン4.4からデフォルトで対応されているので、特に設定していない人でも画像だけはすでにレスポンシブ対応になっているはずです。

コンテンツが640pxのブログに1600pxの画像をアップロードした場合を考えてみます。記事の投稿画面でメディアを追加しても、挿入されるソースコードは従来のものと同じです。今までどおりに大サイズを選択すればよいです。

ところが、出力される HTML は次のようになります。

<img src="http://localhost/wordpress/wp-content/uploads/2017/03/test-1024x692.jpg"
     alt=""
     width="640"
     height="433"
     class="alignnone size-large wp-image-5"
     srcset="http://localhost/wordpress/wp-content/uploads/2017/03/test-1024x692.jpg 1024w,
             http://localhost/wordpress/wp-content/uploads/2017/03/test-300x203.jpg 300w,
             http://localhost/wordpress/wp-content/uploads/2017/03/test-768x519.jpg 768w,
             http://localhost/wordpress/wp-content/uploads/2017/03/test.jpg 1600w"
     sizes="(max-width: 640px) 100vw, 640px">

<img src="http://localhost/wordpress/wp-content/uploads/2017/03/test-1024x692.jpg"

alt=""

width="640"

height="433"

class="alignnone size-large wp-image-5"

srcset="http://localhost/wordpress/wp-content/uploads/2017/03/test-1024x692.jpg 1024w,

http://localhost/wordpress/wp-content/uploads/2017/03/test-300x203.jpg 300w,

http://localhost/wordpress/wp-content/uploads/2017/03/test-768x519.jpg 768w,

http://localhost/wordpress/wp-content/uploads/2017/03/test.jpg 1600w"

sizes="(max-width: 640px) 100vw, 640px">

300、768、1024pxにブレイクポイントが設定され、それぞれの画面サイズに適した画像がダウンロードされるはずです。

どのように動作しているのか Google Chrome を使って確認してみたいと思います。検証ツールを立ち上げて右上のこの部分をクリックし、「Settings」を選択します。キーボードの F1 キーでもよいです。

機種一覧から「Responsive」、Retina ディスプレイ対応を考えないので DPR は「1.0」を選択します。

DPR が表示されていない場合、ドロップダウンメニューで「Add device pixel ratio」を選んでください。

Responsive に300pxを設定して画面を更新します。検証ツールで「Network」というタブがあるので、こちらをクリックします。これでブラウザがどのようなファイルをダウンロードしたのかを確認できます。

document や stylesheet に混ざって jpeg や png という項目を見つけることができるはずです。今回ダウンロードされた画像が test-300×203.jpg であることがわかります。

1024pxより小さなファイルのアップロードでHTMLはどうなるか

それほど気にしなくてもよいと思いますが、一応見てみましょう。

300pxより小さい画像の場合、srcset 属性そのものが挿入されません。

<img src="http://localhost/wordpress/wp-content/uploads/2017/03/test.jpg"
     alt=""
     width="290"
     height="216"
     class="alignnone size-full wp-image-14">

<img src="http://localhost/wordpress/wp-content/uploads/2017/03/test.jpg"

alt=""

width="290"

height="216"

class="alignnone size-full wp-image-14">

srcset が挿入されるようになるのは画像が300pxを超えてからです。今度は310pxの画像をアップロードしてみました。

<img src="http://localhost/wordpress/wp-content/uploads/2017/03/test.jpg"
     alt=""
     width="310"
     height="206"
     class="alignnone size-full wp-image-18"
     srcset="http://localhost/wordpress/wp-content/uploads/2017/03/test.jpg 310w,
             http://localhost/wordpress/wp-content/uploads/2017/03/test-300x199.jpg 300w"
     sizes="(max-width: 310px) 100vw, 310px">

<img src="http://localhost/wordpress/wp-content/uploads/2017/03/test.jpg"

alt=""

width="310"

height="206"

class="alignnone size-full wp-image-18"

srcset="http://localhost/wordpress/wp-content/uploads/2017/03/test.jpg 310w,

http://localhost/wordpress/wp-content/uploads/2017/03/test-300x199.jpg 300w"

sizes="(max-width: 310px) 100vw, 310px">

今度は768pxの幅をもつ画像です。

<img src="http://localhost/wordpress/wp-content/uploads/2017/03/test.jpg"
     alt=""
     width="768"
     height="511"
     class="alignnone size-full wp-image-16"
     srcset="http://localhost/wordpress/wp-content/uploads/2017/03/test.jpg 768w,
             http://localhost/wordpress/wp-content/uploads/2017/03/test-300x200.jpg 300w"
     sizes="(max-width: 768px) 100vw, 768px">

<img src="http://localhost/wordpress/wp-content/uploads/2017/03/test.jpg"

alt=""

width="768"

height="511"

class="alignnone size-full wp-image-16"

srcset="http://localhost/wordpress/wp-content/uploads/2017/03/test.jpg 768w,

http://localhost/wordpress/wp-content/uploads/2017/03/test-300x200.jpg 300w"

sizes="(max-width: 768px) 100vw, 768px">

原寸大の画像を提供できない？

いろいろ動作確認したのですが、アップロードしたサイズと同じ原寸大の画像を表示させることはできないようです。

srcset を含んだ img タグを a タグで囲み、 target=”_blank” を利用して新しいタブで画像を開くと、表示されるのはブレイクポイントで一番大きな画像になるというのが仕様のようです。上述のソースコードの src 属性を追ってもらうとわかるかと思います。1600px幅の画像をアップロードしても、表示されるのは最大ブレイクポイントである1024px幅の画像になってしまっています。

特に大きな画像を表示しなくてよいコンテンツであれば問題ありませんが、原寸大サイズのデータを配布している写真やイラストの素材サイトなんかだとちょっと困ります。WordPress のバージョンアップで対応されるのを待つか、フィルターフックなどで改良する必要があるかもしれません。