Vueと共通

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

前置き

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

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

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

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


srcset

メリットと使い方

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

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

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

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

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


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

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

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

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

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

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


source

メリットと使い方

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

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

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

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

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


まとめ

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

-Vueと共通
-,

© 2021 aLiz Nuxt