The AVIF Mime Type

How to use the AVIF image format in PHP; A1 or AVIF is a new image format that offers better compression than WebP, JPEG and PNG, and that already works in Google Chrome.

418 views

Edited: 2021-03-18 08:35

The content-type (aka. Mime Type) used for AVIF images is image/webp, and the standard file extension is .avif.

AV1, or AVIF, is a new image compression format that generally results in lower file sizes than WebP, JPEG, and PNG; how much lower will depend on the settings used to save or convert your images to AVIF. By using AVIF you may be hit file sizes that are around ~20% lower than WebP, and ~50% lower than JPEG.

A typical header response for a AVIF file may look like this:

HTTP/1.1 200 OK
content-type: image/avif
content-length: 14200

To deliver a image/avif content-type from PHP:

header('content-type: image/avif');
echo $image_data;
exit();

Converting images to avif

Images can not yet be converted to AVIF directly from PHP, but you can still convert images by calling an external command such as the convert command in the ImageMagick suite; to do that you may use the shell_exec function:

shell_exec('convert my-image-file.jpg -quality 50% my-image-file.avif');

Just remember to escape relevant parts of the command:

$path = '/var/www/mysite/images/my-image-file.jpg';
$avif_server_loc = '/var/www/mysite/images/my-image-file.avif';

shell_exec('convert ' . escapeshellcmd($path . ' -quality 50% ' . $avif_server_loc));

Escaping may not be necessary when you check for the existence of the file before trying to convert it, nevertheless, it is still a good practice.

Read: How to test if command exists from PHP

The GD Library does not yet support AVIF files.

Note. You can use Beamtic's file handler class to do this, as it will automatically convert, and redirect .webp images to .jpg. It will even redirect to .avif for clients that supports it.

Test results

To test how much images would be compressed when converted to AVIF, I used the ImageMagick convert command in Linux; this may be executed like so:

convert my-image.jpg -quality 50% my-image.avif

I found that generally AVIF may be around ~20% smaller than WebP, and almost 50% smaller than JPEG.

PNG files

However, when I tried to convert PNG files directly, some of them actually ended up larger when converted to AVIF; the reason for this is unknown. Maybe it is due to the tool that I am using for the conversion.

The reason may be that the result will depend on the size and complexity of the contents of the image. However, if I first converted the file to WebP, and then to PNG, then I was able to reduce the file size by almost 20% in some cases.

Because of the inconsistent results with PNG images, I decided to simply disable automatic conversion of PNG in my file handler class. Besides, some of these files are already highly optimized if you already compressed them with a tool like optipng, pngcrush or advpng.

Files that should not be converted

Files such as PNG, GIF and SVG probably should not be converted since they are somewhat special, depending on the circumstances. Technically .svg is vector based, so you probably rarely want to convert those to a raster format such as .avif.

The problem is that .gif files are animated, and I am not sure how well browsers support animation in .webp or .avif; I simply have not tested that yet.

As mentioned earlier, there also seems to be a problem when converting .png files directly to .avif that causes the file size of the converted file to become larger than the original file.

Both .webp and .avif support alpha transparency, so at least that does not seem to be a problem.

Tell us what you think:

  1. How much faster is C++ than PHP to increment and display a counter in a loop?
  2. How to create a router in PHP that also handles request- methods and parameters.
  3. Detecting the request method used to fetch a web page with PHP, routing, HTTP responses, and more.
  4. How to create a custom error handler for PHP that handles non-fetal errors.
  5. Setting custom HTTP Headers with cURL is useful when changing User Agent or Cookies. Headers can be changed two ways, both using the curl_setopt function.

More in: PHP Tutorials