Initially the idea for this blog post was to compare all the image formats to determine which is best. I even made a flowchart to assist the reader in deciding which they should use. The more research I did however, the more it became “Huh, what are some reasons I actually wouldn’t want to use webp?” which isn’t a great blog title. Webp is becoming a defacto standard for online images, combining the strengths of several older and more universally supported formats, so in this article I will talk about some ways to better utilize the format, hopefully speeding up your site. But before we go into that, we need a more clickbaity title, so let’s try this instead:
Why webp is the best, and jpegs are photographers and other hooligans
There we go.
To provide some context without too much nerd speak, webp was created by Google, using the technology they acquired when they purchased On2, a company that specialized in creating video codecs and licensing them out for various applications. Initially announced in 2010, there would be only partial support for the format in Chrome until 2014. At this point it is supported on all of the most popular browsers, with Firefox and Safari joining the party in 2019 and 2022, respectively. While we are discussing browser support, if you are in a position where you have to support any version of Internet Explorer, webp is a non-starter. It isn’t and likely won’t ever be supported, since those browsers are not receiving any more updates from Microsoft.
Webp is probably most often compared to the jpeg format, but it also offers alpha-channel transparency (like png) and is capable of animation (like gif). You could say webp is coming after everybody’s job, but it’s main value proposition is that it offers quality similar to jpeg, but with smaller file sizes. If you are a WordPress user, there are multiple plugins that will convert your existing images to webp, generally without the need for a developer. Consistently using smaller images can legitimately speed up your website, if you have a lot of images on it.
So you’re saying I should just reconvert everything on my site to this new format?
Consider MKBHD’s video where he uploads, downloads, and re-uploads the same video clip to Youtube 1000 times. Youtube compresses the file at each iteration until at the end it is very hard to make anything out except a vague human form. It deals with video instead of still images, but is still a good demonstration of compression doing its thing. We want to avoid compressing one image multiple times.
One could argue that the mozjpeg encoder does a better job of compressing large images than webp’s VP8, but outside of a few special cases (software engineers who run photography websites?) it probably makes most sense to just use webp – if nothing else, for SEO reasons. Helpfully, there are WordPress plugins that can automatically convert your existing images to webp. That’s a sweet deal, but it will add more compression artifacts and blurring to your images, so it’s likely not the best solution if image quality is especially important to you. See MKBHD, above.
Digital Growth Digest
Honest Guidance for Marketing in a Digital World
Okay smart guy, if having a plugin re-compress all my images isn’t the best idea, then what should I do?
Incorporate webp conversion into your content-writing process. Whether you have a photog on staff or you get images from istockphoto, presumably there’s a step between acquiring an image file (likely a huge jpeg or tiff) and uploading it to your site. It’s at this point that you should convert to webp. This way, once that image is on the server, no further image conversion or compression is needed, and the quality you see while writing your posts is what people see when they visit the site.
As for how to make the conversion, Photoshop and Affinity Photo are both able to output webp. If you don’t have either of those, several online image converters exist that can do it too.
Returning to the format choice discussion for a moment, there may be specific situations in which it makes more sense to use something besides webp, like:
- Vector images – Webp is not a vector format, so if vectors are what you need, use the svg format.
- Print quality – You’re best sticking with jpg or tiff. This avoids confusion, as anybody in the business of printing or preparing things for print definitely has a computer that can work with the file. Of course, if you want to allow high-definitition downloads for print, the ideal solution is the show a webp on the web page, and if the image is clicked, the user should get a jpeg or tiff download.
- Documents – If you are uploading documents to your website, you should use PDFs.
- Crusty animations with lots of dithering – Obviously what you need is a gif.
As with webp we recommend converting to those formats as early as possible, and if you do use an image converting plugin, usually it can be set to ignore those files.
How do you recommend we do this, Digital Agency man?
Over here at Solid Digital we’ll generally use the Imagify plugin to handle conversion of existing images. Our preference is to have the plugin change references to images from <img> tags to <picture> tags. If you take this route we recommend you at least run through your site and content to make sure the tag replacement is working. Using rewrite rules is also an option, but tends to add more complication in cases where Cloudflare is used, or the host provides some other form of caching. In WPEngine, if you use rewrites, you will have to write the rules and get in touch with their support to get them implemented.
In conclusion, webp is the future, and it’s probably a good idea to add it to your workflow. Once you’ve done that, your site will look good and load faster. Site visitors will be in awe. You can even compress human interaction with it. Next time you’re in a long, dragging phone call that you can’t seem to get out of, start talking about your image optimization strategy. Go into detail about webp and its use of the VP8 codec, and alpha channels. I’ll bet your uncle (or whoever called you) will remember there’s something else they ought to be doing right now.
