レスポンシブイメージはHTML(srcset)で CSSメディアクエリ担当外 画像読み込みのサイズはビューポートかボックスサイズか

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

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

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

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

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

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

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

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

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

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

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

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

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

ブラウザーの種類とTPOにもよるが(読み込まれている画像のサイズ確認は、Firefox推奨)、１列・２列・３列・４列で約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デザイン方式よりも複数サイズのレスポンシブイメージ方式のほうが、よい選択ということになる

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

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

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

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

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

普段使いは昔ながらのWindowsでDPR1のディスプレイ、MacなどDPR2以上の実機は故障して手元にない、そこでDPR1のChromeやFirefoxのデベロッパーツールで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は最初から縮小表示される

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

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