The Process
If you were adding in webp support to your website manually you would search for the images in <img> tags. For example:
<img src="/images/logo.png" height="200" width="300" alt="logo">
Don’t forget your heights and widths – see Cumulative Layer Shift – and your alt so that the image is described.
You would then use your favourite image editor to open the png and save it to webp format. You would then modify your HTML to look like this:
<picture> <source srcset="/images/logo.webp" type="image/webp" /> <img src="/images/logo.png" height="200" width="300" alt="logo"/> </picture>
Modern browsers know about the <picture> tag and know to expect <source> tags within it and an <img> tag for attributes such as height, width and alt.
Older browsers (see sources below) do not know of <picture> or <source> so just ignore them and only render the <img> tag.
Modern browsers also know about additional <source> types. Most already understand what a webp is and more will understand avif as time progresses (see sources below). To add these in you just repeat the process you did for webp adding in avif as well.
<picture> <source srcset="/images/logo.avif" type="image/avif" /> <source srcset="/images/logo.webp" type="image/webp" /> <img src="/images/logo.png" height="200" width="300" alt="logo"/> </picture>
When the next format comes out it will just add to the top of this list. You will want to do that for all your images on your website. That isn’t terribly difficult but it is terribly time consuming.
We can do it programmatically…
The Programmer Way
We do the same as above but with far more semi-colons and if statements.
All the HTML that is downloaded is generated on our server… we can look at that and change it before we sent it to the client. We’ve used that for quite a few enhancements over the years.
In this case we interpret the HTML looking for any <img> tags.
Then we examine the image it references that are stored on our server, for each image we convert it to avif and webp if we haven’t already done this. If you’ve manually uploaded avif or webp images we don’t do anything with them. We also will regenerate them if you replace the source image.
If we successfully did that then we adjust the HTML that is output and send it on to the client.
Easy huh?
CSS
What about CSS background images? This is somewhat trickier but as with anything not impossible…
The CSS side of things you will have to do manually (for now) – an example:
.backToTop_btn {
background-image: url(/images/btn-back-to-top.png);
}
Add additional CSS for webp and avif support
.avif .backToTop_btn {
background-image: url(/images/btn-back-to-top.avif);
}
.webp .backToTop_btn {
background-image: url(/images/btn-back-to-top.webp);
}
We detect whether the browser knows what an avif is. If it does then we add a class to the body. If it doesn’t then we check if it knows what a webp is. If it does then we add a different class to the body. If it doesn’t know about that it does nothing.
The problem that we had to solve was that you could end up asking the server for an avif (or webp) that didn’t exist. What we do on the server is check whether there is a png, jpg, or whatever with the same filename (but not extension) and then generate the avif (or webp) from that. Again, only if we need to. Once we have that we can send it to the web browser.
The Problem
As with any solution that seems a bit too good to be true there is a problem.
Whatever image it is that you are generating has to look okay for a person. This process is done by a computer. It is good but is unlikely to be perfect.
There is also a delay the first time a webp or avif is requested that we’ve not yet generated but that delay is gone the next time the picture is requested. We could do all this at the time the website starts up but that could add an enormous delay to convert images that might not even be referenced.
Until you have the time to go through every image, I am sure it will be fine.
Conclusion
While not perfect, this is a pretty good starting point to making sure all your images are served in as modern a format as we know about.
Want to see it in action? Go to gtk.co.uk where we have implemented it.
If we maintain your website and you would like to implement it to improve your search rankings then please do get in touch.
Sources:
"picture" | Can I use... Support tables for HTML5, CSS3, etc
"webp" | Can I use... Support tables for HTML5, CSS3, etc
"avif" | Can I use... Support tables for HTML5, CSS3, etc
Get in touch