pictureタグを使って、代替画像形式を提供する - mrsekut-p

pictureタグを使って、代替画像形式を提供する

<picture>を使って特定の形式に対応していないブラウザに対して、代替画像形式を提供する

e.g. webp指定して、ブラウザが未対応ならpngを表示

GoogleSEO: Serve images in next-gen formats

https://web.dev/uses-webp-images/

debugする

WebPの画像をハイライトするChrome Extension

WebP Highlighter

画像が多いと重くなるのでdebug時のみonにすればいいmrsekut.icon

Top Summaryという項目なに？

imgタグのsrcset属性とは何が違う　#??

だいたい同じだが、pictureの方がより柔軟

https://parashuto.com/rriver/responsive-web/picture-srcset-use-case#difference

imgタグのsrcset属性と組み合わせられる？

できる

けっこうう複雑になる

code: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>

https://junzou-marketing.com/usage-of-picture-tag

これはちょっと冗長すぎる例だなmrsekut.icon

置き換え時の注意

既存のimgタグに対して、widthの指定をcssでやっている場合、崩れることがあるmrsekut.icon

width指定しても無視されるので