picture要素 - chocotakaの日記

picture要素とは

HTML5.1で新しく加わった要素の一つで、モバイル/タブレット/パソコンと画面解像度に最適化された画像を設定するのに javascriptやcssでごにょごにょする必要があったのを解決する、とても便利な要素です。

使ってみよう

<picture>
  <source media="(min-width: 700px)" srcset="sample1.jpg">
  <source media="(min-width: 300px)" srcset="sample2.jpg">
  <img src="default.jpg">
</picture>

このように、pictureで囲って使用します。

sourceのmedia属性にcssのメディアクエリのような書き方で、ディスプレイのサイズの指定が可能です。 img要素はデフォルトの画像を指定します。

ここで気をつけて欲しいのはimg要素は必ず最後に指定することです。

img要素をsource要素より先に指定してしまうと、image要素の後のsourceは無視されてしまいます。

画像解像度を設定できるsrcsetタグ

macのlatinaディスプレイのように高解像度の場合、画像サイズが２倍の画像を使うなんてことはよくあることだと思います。そこでもう一つ便利なのがsrcsetタグです。

<picture>
  <source
    media="(min-width: 768px)"
    srcset="sample.jpg, sample_1.5x.jpg 1.5x, sample_2x.jpg 2x"
  />
</picture>

このように、srcsetタグの画像を指定した後に1.5x 2xと指定する事で、1.5倍のサイズ、２倍のサイズと簡単に対応することができます。

レスポンシブとの相性がとても良いですし、画像の最適化のために活躍する要素です。