コーディング

これからのホームページ制作にsrcsetでできること

2017.07.05

2017.07.15

これからのホームページ制作にsrcsetでできること

HTML5で策定されたsrcset属性という、新しい属性があります。この要素はブラウザの画面幅や指定したサイズ、dpiなどに応じて、異なる画像を読み込むことができます。レスポンシブ対応のサイトを制作するときやサイトの速度対策にも貢献させることができる有用な属性なので、今回はどういった効果があるのか紹介したいと思います。

srcset属性の書き方

まずは記述について、少し特徴的なので解説しましょう。判例は以下になります。

<img src="img/example-img.jpg"
     srcset="img/example-img-320.jpg 320w,
             img/example-img-640.jpg 640w"
     sizes="(max-width: 640px) 50vw"
>

srcset属性

1行目のsrcは未対応ブラウザへのフォールバックですので、2行目のsrcsetから見ていきます。
srcset属性は画像とその画像の読み込まれる条件をセットで指定し、コンマ区切りでサイズや条件を切り分けてレスポンシブなどに対応します。上記の例であれば

  • img/example-img-320.jpgの画像を320wのとき(ブラウザ幅320px以下のとき)は、読み込む
  • img/example-img-640.jpgの画像を640wのとき(ブラウザ幅640px以下と以上のとき)は、読み込む

という意味になります。

size属性

例の4行目で指定しているsizes属性はsrcset属性とセットで画像の読み込み条件を変動させます。記述がなくてもsrcset属性は機能します。上記の例だと

  • ブラウザ幅640pxまでは、viewportの50%のサイズとしてsrcset属性を計算する

となります。つまりブラウザ幅640pxまではimg/example-img-320.jpgが読み込まれます。

別の書き方

シンプルに以下のようにも指定できます。

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

1xが通常の表示のとき、2xがretina表示のとき、という意味です。近年のスマートフォン事情を考えるとこちらの記述のほうが使いやすい場面も多いかもしれません。

srcset属性は何が有用か

Retina対応

srcset属性はブラウザ幅を基準に画像サイズを読み分けます。これはスマートフォンとPCの単純なレスポンシブだけでなく、多段レスポンシブサイトやretinaディスプレイの場合などにも対応できます。モニターの表示解像度に合わせた適切な画像を読み込むことがsrcset属性は可能です。

画像処理のコストを削減できる

srcset属性が設定で画像を読み分けてくれるので、レスポンシブサイトで画像の表示サイズを切り替えるためにjavascriptを用意したり、大きな画像一つで対応したりすることが必要なくなります。制作コストの削減になることもあれば、サイトの通信料をコンパクトにすることにも一役買うはずです。

まとめ

レスポンシブサイト制作時に、retina対応のために倍のサイズで画像を書き出しファイルサイズが大きくなったりしていましたが、srcset属性を利用することで柔軟な対応が可能になりそうです。ブラウザ幅ごとに画像を用意するコストとバランスを取りながら良い運用をすることで、制作サイトのクオリティアップに貢献できる属性ではないでしょうか。

SHARE

この記事の筆者

Web&Soundクリエイター 田村 培修

Web&Soundクリエイター 田村 培修

楽器とパソコンのキーボードを使い分ける当社のマルチクリエイター。e-sportsに興味津々であれこれ情報を収集中。

Archive

CONTACT

06-6537-9941
受付時間
9:00〜19:00
休日
土日祝日

株式会社ゼロワンアース
〒550-0012 大阪市西区立売堀2-5−41合田ビル6F

メールで問い合わせる

ホームページで成果をあげるには、
まず現状分析

反響のないホームページをあきらめていませんか?ホームページで成果をあげるためには、現状を分析し改善していく必要があります。大阪市西区の本社にて無料相談を受け付けておりますので、ホームページ制作のことでお悩みの方は上記CONTACTより、お問い合わせください。