他の記事でちょいちょい書いてるけど探しやすくするために書く。
使用例
<picture>
<source srcset="https://placehold.jp/800x1200.png" media="(max-width: 800px)">
<img src="https://placehold.jp/980x560.png" alt="" />
</picture>mediaのバリエーションを追加したければsourceを増やせばいい。
cssの@mediaと同じように考えたらいい。
sourceがまったくない、imgだけが入ってる状態でも問題なく表示される。
用途
幅指定ができるからレスポンシブデザインで組む際の画像切り替えをhtml上で作れる。
PC/SPの切り替えをできるようになるのってほんと素晴らしい。
これまではcss上でbackground-imageの切り替えで対処してた。WPとか管理画面上で画像差し替えをする場合、cssファイルに干渉はできないんでhtml上に<style>を用意してそこに挿入する必要があった。もしくはjsでパスを変更するとかしてた。なかなかめんどくさかったんで、本当に楽になった。みんな使おう。
詳細・応用・注意点など
: 画像要素 - HTML: ハイパーテキストマークアップ言語 | MDN
は HTML の要素で、0 個以上の 要素と 1 つの 要素を含み、様々な画面や端末の条件に応じた画像を提供します。
developer.mozilla.org
なんでもかんでもpicture要素を使えばいいわけじゃない！レスポンシブ・イメージ実装の際の注意点
画像表示のマルチデバイス対応をHTMLとCSSのみで実現できる「レスポンシブ・イメージ」ですが、効果的な使い方をするには、いくつか注意点があります。プロダクション・サイトで使えるようになるまでにはもう少し時間がかかりそう
parashuto.com
pictureタグで画像をレスポンシブに切り替える - HTMLリファレンス
HTMLのpictureタグを使えば、画像をレスポンシブに切り替えることができます。画面幅に応じて別の画像を表示したり、WebP未対応ブラウザでは別の画像を表示したりすることが可能になります。
catnose.me
IE対策
黎明期にはhtml5.jsとかで補填を頑張ってたけど、もう完全に見放されてるんじゃないのってレベルで最近のhtml事情はieを突き放してる気がする。自分としてもそうしたいのだけど閲覧者を選べないのでどうしようもないですね。
<picture>ピンポイントで動作するようになるjsがあるんで、IEを切れない人はこれを使いましょう。
GitHub - scottjehl/picturefill: A responsive image polyfill for , srcset, sizes, and more
A responsive image polyfill for , srcset, sizes, and more - GitHub - scottjehl/picturefill: A responsive image polyfill ...
github.com
picturefill - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers
A responsive image polyfill. - Simple. Fast. Reliable. Content delivery at its finest. cdnjs is a free and open-source C...
cdnjs.com
<head>に入れたらOK。しょうがないと思うけどレスポンスはちょっと遅い感じがする。
コメント