pictureタグを使ったレスポンシブイメージの実装方法

マツカワ Webサイト制作／コンテンツ企画／Web広告／SEO／マーケティングを経験してきた雑食系Webクリエイター・プロデューサー プロフィール / Twitter / Facebook 画像のレスポンシブ対応には、これまでずっとベストな解決策と言えるものはありませんでした。 しかし、ようやくレスポンシブサイトにおける画像最適化の問題に決着がつきそうです。 それが、picture要素によるレスポンシブイメージの実装です。 複雑なスクリプトを使うことなく、HTMLだけで画像を切り替えられる picture 要素の書き方と実践的な使い方を紹介します。 picture要素とは picture要素は、HTML5.1で追加されたタグです。 pictureは要素単体では動作せず、source と img の要素を子要素に持つことで機能する入れ物要素です。 複数の画像リソースの中から、 ブラウザの状況