pictureタグを使って、代替画像形式を提供する
<picture>を使って特定の形式に対応していないブラウザに対して、代替画像形式を提供する
e.g. webp指定して、ブラウザが未対応ならpngを表示
debugする
WebPの画像をハイライトするChrome Extension
画像が多いと重くなるのでdebug時のみonにすればいい
Top Summaryという項目なに？
imgタグのsrcset属性とは何が違う #??
だいたい同じだが、pictureの方がより柔軟
imgタグのsrcset属性と組み合わせられる？
できる
けっこうう複雑になる
html<picture>
<source
type="image/webp"
media="(min-width: 960px)"
sizes="50vw"
srcset="img-pc-1920.webp 1920w,
img-pc-1440.webp 1440w,
img-pc-1280.webp 1280w,
img-pc-960.webp 960w,
img-pc-640.webp 640w,
img-pc-480.webp 480w">
<source
type="image/webp"
sizes="(min-width: 480px) 75vw, 100vw"
srcset="img-mobile-1440.webp 1440w,
img-mobile-1280.webp 1280w,
img-mobile-960.webp 960w,
img-mobile-640.webp 640w,
img-mobile-480.webp 480,
img-mobile-320.webp 320w">
<source
media="(min-width: 960px)"
sizes="50vw"
srcset="img-pc-1920.jpg 1920w,
img-pc-1440.jpg 1440w,
img-pc-1280.jpg 1280w,
img-pc-960.jpg 960w,
img-pc-640.jpg 640w,
img-pc-480.jpg 480w">
<img
sizes="(min-width: 640px) 75vw, 100vw"
srcset="img-mobile-1440.jpg 1440w,
img-mobile-1280.jpg 1280w,
img-mobile-960.jpg 960w,
img-mobile-640.jpg 640w,
img-mobile-480.jpg 480w,
img-mobile-320.jpg 320w"
src="default-img.jpg" >
</picture>これはちょっと冗長すぎる例だな
置き換え時の注意
既存のimgタグに対して、widthの指定をcssでやっている場合、崩れることがある
width指定しても無視されるので