railsでpictureタグによるwebp出し分けをする

概要

webpのを使いたいけど対応していないブラウザの場合にpngを出し分けるようにしたい

実装内容

<picture>
  <source srcset="<%= image_path("slide_01.webp") %>" type="image/webp">
  <%= image_tag('slide_01_400.png') %>
</picture>

pictureタグはsourceで画像を指定していって条件の合うものをだす。ない場合は最後に用意している画像を出す。

pictureタグについて
https://developer.mozilla.org/ja/docs/Web/HTML/Element/picture

pathの指定

imageタグでsourceを出す方法もあるが今回はsourceをそのまま書いている。この場合pathはそのまま書くのではなくimage_pathで生成しないと後ろのハッシュが生成されないのでうまく表示されない。