【Nuxt.js】srcset, sourceで画像を表示しよう

前置き

それぞれのタグの役割が
ごっちゃになって混同していたので
自分の備忘録としても書きました✍️

⬇️srcsetについては
　こちらでも少し触れました。
【Nuxt.js】画像データをwebPで軽量化よう

今回はより理解を深めるために
sourceコードも使用していきます💫

参考:
なんでもかんでもpicture要素を使えばいいわけじゃない！レスポンシブ・イメージ実装の際の注意点
 メディアクエリとviewportの使い方について
 HTMLのsrcsetを使って画像をレスポンシブにRetina対応させてみよう
 HTMLにimg要素で画像を表示する 2020年版
 srcset属性の使い方。画像の表示を高画質ディスプレイに対応させる方法
 「解像度」の理解があいまいだったので備忘録としてまとめてみた

srcset

メリットと使い方

srcsetで複数のメディア指定が可能です。
解像度の高いデバイスで
高画質な画像を表示できます✨👀
2x, 3xはデバイスピクセル比を表します。

要は
デバイスピクセル比が高い
=解像度が高い
=画像をものすごく綺麗に表示できる🌟
ということです💫☝️

2xはRetinaディスプレイ
3xや4xは高解像度ディスプレイ
srcはscrsetが対応してないIEなどに必要です。

ちなみに画像の@2xは
その画像を2倍の解像度にしたものです。
デザインツールによっては
複数の解像度を
一括で書き出しすることもできます。

<img
     src="img/example-img.jpg"
     srcset="img/example-img.jpg 1x,
                    img/example-img@2x.jpg 2x"
     alt="Example image"
>

<img

src="img/example-img.jpg"

srcset="img/example-img.jpg 1x,

img/example-img@2x.jpg 2x"

alt="Example image"

ちなみにsrcsetで単位をwにし、
sizes属性で指定すれば
50vwでウィンドウサイズの半分にすることが可能です💡
その画像サイズをウィンドウサイズの半分、
まぁ画像サイズを半分にするということです！

<img
      type="image/jpeg"
      src="default.jpeg"
      sizes="50vw"
      srcset="/large.jpeg 1440w, /medium.jpeg 720w, /small.png 360w"
      alt="img"
>

<img

type="image/jpeg"

src="default.jpeg"

sizes="50vw"

srcset="/large.jpeg 1440w, /medium.jpeg 720w, /small.png 360w"

alt="img"

高画質の1枚だけで良い？

ここで疑問を持つ方もいらっしゃるでしょう。

「たくさん画像を書き出さず、
　最初から高画質の画像だけを
　表示させれば良いのでは❓」

それが1番楽なのですが…
高画質でも解像度が低ければ
せっかくの高画質のままに
見ることはできません👀💦

それでも読み込みに負担がかかります。
なので解像度に合った画像を
表示させるのが1番良いわけです💡

逆に通常の画像を
解像度の高いデバイスで見ると
画質が荒い…😵
となってしまいますね。

source

メリットと使い方

srcsetで解像度別に
画像の切り替えはできたものの、
レスポンシブ対応はまだできていません。

そこで使用するのが
sourceタグというわけです💫☝️

sourceタグはpicture, audio, videoタグに対して
複数のメディアリソースを指定できます。
今回は画像で例をあげるのでpictureを使用します。

まずは単純にメディアクエリで
表示している幅で画像を変えます。

<template>
  <div class="page">
    <picture>
      <source
        media="(min-width: 800px)" // 幅が800pxになるまで
        srcset="/l800.jpeg"
      >
      <source
        media="(min-width: 600px)" // 幅が600pxになるまで
        srcset="/600.jpeg"
      >
      <img srcset="/small.jpeg" alt="sample"> // それ以外=600px以下
    </picture>
  </div>
</template>

<source

media="(min-width: 800px)" // 幅が800pxになるまで

srcset="/l800.jpeg"

<source

media="(min-width: 600px)" // 幅が600pxになるまで

srcset="/600.jpeg"

<img srcset="/small.jpeg" alt="sample"> // それ以外=600px以下

</picture>

</div>

</template>

あとはデバイスごとに
適切な画像を表示してもらうようにします。

<template>
  <div class="page">
    <picture>
      <source
        media="(min-width: 800px)" 
        srcset="/800w.jpeg 800w, /1000w.jpeg 1000w, /1200w.jpeg 1200w"
      >
      <source
        media="(min-width: 600px)" 
        srcset="/800w.jpeg 800w, /1000w.jpeg 1000w, /1200w.jpeg 1200w"
      >
      <img srcset="/small.jpeg" alt="sample"> 
    </picture>
  </div>
</template>

<source

media="(min-width: 800px)"

srcset="/800w.jpeg 800w, /1000w.jpeg 1000w, /1200w.jpeg 1200w"

<source

media="(min-width: 600px)"

srcset="/800w.jpeg 800w, /1000w.jpeg 1000w, /1200w.jpeg 1200w"

</picture>

</div>

</template>

まとめ

画像表示に関するタグは
複数あるので最初は本当に混乱しました😂笑
1つずつ役割を理解することで
スッキリまとまって理解できました🌱