I am using WebP on Photoshop and am noticing that the image file size is actually roughly the same for the same image quality on WebP as for a JPEG image. Any thoughts on how to avoid this?
Hi, thanks for another great video! I got two questions concerning images in Gatsby: 1. Is Modernizr needed for browser support when using Gatsby (i.e. serving a png instead of a webp for IE11) or does gatsby-image take care of this (even if i src a webp image in my js?), i guess the boiled down question is: how can I handle multiple browser support (concerning images) in Gatsby? 2. If i source from an external headless CMS, which serves html that i want to render in a div with dangerouslySetInnerHTML, is there any way of serving images included in this html through gatsby-image, ensuring optimization and lazy load? Cheers! Looking forward to more videos :)
Regarding question 1, Modernizr or a similiar type feature detection library is needed to support background images for safari and IE11. For normal Img tags Safari and IE11 will fall back to the correct image in the srcset that Gatsby image spits out. The other alternative is to use the gatsby-background-image plugin. This plugin behind the scenes puts the background image in a div tag so you can take advantage of the gatsby image features. Regarding #2, images from an external CMS, I don't know a way out of the box if the images are embedded into an html field. Perhaps you could write a transformer plugin similar to what this plugin does for markdown files: gatsby-remark-images
![When to use .jpg or .png? the answer is WebP... sort of [ images on the web | part two ]](http://i.ytimg.com/vi/Z_28syzkv-0/mqdefault.jpg)
Question of the day: What success have you had with the WebP format?
Great Video - currently I'm switching all my sites to supports webp format and information that i found here will help me a lot
Glad it was helpful!
I am using WebP on Photoshop and am noticing that the image file size is actually roughly the same for the same image quality on WebP as for a JPEG image. Any thoughts on how to avoid this?
I can't see my webp image! I've followed this instruction to the tee. I am working on a local server could that be it!? Please help
What browser are you using?
Thanks for the reply, I actually got it to work yesterday!
Hi, thanks for another great video!
I got two questions concerning images in Gatsby:
1. Is Modernizr needed for browser support when using Gatsby (i.e. serving a png instead of a webp for IE11) or does gatsby-image take care of this (even if i src a webp image in my js?), i guess the boiled down question is: how can I handle multiple browser support (concerning images) in Gatsby?
2. If i source from an external headless CMS, which serves html that i want to render in a div with dangerouslySetInnerHTML, is there any way of serving images included in this html through gatsby-image, ensuring optimization and lazy load?
Cheers! Looking forward to more videos :)
Regarding question 1, Modernizr or a similiar type feature detection library is needed to support background images for safari and IE11. For normal Img tags Safari and IE11 will fall back to the correct image in the srcset that Gatsby image spits out. The other alternative is to use the gatsby-background-image plugin. This plugin behind the scenes puts the background image in a div tag so you can take advantage of the gatsby image features. Regarding #2, images from an external CMS, I don't know a way out of the box if the images are embedded into an html field. Perhaps you could write a transformer plugin similar to what this plugin does for markdown files: gatsby-remark-images
it seems by IOS 14, began to support WebP image format...
That's great!