More than 1 year has passed since last update.

レスポンシブ画像学習

Last updated at 2023-12-15Posted at 2023-11-09

レスポンシブ画像の基本的な設定方法を学ぶ。

そもそもレスポンシブ画像とは

画面幅によっていっちゃんええ画像を選んでくれるやつ。

600px の画面幅にクソでかい 1200px の画像とか表示されても重くて表示が遅くなるだけ。
600px の画面幅だったら 600px の画像をダウンロードして表示してくれたほうが早い。

画面幅によって適切な画像を選んでダウンロードしてきてくれるブラウザの機能のこと。

基本的な設定方法

勝手にやってくれるわけじゃなく人間が教えてあげる必要がある。

<img
  srcset="
    https://placehold.jp/640x360.png 640w,
    https://placehold.jp/960x540.png 960w,
    https://placehold.jp/1024x576.png 1024w
  "
  sizes="100vw"
  src="https://placehold.jp/640x360.png"
/>

srcset 属性

見た通り srcset の中で

ソース
スペース
幅(w)

という形式で指定する。
w は width の略で、画像の幅を指定する。

ブラウザにはダウンロードもされてない画像の幅を判別することができない。
だから w でこの画像は 640px やでって教えてあげる必要がある。

この w の数値はいくつにすればいいのか, 画像の数はいくつがいいのかは選定された技術スタックによって異なる。
HTML 直書きだったら Responsive Image Breakpoints Generator 辺りを利用して、サイズ(KB)基準で設定するといいだろうし、
Next.js だったら Image コンポーネントが勝手に生成してくれる。
Drupal だったら事前にレスポンシブイメージを使って指定する必要がある。

ただ、サーバーにその分の画像を用意しておく or 都度生成される必要があるため多すぎても良くない。
ちょうどいい塩梅で。

sizes 属性

どのサイズの画像を使うかを指示する役割を担っている。
例では 100vw となっているが、これは画面幅いっぱいの画像もってこいやー言うてます。

動作としてはこんな感じ。

画面幅が ~ 640px のときは 640px の画像を使う。
画面幅が 641px ~ 960px ときは 960px の画像を使う。
画面幅が 961px ~ のときは 1024px の画像を使う。

じゃぁ sizes が 50vw だったらどうなるかというと、

画面幅が ~ 1280px ときは 640px の画像を使う。
画面幅が 1281px ~ 1920px のときは 960px の画像を使う。
画面幅が 1920px ~ のときは 1024px の画像を使う。

という感じになる。
ここらへんでわからなくなってきたと思うから実際に動かして確認してみよう。

実際に動かしてみる

手順は以下の通り。

デスクトップに index.html を配置
以下のコードを index.html にコピペ

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        margin: 20px;
      }
      img {
        max-width: 100%;
        height: auto;
      }
    </style>
  </head>
  <body>
    <img
      srcset="
        https://placehold.jp/640x360.png   640w,
        https://placehold.jp/960x540.png   960w,
        https://placehold.jp/1024x576.png 1024w
      "
      sizes="100vw"
      src="https://placehold.jp/640x337.png"
    />
  </body>
</html>

ブラウザをいっちゃん狭くしてデベロッパーツールを開く
- ブラウザはクロームを使用
- デバイスツールバーはオフにする
index.html ファイルをブラウザにドラッグアンドドロップ、または index.html をダブルクリック等で開く
狭いところから徐々に広くしてく
画像が切り替わるのを確認する
もし確認ができたら sizes を 50vw に書き換えて違いも確認してみよう

重要なのはクロームでデベロッパーツールを開いてデバイスツールをオフにすること。
1 個でも違ったら確認できない可能性が出てくる。

念のためデベロッパーツールをオフにして確認しみる。
一度 1024px の画像が表示されたらずっと 1024px になる。
ブラウザのキャッシュが効いているからだと思う。
ただここに関してはスーパーリロードで変更しないから確信は持ててない。

ちなみに一回 1024px をダウンロードしたらわざわざ小さい画像に切り替える必要はないためそういった挙動になっている。

ブラウザによっても挙動が異なるので注意。

Mac だとちょっと挙動違うんだけど？

Retina ディスプレイを使っている人も挙動が違ってると思う。
Retina では 2 倍の画像が表示されるようになっている。理由は画素密度が高いから。
画素とはディスプレイ上の画面を構成する最小単位のこと。
単位は ppi 1 インチあたりの画素数を示す。
Retina は通常のディスプレイと違い ppi が高く、より密度の高い画像を表示することで繊細な画像を表現することができる。
そしてなんやかんやあって Retina では 2 倍の画像が表示されるようになっている。
Retina と普通のディレスプレイがあったらそれぞれで確認してみよう。

例の HTML の動作はこんな感じ。

画面幅が 640px ときは 1280px の画像を使う。

1 個目で最大の画像を使っちゃってるので 1 行で終わり。

やっつけよう

ここまできたら後はコピペできるようパターンを用意してやっつけ仕事にできれば我々の勝利。

100vw パターン

例で記載通りのパターン。

<img
  srcset="
    https://placehold.jp/640x360.png 640w,
    https://placehold.jp/960x540.png 960w,
    https://placehold.jp/1024x576.png 1024w
  "
  sizes="100vw"
  src="https://placehold.jp/640x360.png"
/>

左右のマージンを考慮したパターン

仮に左右に 20px のマージンがあるとして、画面幅から 40px を引いたサイズを指定する。

<img
  srcset="
    https://placehold.jp/640x360.png 640w,
    https://placehold.jp/960x540.png 960w,
    https://placehold.jp/1024x576.png 1024w
  "
  sizes="calc(100vw - 40px)"
  src="https://placehold.jp/640x360.png"
/>

途中から画像を切替えるパターン

700px までは 100vw の画像を使い、それ以外は 50vw の画像を使う。

<img
  srcset="
    https://placehold.jp/640x360.png   640w,
    https://placehold.jp/960x540.png   960w,
    https://placehold.jp/1024x576.png 1024w
  "
  sizes="
    (max-width: 700px) 100vw,
    50vw
  "
  src="https://placehold.jp/640x360.png"
/>

最大幅を考慮したパターン

700px までは 100vw から 40px 引いた画像を使用して、それ以外は 960px で固定する。

<img
  srcset="
    https://placehold.jp/640x360.png   640w,
    https://placehold.jp/960x540.png   960w,
    https://placehold.jp/1024x576.png 1024w
  "
  sizes="
    (max-width: 700px) calc(100vw - 40px),
    960px
  "
  src="https://placehold.jp/640x360.png"
/>

まとめ

レスポンシブ画像はウェブサイトの成功に欠かせない要素であり、ユーザーエクスペリエンスとパフォーマンスに大きな影響を与えます。適切に実装し、定期的な最適化を行うことで、ユーザーにとって魅力的で高速なウェブ体験を提供できることを忘れないようにしましょう。ウェブデザインの進化に合わせて、常に最新のベストプラクティスを追求しましょう。(by GPT先生)

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up