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

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

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

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

例えば、横幅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 は次のようになります。

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 属性そのものが挿入されません。

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

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

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

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

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

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

Lazy Loadとの相性はどうなの?

レスポンシブ画像は Lazy Load 系の JavaScript や jQuery などとは相性が悪いというのが通説でしたが、最近ではプラグインのほうで考慮してくれているので、心配しなくても大丈夫です。

BJ Lazy Load では設定画面の「Load responsive」でレスポンシブ画像に遅延ロードを適用するかしないかを指定することができるので、相性問題を気にせずにレスポンシブ化することができます。

途中から導入するにはどうしたらいいの?

こちらにも便利なプラグインがあります。

functions.php に必要なサイズを記述しておき、「Regenerate All Thumbnails」ボタンをクリックするだけです。これだけでアップロード済みの画像を一括でリサイズしてくれます。

「役に立った」と思ったら、記事のシェアをお願いします。

スポンサーリンク

Comment

コメント認証制です。反映されるまで時間が掛かる場合があります。
URLの記入はhttpのhを抜いて下さい(宣伝対策です)。
連続でコメントするとスパム扱いになる場合があります。
しばらく待ってからコメントしてください。

CAPTCHA


Si prega di attivare i Javascript! / Please turn on Javascript!

Javaskripta ko calu karem! / Bitte schalten Sie Javascript!

S'il vous plaît activer Javascript! / Por favor, active Javascript!

Qing dakai JavaScript! / Qing dakai JavaScript!

Пожалуйста включите JavaScript! / Silakan aktifkan Javascript!

TOP