-
-
-
How to export images as AVIF in Adobe Photoshop
(Disclaimer: This tutorial is only intended for Windows users)
AVIF or AV1 is a revolutionary image format that will help designers and developers working with sustainable web design reduce the overall impact images have on the environment. The AVIF image format had its first stable 1.0.0 release in 2019, and since then, it has been growing in popularity. In 2022 we have seen 76.2% support from all the major web browsers, which is a big step in the right direction.
AVIF is terrific because it is a super version of the previous WebP format invented by Google. AVIF supports up to 12-bit images, and it allows you to work with HDR content and even live photos.
Install the plugin
Photo editing software such as Adobe Photoshop has always been a bit behind in supporting newer image formats, and with AVIF, it is no different. To edit and export images in the AVIF/AV1 format, you need to install a plugin into your Adobe Photoshop software. Luckily this is both very easy and quick. So let's get started!
1st step: Download the plugin
The first thing you need to do is to download the plugin. This is done from the inventors' Github page, and here you can find the latest stable version.
Click this link to download the latest stable version.
2nd step: Extract the content
Once you have downloaded the package that fits your Windows version, you need to unzip it to your desktop. Once the zip folder is extracted, you will see 4 to 5 files. The one that we need is the one that says "Adobe Photoshop Plugin" under the type column.
3rd step: Move the file to the Adobe Photoshop Plugins folder
The third and last step is to move the plugin file to your Adobe Photoshop Plugin folder. Depending on the Windows version you are using, it can be located differently, but on my computer, the plugins folder can be found here:
C: Drive -> Prorgram Files -> Adobe -> Adobe Photoshop 2023 -> Plug-ins
Paste the plugin into this folder and close the file explorer window. Now that you have successfully installed the plugin, you can open your Adobe Photoshop and export images to the AVIF format.
How to export images as AVIF
Exporting images in Adobe Photoshop is as easy as it was to install the plugin. First, you open up the image you would like to export in the AVIF/AV1 format. Once you are done editing, you can export the image.
To export the image, you go to File (upper left corner) -> Save as -> Choose AV1 in the type dropdown -> Click save.
After clicking on save, you can choose the quality of your image, the image depth in bits, and other applicable settings. Make sure to go through what each of the settings means since it can ensure a better result.
This was a quick tutorial, and as you see, installing the plugin was both easy and fast. I mentioned in the beginning that 76.2% of the major web browsers support AVIF as an image format. Adding AVIF images to your website would mean some people can't see them since they still aren't supported. But there is a fix for this. In this article: How to use AVIF images with a WebP fallback on your website, I explain how you can use the HTML5 Picture element to use AVIF images on your website with a WebP fallback. This will ensure everyone can see your pictures.
Author
Michael Andersen
Michael Andersen is the author of Sustainable Web Design In 20 Lessons and the founder of Sustainable WWW (World-wide-web), an organization teaching sustainable practices. With a passion for web design and the environment, Michael solves puzzles to make the internet more sustainable.
Michael Andersen
Michael Andersen is the author of Sustainable Web Design In 20 Lessons and the founder of Sustainable WWW (World-wide-web), an organization teaching sustainable practices. With a passion for web design and the environment, Michael solves puzzles to make the internet more sustainable.
