It is 2022 and it is time to re-think images, after almost 20 years of “business as usual.” 60% of an average website is made up of images. There is no avoiding images, and image optimization, they’ve been here since the beginning of the www, and they will be here until web 3.0
Like many subjects in SEO, I could go extremely deep & complicated when talking about image formats, particularly with compression algorithms but we’ll keep it short and sweet for this blog post.
Most websites that I come across for the first time have images with ridiculously bloated, oversized, un-optimized, and un-compressed images.
Any non-webmaster can easily see this by right-clicking on any image “opening in a new window” and seeing how big that image is. Does it blow up really big, say 5x larger than the size of the image on the website? If so, its multiple times larger than it should be. But we aren’t here today to talk about optimizing ordinary images, we are here to take a look at next-gen image formats, and the death of the JPEG.
For the past several decades, 2 image formats have dominated the entire internet: jpeg and png. There has always been a universal rule that most webmasters subscribe to: use PNG for graphics, and JPG for photos.
Recently, a few new players have entered the mix, and it is worth looking into. There have been many image formats that are way “smarter” than jpeg & png that have come along over the years, but none of them made the cut because they just don’t work with all modern web browsers. It doesn’t matter how good an image format is, unless the big 4 web browsers(Chrome, Firefox, Safari, and Internet Explorer/Edge) support them, the image simply won’t display inside the web browser.
For now remember this: the goal for image optimization should not be to only serve images in these new formats, it should be to TRY FIRST to serve in these formats if possible.
Image Optimization with WebP (the clear winner)
WebP is probably one of the biggest breakout image formats in this century. It may be the first image format to overtake PNG,JPEG and the rest of the lot!
The great thing about WebP is that it supports alpha channel (or transparency.) For those non-designers out there, I like to describe an image with a transparent background as having a “clear” background. Transparent images are necessary for assets such as logos, where you need to hide the background of an image, over the background of a website with different colors.
Ready for the bonus? It also supports “animations” or what most people call “GIFs.”
The real gift is the data savings it passes on, WebP on average will save you 20-30% for the average image. In some cases way more. Look at this photo of my beautiful daughter and I:
These are unoptimized images, 3840 x 5760 pixels and look exactly alike. The JPEG is 13 MB, the webP is 1MB. These are truly amazing savings. Already in our tests we are seeing entire websites being reduced by 10-20MB without breaking a sweat.
I do admit I am starting to see WebP on a lot of websites, but I would say still very small for the most part. There are still many barriers to entry for many websites.
If you have yourself a WordPress website, converting images to WebP is super easy. There are a number of plugins to make this happen. The better ones will leave the originals and make it so if there is no browser support it will fallback to JPEG/PNG.
A special thanks to Alex from our team for copping these screenshots for this post. Here you can see the WebP conversion plugin doing its job:
Another nifty tool we use that outlines the potential savings from switching from JPEG to WebP and adding some compression.
There is also WebP2 is also in development, but with how fast the web moves with major decisions I doubt we’ll see that in the 20s.
How do I “make” a WebP image?
The easiest way to make webP images is to convert it from a JPEG that you already have. There are loads of different ways to do this including online tools, plugins, and command line tools. I played around with Google’s own WebP conversion tool just for fun, which is not the easiest tool in the world to use but gets the job done especially if you have a large batch job with 1000’s of images to convert.
My personal favorite ways to convert JPEG to WebP is:
- the Optimus image plugin for WordPress by KeyCDN.
- a cloud based tool with web front end (CloudConvert)
- Google’s own command line tool
- Photoshop save as (Photoshop plugin also courtesy of Google.)
Image Optimization with JPEG 2000
I do not know a lot about this image format, other than I see it every time I run a Lighthouse report and see Google recommend using JPEG2000 as a next-gen image format. While it may be a better option than vanilla JPEG, far too many browsers and devices still do not support them, so why bother using them?
In short, don’t bother with JPEG 2000 at all. Google why the hell are you telling us to use this image format when your own web browser doesn’t even support it?!
JPEGXL is worth mentioning as it succeeds JPEG2000, they are pushing hard for it and say it supports “progressive rendering” which none of the other formats do. Again, it isn’t supported by most web browsers by default so it isn’t worth mentioning.
AVIF images are another next gen format. It claims to offer better file sizes than JPEG, PNG and even Google’s own WebP format! Let’s GO! Not quite yet….like JPEG2000 and JPEG XR, it is supported by some browsers, but not all. And if it isn’t supported by all, it may as well be supported by none. So I am skipping over this image format completely.
SVG is short for “scalable vector graphics.” If you aren’t familiar with SVG, I would highly recommend checking out this image format. Just to be clear, SVG is an image format that you will only use with graphics. That is, you will never see a photograph with an SVG format because it is only meant for use with graphics files.
The really cool thing about SVG is whether your image is 5px x 5px or 500 px x 500 px, your file size will be exactly the same.
So why doesn’t Google mention SVG in their “serve images in next gen formats” page? I really don’t know, but they probably should. It does have a much smaller use case than WebP or AVIF but for certain types of websites it could pass on some considerable savings.
How can you use SVG on your website? For starters, look into SVG’ing your company logo, contextual images, and other graphics.
Are these image formats ready for prime time?
I think if your company is really large or has a lot of smart web developers then yes, you are ready. But lets not forget about 1 key factor: smartphones. Smartphones still primarily save images in JPEG format. Moreover, the vast majority of modern day software still leans towards PNG and JPEG. Examples include Adobe Photoshop (which still doesn’t have WebP built in), Microsoft Paint, most screenshot tools, and many more.
I am willing to bet that in 5 years all images will be saved in WebP (or maybe WebP2).I went over a number of different next generation image formats in this post, but WebP is the clear winner. It is easy to integrate, and as of the time of this writing WebP is basically supported by every modern day browser on desktop, tablet and mobile phone. Give it a try and see what you think.