New

今さらながら「srcset」でレスポンシブ用の画像の出し分けをしてみた

こんにちは!久しぶりのブログの投稿です^^

タイトルの通り、今になってやっと「srcset」でのデヴァイスごとの画像の出し分けをやってみたので、
メモがてら残しておこうと思います^^

srcsetとは?

html5から追加をされた新属性です。
pictureタグとimgタグに適用できます。今回はimgタグで試してみました!

※はじめはimgタグで使用したのですが、よくよく確認をしていくとブラウザ間で見え方が異なるなど不具合があったので、pictureタグに修正をしましたm(_ _)m imgタグでのsrcsetについてはまた後日改めて試してみます!(2019/03/20 編集)
実際、「アートディレクションが入る出し分け(デヴァイスによってデザインの異なる画像を出し分ける)」を行う場合はpictureのsrcsetを使用、
「画面解像度のための出し分け」を行う場合(Retina対応など)はimgタグでのsrcsetの使用が適当なようです。

古ではPCとスマートフォンでの画像の出し分けは、htmlのimgタグをPC用・スマートフォン用2つを設置し、cssのdisplay: none;で表示非表示を切り替える、ということをしていました。
これではPCでもスマートフォン用の画像を読み込み、スマートフォンでもPC用の画像を読み込んでしまうため、ページの読み込みに負荷をかけてしまうことになります。
(最近では基本画像は1つしか用意せず、PCでもスマートフォンでも違和感がないように見えるよう作成をしていました…)

そういった問題を解決するのが「srcset」です!
srcsetを設定することで、ブラウザの画面幅に応じて設定した画像を動的に出し分けてくれるため、無駄な画像リソースを読み込まさずに済むのです。

値について

まずはコード。以下のように設定をします。

pictureとsource

出し分けをしたい画像のパスsrcsetで指定をするのはpictureタグではなく、その中に設置をするsourceタグに設定をします。
pictureタグの中にsourceタグを入れ子する形になります。
sourceタグのmediaqueryで画面幅ごとの条件を設定します。mediaqueryの記述方法はcssでお馴染みの方法と同じですね!
pictureの中のsourceタグは複数設置が可能です。
上記の例では1つ目のsourceタグ内mediaで「(min-width: 750px)」と記述し、画面幅が750px以上のときの条件設定と、
2つ目のsourceタグ内mediaの「(min-width: 1020px)」で、画面幅が1020px以上のときの出し分け設定2種類を用意しています。
pictureタグ内に設置するsourceタグはこのように複数設定することが可能です。

また、最後にimgタグで、sourceタグで指定した条件以外の画面幅で表示をする画像のパスを設定します。
上記の例では749px以下の画面幅のときに表示をする画像、ということになります。

今回の例では「(min-width: 750px)」という形でmin-width を使用しましたが、
もちろん通常のmediaquery同様「(max-width: 749px)」のように、最大幅を指定することもできます^^

srcsetの問題点

IEに対応していません。もうええやろという感じですが。
picturefillというjsライブラリを導入すればIE11でも使用できるようです^^

以上!

まだ使い込めていない状態ですが、これを機にバンバン使っていきたいと思います^^

 

contact

お仕事、お見積のご依頼、その他ご相談は下記フォームからお気軽にお問い合わせ下さい。

お名前
メールアドレス
お問い合わせ内容
top