Rails 7.1: picture_tagビューヘルパーが追加された（翻訳）

Rails 7.1: picture_tagビューヘルパーが追加された（翻訳）

Railsは最近、新しいpicture_tagヘルパーを導入しました（#48100）。この改修により、<source>タグと<img>タグを含む <picture> タグを生成するpicture_tagというタグヘルパーが追加されます。

🔗 <picture>タグを使う理由

現代のWebアプリケーションを構築するときは、多種多様なデバイスごとにさまざまな画面サイズや解像度をサポートする必要があります。また、パフォーマンス向上につながるwebp や avifといったさまざまな画像形式もサポートする必要があります。

ほとんどのアプリケーションは未だにjpeg画像やpng画像に依存しています。これらの画像は、現在のRailsではimage_tagで手軽に配信できます。

レスポンシブなアプリケーションは、これらの画像を異なるデバイスやブラウザに配信する際に、<img>タグのsrcset属性とsizes属性を利用するのが一般的です。

srcset属性を用いて、さまざまな画像をさまざまな画面サイズで配信する簡単な例を以下に紹介します。

<div class="box">
  <img
    src="/en-us/web/html/element/img/clock-demo-200px.png"
    alt="Clock"
    srcset="/en-us/web/html/element/img/clock-demo-400px.png 2x" />
</div>

このままでは、解像度の高い巨大な画像を読み込もうとすると遅くなることがあります。
また、縦向きモードや横向きモードの画像が必要になる別のデバイスでは、画像の端が欠ける可能性もあります。

<picture>タグは、これらの問題を解決するうえで有用であり、より良い画像配信方法を提供します。<picture>タグは、さまざまなsrcset属性とmedia属性を持つ一連の<source>タグと、どの<source>タグも一致しない場合のフォールバック用<img>タグで構成できます。

<picture>
    <source srcset="/car-240-200.jpg" media="(orientation: portrait)">
    <img src="/small-car-298-332.jpg" alt="">
</picture>

🔗 アートディレクション

この問題は、さまざまな画面サイズや向きに対して異なる画像を配信できるアートディレクションと呼ばれる技術によって解決します。

アートディレクション: 異なるレイアウトでトリミングされた画像を提供したいという問題 — 例えば、デスクトップレイアウトではシーン全体を表す横長の画像を、モバイルレイアウトでは中心の被写体にズームインした縦長の画像にする画像などです。これは、 <picture> 要素を使用して解決できます。

🔗 解像度の切り替え

<picture>タグが有用な第2の問題は、解像度切り替えです。

解像度切り替え: 狭い画面の端末では、デスクトップ画面のような巨大な画像を必要としないため、小さな画像ファイルを配信したいという問題や、必要に応じて異なる解像度の画像を高密度や低密度の画面に表示したいという問題もあります。 これは、ベクターグラフィックス（SVG 画像）と srcset と sizes 属性を使用して解決できます。

🔗 Railsのpicture_tagヘルパー

Rails 7.1でpicture_tagヘルパーがサポートされるようになりました。このヘルパーは、<picture>タグを生成し、その中に<source>タグと<img>タグを含めます。

以下はシンプルな利用例です。

<%= picture_tag("car.jpeg") %>

上のERBは、以下のHTMLを生成します。

<picture>
    <img src="/images/car.jpeg" />
</picture>

🔗 複数のソース

画像ソースを複数指定する場合は、以下のようにします。

<%= picture_tag("car.webp", "car.avif", "car.png",
                :image => { alt: "Image", class: "responsive-img" }) %>

上のERBは、以下のHTMLを生成します。

<picture>
    <source srcset="/images/car.webp" />
    <source srcset="/images/car.avif" />
    <source srcset="/images/car.png" />
    <img alt="Image" class="responsive-img" src="/images/car.png" />
</picture>

🔗 カスタムタグの完全な例

以下のようにpicture_tagヘルパーにブロックを渡すことで、カスタムsourceタグとimage_tagでpicture タグをカスタマイズすることも可能です。

<%= picture_tag(:class => "responsive") do %>
    <%= tag(:source, :srcset => image_path("car.webp"), media => "(min-width: 600px)") %>
    <%= tag(:source, :srcset => image_path("car.avif"), media => "(min-width: 600px)") %>
    <%= tag(:source, :srcset => image_path("car.png"), media => "(min-width: 600px)") %>
    <%= image_tag("picture.png", :alt => "Image") %>
<% end %>

上のERBは、以下のHTMLを生成します。

<picture>
    <source srcset="/images/car.webp" media="(min-width: 600px)" />
    <source srcset="/images/car.avif" media="(min-width: 600px)" />
    <source srcset="/images/car.png" media="(min-width: 600px)" />
    <img alt="Image" class="responsive-img" src="/images/car.png" />
</picture>

🔗 まとめ

Rails 7.1のpicture_tagヘルパーは、現代的なWeb画像フォーマットとレスポンシブ画像を手軽にサポートできる素晴らしい追加機能です。

関連記事

保存版: Web画像フォーマットを「正しく」扱う（1）ピクセルとDPRを完全理解する（翻訳）