You could leverage the power of the picture HTML tag combined with multiple source tags and the standard img tag to let each browser decide which image to use.
Would be something like this, even with display density options:
<picture>
<source srcset="dog_1000.webp 1x, dog_2000.webp 2x, dog_3000.webp 3x">
<img src="dog_1000.png" alt="Hello yes this is dog">
</picture>
With that, you wouldn’t need the JS webp support check - browsers that understand picture/source will choose an appropriate image. Others fall back to the img :)
I was just doing some work with WebP images (after having not touched them in awhile). Came back to this article, and this comment is very helpful - and what feels like the right way to do this! (Instead of using JS, let the platform handle the support detection.) In my case, I created a Vue component that wraps my picture > source + img tree accordingly - and works like a charm!
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
Hey Grant!
Great post 👍
You could leverage the power of the
pictureHTML tag combined with multiplesourcetags and the standardimgtag to let each browser decide which image to use.Would be something like this, even with display density options:
With that, you wouldn’t need the JS webp support check - browsers that understand picture/source will choose an appropriate image. Others fall back to the
img:)I was just doing some work with WebP images (after having not touched them in awhile). Came back to this article, and this comment is very helpful - and what feels like the right way to do this! (Instead of using JS, let the platform handle the support detection.) In my case, I created a Vue component that wraps my
picture > source + imgtree accordingly - and works like a charm!