pictureタグでレスポンシブ画像を出し分けよう

このレッスンでは、pictureタグを使ったレスポンシブ画像の出し分けを学び、通信量を抑えつつ最適な画像を表示できるようになることを目標にします。「HTML picture タグ 使い方」で調べている方向けです。

<picture>タグを使うと、画面の幅などの条件に応じて表示する画像を切り替えられます。スマホには小さい画像、パソコンには大きい画像を出し分けて、通信量を抑えたいときに使います。

サンプルコードでは、<source media="(max-width: 400px)" srcset="小さい画像">を指定し、画面幅が400px以下のときだけ小さい画像に切り替わるようにしています。条件に当てはまらない場合は、最後に書いた<img>タグの画像が表示されます。

初心者がよくつまずくのが、<picture>の中に必ず<img>タグを含める必要がある点です。<source>だけでは画像は表示されず、<img>が「どの条件にも当てはまらなかった場合の初期値」として必須になります。

ページの表示速度を改善する、実務でも重要なパフォーマンス対策の1つです。特にモバイル回線でのアクセスが多いサイトでは、無駄に大きな画像を読み込まないようにする、この仕組みの重要性が高まっています。