#51 いよいよpicture要素を使う時代になっていたらしい【ぴよぴよコーダーの開発日記】

2020年8月29日 23:11

一人コーダーな環境にいると、知らない間に新しい技術がスタンダードになっていてびっくりする。。レスポンシブ時代な今、画像はimg要素じゃなくてpicture要素を使っているらしい。

picture要素とは、レスポンシブイメージで使う要素の一つ。ちなみにレスポンシブイメージとは、HTML 5.1のレスポンシブ画像の扱い方の技術のこと。

レスポンシブイメージには、2つの用法があるので、まずは基本型のデモ（デモは、Chromeではなく、FireFoxブラウザで、ご覧ください）

基本型

基本型は、画像の大きさの出し分けのみ。picture要素を使わず、img要素で書ける。実務で使うことってあるんかなぁ。。画像が大量でやたらパケット食うサイトとかかな。

    <img srcset="img/small.PNG 767w,
         img/large.PNG 1280w"
    src="img/large.PNG"
    sizes="(max-width:1280px) 100vw, 1280px">

見慣れない属性がちらほら。

wという単位：幅記述子という。横幅の単位。vwに似ている。

srcset属性：画像ファイルのパスを記載。併記してあるwの幅を条件に画像ファイルの切り替えを行う。ここでは1280pxまでlarge.pngを表示して、768pxまでsmall.pngを表示している。

sizes属性：表示する画像の横幅。ここでは、1280px以下の時は画面幅、それ以外では1280pxで画像を表示という記載。

さて、これ、最初になんでFirefoxで見てくださいと伝えたかというと、ブラウザによってだいぶレンダリングが違うらしいのです。

Firefox：ブラウザ幅と連動して画像切り替わる

Chrome：最初に読み込んだ画像のキャッシュが強く、ブラウザ幅を変更しても、画像は切り替わらない。

IE11：切り替わらない。

覚えること、ありすぎか。。

アートディレクション型

次は、単純に画像の大きさの出し分けでなく、スマホには、スマホ最適化された見た目の画像を出し分けたい場合の記述のデモ（このデモはブラウザどれでも大丈夫です）

<picture>
       <source media="(max-width:767px)" srcset="img/crop.PNG 768w" sizes="100vw">
       <img src="img/large.PNG" width="1280" height="665" alt="代替テキスト">
</picture>

だけど、これだけではIE11先生では動かないので、ポリフィルのJSを読み込ませます。CDNのパスは下記。

<script src="https://cdnjs.cloudflare.com/ajax/libs/picturefill/3.0.3/picturefill.min.js"></script>

＜つまづいた点＞

IE11とFirefoxで見た目を確認したところ、sizes="100vw"がいまいち効いてないような。。左がIE11（横スクロールが出てしまっている）。右がFF（左右に謎の余白ができている）

実際にpicture要素使っているサイトの記述をみたところ、img要素に100%指定をしているところが多かったので、下記の記述を追加

<img src="img/large.PNG" class="respo-img" width="1280" height="665" alt="代替テキスト">

<style>
.respo-img {
   width: 100%;
}
</style>

picture要素の中のimgに100%指定をすると、直りました。

ただ、imgに100%指定すると、PCページの時に100%じゃなくて、コンテンツ幅で表示したいときに困るので、外側にwrapperのクラスを使ってmax-widthでコンテンツ幅を指定します。

<style>
.wrapper {
   max-width: 1280px;
   margin: auto;
}
.respo-img {
   width: 100%;
}
</style>
<div class="wrapper">
  <picture>
    <source media="(max-width:767px)" srcset="img/crop.PNG 768w" sizes="100vw">
    <img src="img/large.PNG" class="respo-img" width="1280" height="665" alt="代替テキスト"
  </picture>
</div>

ここは、widthじゃなくて、max-widthを使うのがポイント。widthは固定になってしまうけど、max-widthならフレキシブルに画像幅を動かせるので。

こうやってみると、まだまだ不安定なんではと思いもしますが、かなり普及した書き方になっているようなので、使っていくのかなと思います。

ちなみによく見かけるソースコード

<picture>
 <source media="(max-width:767px)" srcset="./img/hoge_sp.png">
 <img src="./img/hoge_pc.png" width="1280" height="665" alt="代替テキスト">
</picture>

うーん。みなさん幅記述子とsizes属性、省略しているような。。省略できるのかな。HTML: The Living Standard　の例では、省略している例もある。

画像はsrcsetで切り替わるとしても、altはimgに書いたものが読まれるみたいですね。

そして皆さんやはりimg要素に100%指定しておりました。

参考：HTML 5.1のsrcset・sizes属性とpicture要素の使い方

参考：srcsetとsizes属性でサイズ(解像度)ごとに画像を出し分ける方法

参考：img要素のsrcset属性で画像を切り替えよう

参考：HTML: The Living Standard　（W3C日本語訳）

参考：the-picture-element　（W3C原文）

参考：picture要素　ざっくりだなー

参考：レスポンシブイメージのネイティブサポート　あとで読む