pictureタグでレスポンシブに画像の表示を切り替える方法

Webサイトを作成する際、画像のレスポンシブ対応は必須です。

画像のレスポンシブ対応には、多くの方法がありますが、srcset属性やpictureタグを使用することで、ユーザーが閲覧している端末に応じて最適な画像を表示することができます。

前回はimgタグのsrcset属性を使用した実装方法を紹介しましたが、今回はpictureタグを使った画像表示の切り替え方法をご紹介します。

特に、画面幅に応じて見た目の異なる画像を出し分ける必要がある場合は、pictureタグによる実装が適しています。その場合の実装方法などを、具体例を交えながら解説していきます。

pictureタグの使い方

pictureタグを使用すると、imgタグのsrcsetで画像を出し分けるよりも、さらに高度な表示条件を設定することが可能です。
任意の画面幅や画像ファイル形式のサポート状況などの条件に対して、確実に表示させたい画像を指定できます。

例えば、スマホとデスクトップで見た目が異なる画像の場合は、特定のブレイクポイントで確実に画像を切り替えたいため、pictureタグの使用が適しています。

このように、見た目の異なる画像をデバイス毎に出し分けて表示させることを「アートディレクション」といいます。

例として、以下のような２種類の画像パターンを表示する場合を考えてみます。