picture要素による画像表現

全2回

HTML 5.1から導入されるpicture要素、img要素に追加される新属性を用いると、さまざまな条件を組み合わせて、画像を出し分けられます。基本仕様を解説しつつ、実務にどのように活かせるか探ります。

後編 子要素のsource要素

picture要素の子要素となるsource要素、img要素を使い、Viewportによる画像の出し分けや、画像フォーマットの出し分けを実装します。また、最終的にどのような使い方が現実的か指針を示します。

前編 img要素のsizes属性とsrcset属性

HTML 5.1から導入されるpicture要素、img要素に追加される新属性を用いると、さまざまな条件を組み合わせて、画像を出し分けられます。基本仕様を解説しつつ、実務にどのように活かせるか探ります。