AVIF image format in ASP.NET Core

AVIF is a new image format that is similar to WebP. It offers better compression and more quality per byte. Big websites like Netflix use it to show images to users.

Currently, AVIF is only supported by some browsers, but that will change in the near future.

Why use the AVIF format?

Using image formats like WebP and AVIF increases the speed of your website, which translates into more satisfied customers. An improved loading time will bring you higher optimization, so your website will get more visitors.

Images are usually the first thing that needs to be improved to speed up the website.

Enable AVIF format in ASP.NET Core

You can use this gulp-avif task to create an AVIF version of your images. You can convert the images at build.

AVIF is supported only by 25% of the web browsers. So you must offer a backup image to the browsers that don’t support it.

CompressedStaticFiles library is a great choice to use new images formats like WebP and AVIF. First, you must create using the gulp plugin the WebP and AVIF versions of an image. You can use the above gulp plugin to convert images or take a look at this gulp file. After, you convert the images the library will take a look at the image size in all three formats and will show the smallest only if it’s supported.

1. Install the NuGet Package:

   Install-Package CompressedStaticFiles -Version 2.0.0

2. Convert the files using the gulp plugin
3. Edit the Startup file to configure the CompressedStaticFilesLibrary

   public void ConfigureServices(IServiceCollection services)
   {
       services.AddCompressedStaticFiles(); // Add this line
   }
   
   public void Configure(IApplicationBuilder app)
   {
       app.UseDefaultFiles();  // add this
       app.UseDeveloperExceptionPage();
       app.UseCompressedStaticFiles(); // add this
   }

   4. Load an image

The CompressedStaticFiles library can also be used if you want to pre-compress the files using Zopfli or Brotli and serve the smaller file. The idea is to pre-compress the file before you publish them instead to compress them at runtime.

You can see an example here. There you also find a gulp file that pre0compress the files and converts the images to the newer formats.