.webp files - a warning

.WEBP is the latest and greatest image format, using new wavelet compression algorithms, it saves better quality files than .jpg at significantly reduced file size. I have been testing it for a while and works well, if you can find an application to save to it + google and others are encouraging widespread adoption.

I added a few of the bigger background images to a site as webp. Tested carefully with a range of browsers and all seemed good. Only when watching a few session playbacks on Statcounter (brilliant tracking tool, playback is ÂŁ5 month) and realised that certain older versions of Safari were not showing the images. Oops!

All site images are back as jpg and will remain that way for the foreseeable future…Sod the page load speeds!

PS I have a strong suspicion that webp is a rebranded JPG2000, but cannot confirm - if you change the file ending of a webp file, it opens in most applications

The browser support just isn’t there. There appears to be a lot of poor information stating that Safari 15 macOS supports webp, but only the newer macOS’s Safari 15 support it.

I partially blame Google PageSpeed for advising that you use next gen image formats such as webp.

A worthwile thing to do however, is to add image dimensions to Source images as that will often make a decent PageSpeed improvement.

I.e. in the Sorce Image “Custom Attributes” add width="172" height="121" for a 172w 121h image.

Absolutely right on the lack of support. I had tested on FF, Opera, Safari and a few more, forgetting that I always use the latest browsers. Rookie error!

Good thoughts on image dimension thanks. I have also added code to increase the length of server cache which gave me a good improvement in Google PageSpeed. Slowly, Slowly the improvements are making a difference, the only problem is the 5 other sites to follow!

There are a few stacks for WebP support that offer a fallback image.

Shaking the Habitual’s srcerer stack suite includes a WebP stack, and Stacks4stacks WebP stack (Free)

Or serve your images from a service like Cloudinary which will use “automated optimization” and serve your image in whichever format is best for the browser that is visiting your site.

1 Like

Thanks Paul. @habitualshaker 's Container stacks also support webp as background images and they work well, with browsers that support the format. Therein lies the issue though: browser support. Fallback is OK if it is all image sizes, but most of my site images are now 3-4 different sizes for optimal load speed and tbh I’m not interested in generating extra versions. Lightroom and most Adobe products don’t yet export the format, so it is all too much fuss at this point.

Interesting you raise this - 20 years ago I was talking with a Danish company that had developed the tech to offer that service, but at that point it was for large files like tif / pdf for magazines to download from original master files. Cloudinary look interesting btw :)

Does this look about right? Is image OK or should it be image size?

I use the “free tier” on quite a few websites. A great way to speed up image load times, and “warehouse” your images at the same time.

1 Like

Thanks! Certainly something to look at - I’m racing on this project, with ads scheduled. I don’t want to try anything new for a day or two

No. Add it to the Source Image stack

Screenshot 24

2 Likes

Thanks Gary, had been wondering how to do that in Source as it’s something pagespeed alway nags about.

1 Like

@Nick @pmjd You can also add loading="lazy" to lazy load any images that appear under the first fold.

So the example above would use width=“172” height=“121” loading="lazy".

4 Likes