DrupalのほとんどのTheme（テーマ）はレスポンシブ対応になっていて、黙っていてもこだわりがなければ、勝手にPCにもタブレットにもスマホにも対応してくれる。私自身は、情報が取れれば見た目は2の次と考えるタイプなので、割と気にならないのだが、見た目が重要でないと言うわけではない。
CSSでは50vwといった指定をすれば、領域幅の50%で表示することができる。最近はスマホも画素数が増えているものの、物理的な大きさは大型ディスプレイの10分の1程度だったりするので、画像の表示は100vwにして横幅いっぱいで合わせるのが都合が良い。一方、画像そのものの画素数があり、高解像度画像はファイルサイズが大きくなりネットのスピードが遅いと重い画像は利用感を阻害する。
Drupalのコア機能には、画像スタイルという機能とレスポンシブ画像という機能が備わっていて、デフォルトで付いてくるWideとかNarrowといった設定をすればとりあえず使える。でも、やはり素材の画像にも一定のこだわりが必要になる。
画像フィールドを1つだけもつコンテンツタイプを作成し、レイアウトビルダーで、様々なフォーマッターとスタイルを設定した表示を繰り返したものである。
| タイトル | フォーマッター | スタイル |
| オリジナル画像 | Image | オリジナル画像 |
| Max 325x325 | Image | Max 325x325 |
| レスポンシブtest | レスポンシブ画像 | test2(独自作成) |
| レスポンシブNarrow | レスポンシブ画像 | Narrow |
| レスポンシブWide | レスポンシブ画像 | Wide |
| test | Image | test2(独自作成) |
それぞれの定義の内容はレイアウトビルダーで解説用のブロックを追加して記載してある。
2つのページの元画像は同じもので、片方は小さくリサイズしたもの。
大型画像の方だと、レスポンシブtestで生成されるpictureタグは以下のようになる。
ブラウザ側は自動的な適切なファイルを選んで描画する。描画エリアの大きさによるが、srcsetにそれぞれの画像ファイルの横幅がヒントとして与えられているので、実際の描画エリアの幅より大きくて一番小さい画像をgetしてレンダリングを行う。表示は100vwで設定されているので、そこからの縮小はブラウザが行うことになる。
実際に実験してみると、max 2600x2600の画像スタイルのほうが幅はオリジナルより小さくなるので、描画エリア幅が975pxより大きくなるとmax 2600x2600のファイルが送られることになる。驚くことに、このファイルの大きさはオリジナルの縮小なのにオリジナルファイルより大きい。そういう驚きはあるものの、描画のステップがわかる。
- 画像スタイルで設定されたファイルを選択して適切なイメージを読み込む
- レンダリング指示に基づいてリサイズして表示する
メカニズムは理解すれば単純だった。
次に小さい方のページを見るとpictureタグは以下のようになる。
こちなの方を見ると、元画像が220wなのでsrcsetと言いながら、ファイルは1つしか出てこない。レンダリング指示は同じ100vwだから幅はいっぱいに拡大される。見てわかるように汚い。
ここから得られる教訓は、レスポンシブ画像は便利なんだけど、元画像の画素数が小さければ勝手に拡大されてしまうと痛いということだ。そのような問題が懸念される場合は、イメージスタイルをブレークポイント単位でmax NxNから一つ選んでsizes属性を指定しなければ良い。ぴったりにはならないが、画質が崩れることはない。
CMSの描画方法としては基本のキと言って良いが、これまで真面目に考えたことがなかったので良い経験となった。
一番下のトリミングはカードイメージを揃えたい時などに使う画像スタイルとなるので、参考までに掲載しておいた。もちろん、拡縮を入れてしまうと、元画像の画素数の問題の影響を受ける。イメージデータの収集時に注意しないわけにはいかない。同時に解像度が高ければ高いほど良いというわけでもない。
ちなみに、本文中に埋め込む画像メディアの表示設定は、"/admin/structure/media/manage/image/display"で行う。当サイトでは、sizes属性を利用しない形のレスポンシブ画像を利用する形としている。