picture_tagヘルパーが新しく追加された

概要

picture_tagヘルパーがrailsで使えるようになった。(mainにマージされた）既存のimage_tag, audio_tagと同様に、picture_tagを記述することでHTMLのpictureタグを生成できる。

image_tagなどと同様に特に何も意識することなく使用できる。

# erb
<%= picture_tag "sample.png", alt: "An example image" %>

<!-- 生成されたHTML -->
<picture alt="An example image">
<img src="sample.png">
</picture>

image_tagでは、下記のようなHTMLが生成される。

# erb
<%= image_tag "sample.png", alt: "An example image" %>

<!-- 生成されたHTML -->
<img alt="An example image" src="sample.png">

記事によると、pictureタグを用いることで下記の恩恵を享受できる。

複数の画像のソースを指定することができるため、

になることで、ページの読み込み速度の向上やユーザーエクスペリエンスの向上につながる。

# erb
<%= picture_tag("sample.webp", "sample.png") %>

# 生成されるタグ
<picture>
　 <source srcset="sample.webp">
   <source srcset="sample.jpg">
   <img src="sample.jpg">
</picture>

元ネタは下記のgem.