picture要素を使うとレスポンシブイメージの表示速度が速くなる？ | Web技術Tips | ホームページ制作のDOE【横浜】レスポンシブデザインのサイトでは、PCサイズとSPサイズで別々のサイズの画像を切り替える場面が出てきますが、HTML5.1の新要素であるpicture要素を使えば効率よく切り替えることができそうです。 picture要素とは？ picture要素は、HTMLでレスポンシブイメージを扱う仕組みのことです。 通常、レスポンシブイメージを扱うにはCSSのメディアクエリを使う方法が一般的ですが、picture要素を使うとHTMLソースのみでレスポンシブイメージが扱えるようになります。 picture要素を使うとこのようにPCサイズとスマホサイズで別の画像が表示されます。 具体的には、ブラウザサイズが600px以下ならスマホサイズの画像を、600px以上ならPCサイズの画像が表示されています。 使い方 picture要素は以下のように使います。 <picture> <source media="(m
