レスポンシブイメージはHTML(srcset)で CSSメディアクエリ担当外

レスポンシブWebデザインの画像

レスポンシブイメージとレスポンシブWebデザインとは、じつは微妙にあるいは決定的に違っている

レスポンシブWebデザインでは、設定箇所の「CSSピクセル」横幅に合わせて、画像を伸縮させて表示する
つまりCSSのお役目

レスポンシブイメージは、HTML srcsetの画像記述子(w)の「デバイスピクセル」にあわせて複数画像ファイルの中から最適サイズの画像を1つ選択して表示する
つまりHTMLとブラウザーのお仕事

サムネイル7 1280x360
サムネイル7 1280x360
サムネイル8 1280x360
サムネイル7 1280x360
サムネイル8 1280x360
サムネイル9 1280x360
サムネイル7 1280x360
サムネイル8 1280x360
サムネイル9 1280x360
サムネイル10 1280x360

レスポンシブWebデザインの実相

レスポンシブWebデザインは、都合よく解釈するなら、同一ファイル・同一サイズの画像をHTMLなりCSSなりが指定するCSSピクセル横幅に合わせてブラウザーが表示する

WordPressはclassの画像ID「wp-image-1105」などが記述されていないと、レスポンシブイメージコードつまり画像幅記述子(w)は生成されない

そのため、上記の画像群はclassに画像IDが記述されていないので、1280×360 のサイズのまま、1列・2列・3列・4列で約1/1・1/2・1/3・1/4の横幅でデスクトップのブラウザーで表示される

デスクトップで確認すると、すべての画像は、「thumb-10-1280×360-1.png.webp」など、つまり 1280 x 360 px の画像が読み込まれ表示されている

レスポンシブイメージの画像

レスポンシブイメージは、DPR2や3の対応はともかく、想定した場所に想定したサイズで画像を伸縮させて表示するのではなく、同一で複数サイズの画像から最適横幅の画像を表示する

さて、ブラウザーは画像幅記述子(w)に最も適したサイズを選択するにしても、その画像幅記述子(w)はブラウザーのビューポート幅なのか、ブラウザーで複数列設定されているボックスサイズ幅なのか

サムネイル7 1280x360
サムネイル7 1280x360
サムネイル8 1280x360
サムネイル7 1280x360
サムネイル8 1280x360
サムネイル9 1280x360
サムネイル7 1280x360
サムネイル8 1280x360
サムネイル9 1280x360
サムネイル10 1280x360
レスポンシブイメージの実相

WordPressは、「メディアを追加」によってwidth/heightとともにclassの画像ID(wp-image-1105など)が記述されていると、imgタグの中にsrcsetでスポンシブイメージ コードつまり画像幅記述子(w)をつけて動的に生成する

ブラウザーの種類とTPOにもよるが(読み込まれている画像のサイズ確認は、Firefox推奨)、1列・2列・3列・4列で約1/1・1/2・1/3・1/4の横幅のサイズ違いの画像がデスクトップのブラウザーに読み込まれ表示される(はず)

またEWWW Image Optimizerを導入していて「Picture WebP Rewriting」をチェックしていると、さらにpictureタグを付けてWebP変換のコーディングになる

デスクトップで右下の画像は、DPR1の場合「thumb-10-1280×360-1-320×90.png.webp」つまり 320 x 90 px の画像が読み込まれ表示されている
DPR2のディスプレイでは「thumb-10-1280×360-1-640×180.png.webp」つまり 640 x 180 px の画像が読み込まれ表示される

理論的には、画像の読み込みと表示のスピードは、同一サイズを伸縮させるよりも、複数サイズを読み込み分けするほうが、速くなるはずである
つまり画像に関しては、同一サイズのレスポンシブWebデザイン方式よりも複数サイズのレスポンシブイメージ方式のほうが、よい選択ということになる

結局のところ、レスポンシブとはデスクトップのためのもの、モバイルだけあるいは1カラムだけなら、ほとんど問題にならないと思い知ることになる…

とどめのレスポンシブイメージの検証

今度は3840pxの画像で、スマートフォンの縦画面と横画面で実験

MacなどのDPR2以上のディスプレイやスマートフォンの実機、もしくはデスクトップ ブラウザーのレスポンシブモードで確認を
DPR1のディスプレイでも、ChromeやFirefoxなどでDPR2や3のエミュレートする方やり方を後述

コンテンツ1 3840x3840
コンテンツ2 3840x3840
コンテンツ3 3840x3840
コンテンツ1 3840x3840
コンテンツ2 3840x3840
コンテンツ3 3840x3840
コンテンツ3 3840x3840
コンテンツ4 3840x3840
コンテンツ5 3840x3840
コンテンツ6 3840x3840

WindowsデスクトップDPR1のブラウザーでDPR2のディスプレイをエミュレート

普段使いは昔ながらのWindowsでDPR1のディスプレイ、MacなどDPR2以上の実機は故障して手元にない、そこでDPR1のChromeやFirefoxのデベロッパーツールでDPR2エミュレートでレスポンシブイメージを検証してみよう

Chromeのデベロッパーツール ディスプレイDPR1でDPR2をエミュレート
Chromeのデベロッパーツール ディスプレイDPR1でDPR2をエミュレート

Chromeの場合
エミュレート端末を追加、デバイス名は適当に、サイズも適当に(1440 x 900 など)、DPRは2くらいで、ユーザーエージェントも適当にたとえば下記

Mozilla/5.0 (Macintosh; Intel Mac OS X 10.13; rv:68.0) Gecko/20100101 Firefox/68.0

Firefoxも同じ要領で

エミュレート画面がFirefoxのウインドウではみ出すこともあり、「Ctrl と – キー押し」で縮小、Chromeは最初から縮小表示される

これで確認すると、上の1列・2列・3列・4列で読み込み表示される画像のサイズ(横幅)が小さくなっていくことが分かるはず

画像のレスポンシブは、CSSのメディアクエリではなく、とくにデスクトップでビューポートではなくボックスサイズのレスポンシブイメージを実現するには、picture / source および srcset 1280w, 960w, 640w, 480w, などの画像幅記述子(w)のコーディングを
(さらには、EWWW Image Optimizerの導入かも…)

ちなみに、最初スマートフォン縦で画面がはみ出す。これは普通のレスポンシブ問題で、<pre><code>が原因。ときどき遭遇するテキストの折り返しなしで、小画面はみ出しのレイアウト崩れ。pre { white-space: pre-wrap; }およびcode { word-break: break-all; overflow-wrap: break-word; }で解決…

floatの画像横並べでレスポンシブイメージは可能か

次の画像群では、gridではなくレガシーなfloatで横並べを実験してみる
デスクトップで3列、タブレット縦・スマートフォン横で2列、スマートフォン縦で1列
これこそ、メディアクエリでデスクトップ33%(calc 100% / 3) タブレット50% スマートフォンで100%を画像を囲むボックスに設定
上側がWordPressの画像IDなしで、下側が画像IDあり
予想としては画像IDなしなら元サイズ画像一択、画像IDありではWordPressがレスポンシブイメージにしてくれるはず

サムネイル7 1280x360
サムネイル8 1280x360
サムネイル9 1280x360
サムネイル7 1280x360
サムネイル8 1280x360
サムネイル9 1280x360

⌘ ここでは直接的な関係はないものの、あらためてfloatレイアウトはアイテム間隔の設定に苦労する。marginかpaddingで左や右に隙間を作る。floatおわりに「clear:both;」も必要
横並びのレイアウトならgridとgapが楽でおすすめ。しかもflexboxよりも格段に簡単

レスポンシブイメージとレスポンシブWebデザインの断絶と連携

レスポンシブWebデザイン

WordPressでは、コンテンツに「メディアを追加」によって画像を挿入すると、自動的に画像幅記述子(w)付きでsrcsetコードが生成されるので、それがレスポンシブイメージのコードであるとは気づきにくい

ところが、WordPressでは画像IDを取得できないサムネイル(アイキャッチ)は、レスポンシブ(Webデザイン)としてコーディングできるが、レスポンシブイメージにはならない
<?php the_post_thumbnail(‘full’); ?> では、元画像単一サイズを「レスポンシブもどき」でCSSによってブラウザーに負担をかけて(笑)伸び縮みさせているだけである

レスポンシブイメージ

レスポンシブイメージは、ビューポートかボックスサイズかとにかく想定される場所に、複数サイズの画像があってその中の最適な1つが、ブラウザーに選択されて読み込み表示される一連の流れを意味する

こちらは、レスポンシブ”複数サイズ選択“イメージと称し、前者のほうはレスポンシブ”単一サイズ伸縮“イメージとでも名付けようか(笑)

レスポンシブWebデザインとレスポンシブイメージの連携

上記の画像群並びは、gridであってもfloatであっても、たとえばスマートフォン縦:1列・スマートフォン横/タブレット縦:2列・デスクトップ/タブレット横:3列または4列にレイアウトしているが、それはCSSのレスポンシブ メディアクエリのお仕事
このようにレスポンシブのレイアウトではCSSだけの任務であり、レスポンシブイメージがボックスサイズによって選択表示される画像ファイルが変わるのであれば、ボックスサイズはCSSの設定記述次第となる
HTML srcsetのレスポンシブイメージであっても、CSSによるレスポンシブのサイズ メディアクエリが無用不要になるわけではない

レスポンシブイメージ:Google検索生成AIから引用

レスポンシブイメージとは、ユーザーの閲覧環境に応じて複数の画像ファイルの中から最適な画像ファイルを選択して画像を表示させる仕組みです。レスポンシブイメージは、2016年勧告のHTML 5.1に追加された仕様です。

レスポンシブイメージは、ユーザー体験(UX)の向上やSEOなどに効果的と言われています。

レスポンシブイメージ:違う画像ファイル表示

「レスポンシブ」の文言から、デバイス別ウインドウサイズ別に最適なサイズの画像が選択表示されると解説してきたが、最適とは同一画像のサイズ別というだけではなく画像ファイルそのものを差し替えることもできる
極端な事例としてスマートフォンの縦と横で違う画像を表示させることもできる!

スマートフォンデフォルトの縦画面では横長画像は取扱注意

デスクトップからタブレット、そしてスマートフォンの"横"画面まで、画像は横長が定番で一般的。あるいは横長でも問題はない。そして逆に、縦長の場合が厄介だ
そもそも「黄金比」というものがあって、Google生成AIでは~「1:(1+√5)/2という比率で、近似値は「1:1.618」や「5:8」~ 横長が人類に染み込んでいるとも言える

ところが、スマートフォンでは縦長というか正方形に近いほうが最適だったりする

スマートフォン 縦 画面レスポンシブイメージ
スマートフォン 横 画面レスポンシブイメージ

スマートフォン縦画面とそれ以外ではアスペクト比が違う画像をレスポンシブイメージで入れ替え

結論として、レスポンシブイメージのsrcset 画像幅記述子(w)の設定次第で、スマートフォン縦画面だけヘッダー背景画像などを入れ替えできる
縦画面の横幅が450pxでDPR3のスマートフォンの場合、画像は1350px以上が最適となる。かつスマートフォン”横”画面やスマートフォン以外ではその画像が選択されないような「ブレイクポイント」が必要
続きはWP最新テーマでどうぞ

注目