CSSのメディアクエリの基本と応用、srcset属性とimage-set()

前回の記事の最後を踏襲すると背景画像をstyle属性で使用する理由についてとなるのですが、その前にメディアクエリについて改めさせてください。

メディアクエリとは

メディアクエリとはCSSで適用範囲を指定するための記述指定です。メディアタイプやメディア特性を指定して対象範囲を限定できます。メディアタイプの例としては以下があります。

メディア特性は多種なのですが、弊社で使用するのはおおよそ以下です。

メディアクエリはデバイスサイズによりCSSの対象を限定できるのでレスポンシブサイトのPC・スマホの切り替えで使用しています。CSSの切り替えをどのくらいのデバイスサイズとするかは各社判断が分かれる部分でしょう。これは経験値によるものでしょうが、弊社の場合過去の経験より現在は752pxを分岐点としています。751px以下をスマホ、752px以上をPC・タブレットとなります。タブレットには必要に応じて別途調整します。これもメディアクエリでタブレット用にCSSを効かせます。

ちなみに以前は768pxとしていたのですが、とある時期から752pxに変更しました。理由は長くなるので割愛します。こんな感じでメディアクエリでCSSを分岐させています。

PICTUREタグ・SOURCEタグによる画像切り替え

CSSはメディアクエリでデバイスごとに切り替えます。画像の場合はPICTUREタグとSOURCEタグを使用します。

<picture>
<source type="image/webp" srcset="xxx_sp.webp" media="(max-width : 751px)">
<source srcset="xxx_sp.jpg" media="(max-width : 751px)">
<source type="image/webp" srcset="xxx.webp">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="xxx.jpg" alt="xxx" class="lozad" width="xxx" height="xxx" loading="lazy">
</picture>


一つのPICTUREタグ内に一つのIMGタグと複数のSOURCEタグを記述します。SOURCEタグはtype属性とmedia属性でデバイス・環境ごとに画像を指定します。ページスピードインサイトではJPG・PNGといった画像を使用すると次世代フォーマットの画像（WebPなど）にしろと指摘されます。なので弊社ではWebPとJPGを併用します。さらにPC・スマホのデバイス別にも用意するので基本的に一つの画像で4種類用意します。Wordpressなど自動で用意するようにする場合もありますし、手作業でフルコーディングする場合はきちんと4種類に揃えます。

なお、srcset属性で画像の幅ごとに画像を切り替えることもできますが、管理性の観点からあまり使っていません。

CSSのimage-set()による画像切り替え

さてIMGタグのレスポンシブ対応はPICTUREタグ・SOURCEタグで実現可能です。では背景画像の場合はどうなのか？ CSSの場合はimage-set()を使用することでレスポンシブ対応が可能です。

.hoge {
background-image: image-set(
"xxx@1x.jpg" 1x,
"xxx@2x.jpg" 2x
);
}

type属性を使用するとWebP・JPGの振り分けができます。PC・スマホの切り替えはメディアクエリを使いますが、一点注意するのはimage-set()内では切り替えができません。メディアクエリごとに背景画像を読み込む形です。

.hoge {
@media screen and (min-width : 752px) {
background-image: url("xxx.jpg");
}
@media screen and (max-width : 751px) {
background-image: image-set(
"xxx_sp@1x.jpg" 1x,
"xxx_sp@2x.jpg" 2x
);
}

背景画像の画像遅延対応について

IMGタグにはloading属性があるので遅延読み込みができます。背景画像には同様の設定がないためJavaScriptを使用します。実現できるJavaScriptライブラリは色々とありますが、他のライブラリに依存していない、軽量であることから弊社ではlozad.jsを使います。lozad.jsを使うと背景画像を下記のように記述して遅延読み込みができます。

<div data-background-image="xxx.webp" class="lozad">〜</div>

CSSの背景画像を多用するのはもちろん理由があります。ページスピードインサイト対策としてIMGタグの数を減らし背景画像とするという点がポイントとなるからです。この点については次回の記事で解説します。