AVIF is a new image format with ambitions to take over the web. If it has its way, it will displace WebP, JPG, and PNG.
I have a more detailed post on AVIF separately, but the key takeaway is that it uses a more efficient encoding algorithm that results in smaller filesizes for equivalent image quality.1 And smaller file sizes mean a faster web. That means a happier Google and happier users.
But AVIF files are not especially compatible so far. There aren’t many apps or services that even view them, and even fewer that can encode them. So if you’re looking to experiment with AVIF, there are relatively limited options.
Squoosh is a web app that can convert images to other formats. It’s developed by Google Chrome Labs. It’s an open-source project, and it’s entirely free to use.
There are plenty of web apps that can convert images (or just about anything else, for that matter). And this is more of a tinkering/experimenting web app.
The thing that makes Squoosh different is that it’s focusing only on cutting-edge and experimental image formats. Many of these image file formats are not (yet) in widespread use, and they’re often not supported by more mainstream conversion services.
The image formats it currently focuses on are:
- WebP
- AVIF
- JPEG XL
- MozJPEG
- OxiPNG
Single Image Conversion vs Batch Processing
But it’s important to know that Squoosh only processes a single image at a time, so this is not the service you want if you’re converting large numbers of images. Many of the usual suspects for batch conversion, options like XnConvert or convert.io, don’t yet support AVIF. But I like avif.io for this. While it’s not a traditional local app and still runs in a web browser, all of the processing is done on your computer, and no images are uploaded for cloud conversion. There’s no limit on the number of images you can convert. You can convert folders of images, but unfortunately it doesn’t preserve folder structure.
I’ve listed some other options for batch converting JPG to AVIF files here.
How to Use Squoosh
In basic use, Squoosh is very straightforward and intuitive. It’s basically a visual drop panel.
And the thing I like about it–and the thing that makes it different from other command-line conversion options out there–is that it gives you a real-time preview of the results. So, as you’re adjusting the quality setting, for example, it’s re-encoding the image and showing you live what the visual effects are.
And it shows those effects through an intuitive split-screen slider. By default, the original image is at the left, with the converted version at the right. But in a nice touch, you can also change the left screen to a different format. Which is a really neat way to do a direct comparison between, say, WebP and AVIF versions, both encoded from the same original.
Results
For these examples, I’m only using the default settings. For the AVIF conversion, that means a quality setting of 30 and an Effort setting of 4. I’ve found those to give very good results right out of the box.
There’s no point me embedding the images here in a regular way–many users wouldn’t even see the AVIF version because they’re not using a browser that can display AVIF files. For now, at least, the main support for AVIF comes from Chrome, Firefox, and Opera web browsers, and only recent versions of those at that. But Safari, for example, can’t open AVIF files.
But for the sake of comparison, here are the files you can download. To open them on your own computer, you’re still going to need an app that can open AVIF files. Mac’s Preview, for example, can’t. The easiest way to do it is open it in Chrome or Firefox.
These were all generated from the same original JPG. The original JPG is much larger in filesize than I would use on a website, but comparing JPG to AVIF isn’t the purpose here. And for a more realistic comparison of compression, Squoosh includes a “Browser JPEG” option; I’ve included that version here too. And just for fun, I’ve included some of the other image formats alongside.
Things Worth Knowing
Web Services or Install Locally
You can use it as a web service through a regular browser window. The URL is https://squoosh.app/.2
You can also install it locally as a browser app. That is, it installs on your computer and works like a locally installed program, but it’s basically framed within a dedicated browser window.
I’ve found no real difference in whichever option you use. In neither case is your image uploaded to a server–all the processing is done locally on your machine.
In the screenshots here I’m using the locally installed app version, but its settings and controls are identical to the standard web browser version.
Options
Lossless
There is a lossless setting–it’s a checkbox just above the “Advanced Settings” section. I can’t think of any practical situation where that would be useful. The file size is almost certainly going to end up larger than your original JPG–often double or more–which defeats the purpose of using the AVIF compression.
The only situation I can think of off the top of my head where it might be useful is if you’re working with some of AVIF’s extended features, such as image sequences. But that’s not something that’s useful to me in day-to-day use. And in that case, you wouldn’t be converting from a single-frame JPG anyway.
Effort
The effort setting is a bit different from the quality setting. The higher the setting, the more carefully it scans for and applies savings. But it also takes longer to process.
I’ve found that increasing the effort from the default 4 to something higher really isn’t worth it. It can take much longer to process, and the gains are typically minimal–maybe 1K or so here or there if you’re lucky (that obviously depends on the image size you’re working with).
Resize
Reduce Palette
You can control the number of colors used in the palette, with a maximum of 256. This is something that’s most relevant if you’re going from a PNG or GIF image rather than from a JPG photo.
For photos, I leave this off. (Unless there’s something reason you’re trying to create a retro 4-bit image look, I guess.) I’d only use this when converting PNG.
Advanced Settings
These are the other advanced settings you can tweak if you like. I don’t find the need to change them for regular photos. But if you’re inclined to tinker, these are the options available for converting to AVIF.
Alternative Ways to Implement AVIF Now
Although AVIF currently has limited compatibility, it has a lot going for it to help it gain in popularity and use.
If you want to be ahead of the curve and implement it on your website now, there are some options. Below are some of the early adopter services I know about.
In practical terms, there are two essential steps involved: creating the AVIF versions and then serving them only to visitors whose browsers support AVIF.
If you’re using WordPress, the simplest option is probably to use ShortPixel Image Optimizer. Among ShortPixel’s features is generation WebP and/or AVIF versions of your files and then serving them. But that simplicity does come at a cost–literally, in that ShortPixel charges for the service. And the method doesn’t always work well for every server configuration (it can be especially tricky with some NGINX configurations).
If you’re using Cloudflare, another option that is platform-agnostic is to use Cloudflare Workers through the Cloudflare Images feature. You can find more information about that here.
And if you’re the type who likes to get your hands dirty with terminal windows, you can find the encoding/decoding command-line script here or an alternative here. ImageMagick is another command-line option. There’s also an experimental Squoosh command-line utility (Squoosh CLI), which you can find here.
And there’s another good list of AVIF converters here.
Notes:
- AVIF also supports other features that make it useful. For example, it has support for image sequences as well as transparency (JPG doesn’t support transparency; PNG does). But it’s core reason for being is that it encodes more efficiently than JPG or WebP. ↩
- Interestingly, the browser app works with browsers that can’t display AVIF files, such as Safari. I’m not sure what coding trickery is going on under the hood to accomplish that, but it’s possible (or probable) that the actual display version you see in the browser window is a proxy version rather than the actual AVIF version. ↩
