Greg Benz Photography

Exporting AVIF files from Photoshop

Adobe Camera RAW (ACR v15.1) just added support for a new file format: AVIF. In this tutorial, you’ll learn what AVIF is, why it is significantly better than JPG, why you should consider using it now, and how you can easily take advantage of it with Web Sharp Pro.

What is AVIF and when should you use it?

The AVIF format (aka “AV1 Image File Format”) is an open standard developed by the Alliance for Open Media (Apple, Facebook, Google, Microsoft, Netflix, etc). It offers substantial benefits over JPG, including:

• Vastly smaller file sizes than JPG, PNG, and webP at the same quality. You will typically see an image shrink by 20-25% when saved as AVIF, and you can often do much better. I’ve seen several images become 85% smaller. The results are about 10% smaller than webP as well. These are substantial gains that will translate into websites loading faster, reduced bandwidth costs, faster uploads, smaller email inboxes, etc.
• Support for HDR (“High Dynamic Range”). Monitors which support this new standard offer vastly improved image quality. There is no suitable alternative to AVIF for sharing HDR images on the web, so this is definitely a format you’ll see more often as HDR adoption accelerates.
• Higher bit-depth encoding (up to 12-bit for AVIF vs 8 for JPG). This can help avoid banding in smooth gradients like blue skies.
• Transparency. This makes AVIF an ideal replacement for PNG, as the files are much smaller.
• Lossless encoding. These files are of course not nearly as small when encoded this way, but this offers a great alternative to sending TIF when quality really matters. I expect this will be a great way to send images to print labs in the future.
• Support for animation (AVIF is based on a video format). This offers vastly better quality than an animated GIF.

AVIF was only finalized in 2019 but already has widespread support in Chrome, Safari, MacOS, multiple browsers for iOS / Android, etc. However, support for AVIF does not imply support for HDR versions of AVIF images. At this point Chrome, Brave, and Opera support HDR, but we’re waiting for other browsers to catch up. HDR is going to be significant and AVIF is clearly the format which we’ll be using for it (especially now that Google removed support from the competing JPEG XL format from Chrome development). The only real benefit of JPG at this point is a wider range of browsers and apps which support it, and that difference is shrinking steadily.

 

When should you choose AVIF?

• You should use AVIF for exporting all your HDR (32-bit) image.
  • This is the only realistic option for sharing HDR images on the web and a key reason to start using AVIF now.
  • If you’re concerned about how HDR images will render on some browsers or screens, you can set your page to load SDR or HDR versions of your image (or create separate pages). I have an example HDR gallery which automatically detects whether your screen supports HDR or not and then loads the HDR or SDR version of the image as appropriate. See my free e-book for more information on CSS and JavaScript methods to help facilitate this.
• In the future, AVIF will be a better choice than JPG for the rest of your images. But you probably should not use it to replace regular JPGs  (yet). While 80% of browsers already support AVIF, you still don’t want 20% of visitors to be unable to see your image.
  • I would expect that by mid to late 2023, we’ll be at a point where browser adoption is high enough to start switching all images over to AVIF.
  • You can use it reliably now to upload to many social media sites. If it uploads, you’re fine (as the image will be converted to JPG as needed).
  • You can use AVIF in controlled situations such as putting them on your iPad for display or emailing friends you know can view AVIF.
  • The missing 20% are a combination of the MS Edge browser and people who haven’t kept their browser current. You could simply add “alt” tags whenever you feel comfortable that adoption is high enough. See the “can I use” page for latest adoption numbers (hover over the various blocks to see share of total browsing).
  • If you’re a web developer, you can use the HTML <picture> tag to specify an AVIF as your preferred file and fall back to JPG (to ensure everyone sees the image). Of course you’ll need to do a bit more work (including exporting two copies of each image), but this would enable much faster page loads for 80% of your viewers (and possibly better search ranking).
  • Note that WordPress does not support AVIF in its media library, but you can add images to your server and link to them by URL in your WordPress posts. Support in WordPress is inevitable, but I’m not aware of any specific plans to add support (and support is likely to require PHP v8.1 on your server as it adds support for processing AVIF to create derivative images such as thumbnails, etc).

 

How does AVIF quality compare with JPG?

AVIF is better, hands down. You can export as a lossless 12-bit image, which means it will be effectively identical to a flattened TIF. In contrast, a JPG will always use a lossy compression and 8-bit encoding, which creates artifacts and risk of banding. Of course, you’ll mostly use a form of lossy compression and probably 8 or 10-bit encoding to get smaller AVIF files. So you can always get a better result with AVIF, and most of the time you’re going to get both better quality and smaller files at the same time.

There are some differences in the details, which matter if you use aggressive compression or plan to zoom into the details of the image. I’ve generally found:

• AVIF tends to show much more subtle artifacts. Depending on how you gauge quality, you can really push the compression.
• The higher bit depth of AVIF not only helps avoid banding, but also eliminates the need to add dithering (noise) to hide banding, which helps reduce file size.
• I see less color noise with AVIF.
• The first place I notice loss of detail with AVIF is in subtle fine texture. Things line the lines between marble blocks in a building may go missing. You can hardly tell the difference at 100%.
• Occasionally (such as around a star on a clear blue night sky) you’ll see a block of noisy artifact. It’s less common than what I’ve seen with JPG, but a good reminder than you should test a variety of subjects and images before you push compression to the most aggressive levels.

 

How to convert an image to AVIF with Web Sharp Pro

Web Sharp Pro v4 added support for Windows users to export any image directly from Photoshop (PS) as an AVIF**. This includes source images with HDR content, layers, or transparency. Simply go to Settings / General / Format to select AVIF and use the panel like normal. That’s all there is to it. If you have not installed the required 3rd-party plugin, you will see a prompt during export with guidance to download and install that plugin.

There is also an option in Web Sharp Pro to recompress existing files (such as a folder full of JPGs) to AVIF to quickly reduce the size of hundreds or thousands of images on your website or computer. Go to the flyout menu at the top-right of the panel and choose “Recompress images to AVIF”.**

Note that exporting directly via Web Sharp Pro offers a few advantages. It offers 12-bit encoding (at ultimate quality), improved quality for fine color details, and supports transparency.

** AVIF support in Web Sharp Pro is facilitated by use of a free 3rd-party file format plugin which is only available for Windows. As a result, Web Sharp Pro does not offer an AVIF export option for MacOS (and I am unaware of any development to add MacOS support). However, you can still use Web Sharp Pro to facilitate exports using the ACR method described below.

 

How to convert an image to AVIF with Adobe Camera RAW (ACR v15.1+)

If you are using MacOS, you should use ACR v15.1 to export your images as AVIF. This offers support for HDR content. However, you will need to create a flattened copy of your source image and transparency is not supported.

You need to set a couple PS preferences to use this workflow:

• You need to enable AVIF support, which is part of the HDRO tech preview. Go to PS Prefs / File Handling / Camera RAW Preferences / Tech Previews, check “HDR output” and restart PS.
• You also need to ensure that ACR is used to open your image, as the file export options in ACR are only offered when opening the image.  PS Prefs / File Handling / Camera RAW Preferences / File Handling and set the TIFF dropdown to “automatically open all supported TIFFs“. You do not need to restart PS after making this change (which may be handy if you wish to toggle back and forth to avoid seeing the ACR dialog when opening some images).

Once you’ve enabled those settings, you can then export either using Web Sharp Pro to facilitate the process or export manually. The key is to generate a single-layer TIF file (which ACR can open for export and which also supports HDR). You cannot open a layered file or one using a Smart Object directly into ACR, so this flattened TIF is a requirement. This TIF is only intended as a temporary file, which you can delete after you’ve converted it to AVIF.

To export using ACR:

1. Export a flattened TIF
   • If exporting manually: Go to File / Save a Copy, select TIF and make sure “layers” is not checked.
   • If exporting via Web Sharp Pro: Go to Settings / General / Format to select TIF as your export format and export with the panel as you normally would.
2. Open your temporary TIF or TIFs (you may shift-click to select and open multiple images at once for bulk conversion).
   • If you’ve set the preferences as required above, your image should open directly into the ACR dialog.
   • If you exported manually, review every image which should be HDR to ensure that the HDR button is active in ACR. If you are using Web Sharp Pro, the image will always open correctly and you do not need to do this review.
3. If converting multiple images, shift-click them in the filmstrip so that all are selected.
4. Click the “convert and save” button. This is an icon with an arrow pointing down, and will be located near the top right by the gear (settings) icon.
   • ==> If you do not see this button, it is because you did not open the image directly and immediately into ACR (you cannot save when invoking ACR later in the edit), it wasn’t a single-layer file (no Smart Object), or one of the above preferences was not set correctly.
5. Choose export settings:
   • Setting the destination dropdown to “save in same location” is very convenient, or you can choose a new location.
   • Set the file format dropdown to AVIF. Set the quality between 7 and 11. A safe general choice is around 8 for a good balance of size and quality.
   • Make sure “enable HDR display” is checked if exporting an HDR image. I recommend setting the space to “HDR Rec 2020”.
   • You may may leave metadata set as you like (you can choose “all” and control the metadata through Web Sharp Pro).
   • If exporting via Web Sharp Pro, do not use image sizing or sharpening as Web Sharp Pro does this for you and offers optimized results.
6. You may delete your temporary TIF file(s) now.

Note that using Web Sharp Pro dramatically simplifies step #1 (along with offering options for watermarks, borders, cropping to social media templates, etc), helps avoid the risk of HDR images becoming SDR in step #2, and simplifies step #5 (as you won’t have to make changes in the ACR dialog after your first export).

Troubleshooting:

• If the image does not open directly in ACR, make sure you have set both preferences above and that you are trying to open a TIF which has a single layer (and that layer cannot be a Smart Object).
• If you do not see the icon to convert and save in ACR, make sure you are opening the image directly into ACR. You will not see this option for any image or layer which was already open in PS.
• To confirm your exported image, you may open an AVIF with Photoshop and it will show in the ACR dialog. Or you may open it with the Chrome web browser, which properly supports HDR (just drag and drop it into Chrome).

Note that there are numerous 3rd-party tools and websites available which also offer AVIF conversion, but almost none of them support HDR (ie they will produce an image which is clipped to the SDR or “standard dynamic range”). So it is important to use a tool which provides proper support for HDR AVIF exports. The above workflows are the only ones I have tested successfully, other than using some very complicated command line tools. In time, we should expect to see many more simple options become available.

ACR 15 adds High Dynamic Range Output

Adobe Camera RAW (ACR) v15 just added one of the most exciting features since the creation of RAW processing itself: High Dynamic Range Output (“HDR” or “HDRO”). This name might be confusing because we’ve used the term “HDR” for years, but now that same name is being used for a completely different display technology. This involves hardware, it requires a monitor capable of a minimum brightness of at least 400 nits. And when you see it, it is nothing short of spectacular. It’s the most significant improvement in image display I’ve seen in decades.

HDR editing and display results in:

• Vastly greater dynamic range. Pixels are up to 4 stops brighter than anything before.
• Glowing city lights.
• Boosted brightness without losing saturation for gorgeous sunrises and sunsets.
• Intricate details in the highlights for white clouds and flowing rivers.

See the video below for details on how to enable and use HDR in ACR 15.

Note: I’ve created a comprehensive set of resources at gregbenzphotography.com/hdr (including sample images, HDR screen tests, a free e-book, and much more).