なんでもかんでもpicture要素を使えばいいわけじゃない！レスポンシブ・イメージ実装の際の注意点

画像表示のマルチデバイス対応をHTMLとCSSのみで実現できる「レスポンシブ・イメージ」ですが、効果的な使い方をするには、いくつか注意点があります。プロダクション・サイトで使えるようになるまでにはもう少し時間がかかりそうですが、基礎と注意点くらいは今から覚えておいても良さそうです。 Cloud Fourというアメリカの制作会社のブログ で、<picture>要素の使い方について注意を促していて、とても重要な情報だと思ったのでこちらでもシェアします。先日書いたレスポンシブ・イメージとPicturefill 2のまとめとあわせて、近い将来、レスポンシブ・イメージ実装の参考になれば幸いです。 まずは推奨の記述方法から レスポンシブ・イメージ実装の際に推奨されるHTMLの記述方法は以下のとおりです： とりあえず、これだけ覚えておけば、細かいところはこの記事をはてブ しておいて、使う時にもう一度見な

[AmaiSaeta]

"サイズ変更のみの場合はimgにsrcset属性を使う" "アートディレクションを入れる場合のみpictureを使う"

[inoueyuworks]

<img imgset>: 画像の、ディスプレイ解像度こみで考慮して、良さげなリソースを一つ選ぶ; <picture>: media-query が最初に合致した画像を表示する。

[tenchikometen]

レスポンシブ　画像　入れ替え

[yk_ac]

サイズ変更のみの場合はimgにsrcset属性を使う アートディレクションを入れる場合のみpictureを使う

[istj]

css

[idr_zz]

figureがpictureに取って変わるわけではなくこれはあくまでレスポンシブ向けの要素 なんでもかんでも&lt;picture&gt;要素を使えばいいわけじゃない！レスポンシブ・イメージ実装の際の注意点 @rriverさんから

[shuuuuuny]

srcset picture

[steelydylan]

こういう情報にもアンテナを張っておこう。

[mzkzzz]

picture要素、ios9.3から使えるようになったんだねえ http://caniuse.com/#search=picture

[kitokitoki]

「サイズ変更のみの場合はimgにsrcset属性を使う,アートディレクションを入れる場合のみpictureを使う」

[piano-kanrinin]

“<img srcset="img/400w.png 400w, img/800w.png 800w, img/1200w.png 1200w" alt="幅に合わせた寸法での表示の例">”

[jinjor]

メモ。

[skyfox_xxx]

めも

[reactivation]

メモ

[xxxanxxx]

“srcset”

[tihata]

便利なのかと思いきや、mediaをCSSにかけないのはかなりおしっこちびりそう。

[show-tima]

いつか使うことになりそうなのでメモ。

[s99e209]

画像サイズのみを変更する（解像度の変更）場合はimgにsrcset属性を使う。 一方、スクリーンサイズによって違う内容の画像を表示する（アートディレクションを入れて画像を変更する）場合のみpictureを使う。

[mellow-mikan]

ふむふむ

[thesecret3]

そろそろhtml5でいいのかな。。

[ku_marin]

mediaの部分cssの方に書きたいけど出来るのかな〜出来たらいいな。しかしめんどい_(:3 」∠)_

[qrac_jp]

レスポンシブ画像切り分け。

[y-kawaz]

ひたすら面倒くさいな…。フロントやってる人達は偉いと思う。

[clstk]

画像の扱いについて。

[suei0921]

（ピクチャー要素）

[XIAORING]

picture img responsive 画像 解像度