はじめについに、本物のレスポンシブイメージが Web で使えるようになりました。HTML だけで完結し、面倒なハックはありません。新しい <picture> 要素と、<img> に追加された新しい属性が Chrome 38 から使えます(なので Opera でも使えます)。他のブラウザは、Firefox のナイトリービルドで実装されており、WebKit では実装中です。 <picture> はいくつかのユースケースに対して作られた要素のため、コードがごちゃごちゃすることがあります。提供したいレスポンシブイメージの書き方がどれか調べられるように、この記事ではそれぞれのケースに対応するサンプルコードを紹介します。 4つの質問レスポンシブイメージを使う前には、次の問いに答えるようにしましょう。 サイトのデザインが変化するのに応じて、画像のサイズも変化させたいか高 DPI のディスプレイに最適な画
![Dev.Opera — レスポンシブ・イメージ:ユースケースと入門用のコードサンプル](https://cdn-ak-scissors.b.st-hatena.com/image/square/81513e7c983d987694ab33068237284dfe2499f6/height=288;version=1;width=512/https%3A%2F%2Fdev.opera.com%2Farticles%2Fresponsive-images%2Fopera-house.jpg)