Web speed optimization and webP or other picture format

Each time I am running PageSpeed Insights I am getting suggestion to “Serve images in next-gen formats” using “Image formats like WebP and AVIF”. Thru the years I have read, including on SitePoint, about those new formats but I have never considered them, so far. By looking at this support table it looks like AVIF has still a long way to go versus Webp.

I am wondering if you guys web developers are using them or not ? WebP or AVIF ? Or waiting for Jpeg XL ?

By the (no)-sound of it I guess I have to understand the WebP or AVIF picture’s formats are not driving the crowd crazy !

I confess I haven’t really thought about using WebP, but I’ve just tried saving a random JPEG in WebP format and there is a huge saving in file size, with no loss of quality that I can discern (although the sun is making it hard to see clearly).

I think I’ll need to go and explore this further. Thank you for making me think about it! smile

4 Likes

The odd times I’ve tried webp it’s actually made the image larger! :upside_down_face:

2 Likes

Not that webp format on Safari on old Mac’s running older than Big Sur. So you may exclude many Mac users from your site. https://caniuse.com/?search=webp That is why I avoid webp for now…

2 Likes

JPEG - 969kB

WebP - 535kB

I was going to upload them for comparison, but Discourse won’t accept the WebP format. frown

2 Likes

Actually I find I have used a couple of webp images, and I added a couple of lines of JS to cater for when it wasn’t supported.

1 Like

You can use those newer image types if you use the < picture > element with it so you can provide a JPG fallback if the browser or device doesn’t recognize the newer format yet.

4 Likes

I did look into WebP a while back, but at the time support seemed to be too poor for it to be viable, so I kind of forgot about it.
Looking now, support has improved quite a bit, so it may be an option. But then there is having the time an inclination to go and convert a whole load of images. I would probably first want to test what the gains would be, to see if it is worth the effort.

1 Like

I’ve been holding off switching from jpeg over to webp for a while now, and notice the support is pretty broad now. I’ll probably do it within a year. For my case, my fully optimized jpegs (with exif removed, that’s one of the biggest space savers) are still about double the size of a .webp.

1 Like

I’m a fan of Cloudinary, a cloud-based service that offers a solution to a web application’s entire image management pipeline. They can automatically perform smart image resizing, cropping and conversion (favoring WebP if it is supported by the browser) while delivering images via a high speed CDN.

They have a very generous free tier — I don’t pay anything for my personal site and no credit card is required.

5 Likes

well if your site have lots of images, then i also recommend you WebP format, because it really affects you speed.