【TIPS】HTMLの <picture> タグでWebP/PNGや解像度の異なる画像などを出し分けたい¶
HTMLの <picture> タグを利用してWebP/PNGや解像度の異なる画像などを出し分ける方法に関するページです。
WebP対応ブラウザにはWebP画像、非対応ブラウザにはPNG画像と出し分けをしたい場合など <picture> タグを利用して
画像の出し分けをすることが出来ます。
ウェブアクセラレータ（CDN） は Varyサポート機能 により1つのURLで
最大5種類のコンテンツをキャッシュして出し分けることができますが、画像の出し分けにはHTMLの <picture> タグを使うほうがお勧めです。
ウェブアクセラレータに限らず、ImageFluxやその他のCDNの画像配信でも利用できますのでご活用ください。
<picture> タグで使える属性¶
<picture> タグでは、子要素に <source> タグを使って画像を出し分けることができます。
| 子要素 | 内容 |
|---|---|
| srcset | 条件に一致したときに表示する画像のパス（URL） |
| media | ブラウザ幅（min-width, max-width）に応じて表示するものを出し分ける |
| type | jpg, png, webpなど画像形式を記述 |
| width | 画像の幅を記述 |
| height | 画像の高さを記述 |
<picture> タグの記述例¶
WebPとPNGの画像を出し分ける場合の記述例
<picture>
<source srcset="logo-2x.webp 2x, logo.webp" type="image/webp"/>
<source srcset="logo-2x.png 2x" type="image/png"/>
<img src="logo.png" alt="logo"/>
</picture>
<source> タグの type 属性内で image/webp を指定することでWebP対応ブラウザであればWebPの画像を取得して表示します。
さらに srcset 属性内でファイル名の後に 2x と書くと高解像度（DPI 2倍）の画面の端末であればその画像を取得して表示します。
また <picture> タグに非対応のブラウザでも <picture> の子要素に置いた <img> タグを解釈して画像を表示してくれるので、
画像が表示されないということはありません。
この場合、
- WebP対応ブラウザでは logo-2x.webp を表示（高解像度の画面の端末であればDPI 2倍で表示）
- WebP非対応ブラウザでは logo-2x.png を表示（高解像度の画面の端末であればDPI 2倍で表示）
- <picture> タグに非対応なブラウザでは logo.png を表示
で出し分けることができます。
ブラウザ幅ごとに画像を出し分ける場合の記述例
<picture>
<source media="(min-width: 900px)" srcset="logo-large.jpg">
<source media="(min-width: 400px)" srcset="logo-mid.jpg">
<img src="logo-small.jpg" alt="logo"/>
</picture>
また、レスポンシブデザインでブラウザ幅によって表示させる画像を変化させたい場合にも出し分けることが可能です。
media 属性内で min-width, max-width を指定するとブラウザ幅に応じてその画像を取得して表示します。
この場合では、
- ブラウザ幅が900px以上なら logo-large.jpg を表示
- ブラウザ幅が400px以上、900px未満なら logo-mid.jpg を表示
- ブラウザ幅が400px以下もしくは <picture> タグに非対応なブラウザでは logo-small.jpg を表示
となります。