Update documentation for AVIF support

Co-Authored-By: Aman Pandey <74553951+salty-ivy@users.noreply.github.com>

docs/advanced_topics/images/image_file_formats.md

@@ -12,6 +12,9 @@ image formats and let the browser choose the one it prefers. For example:
 {% load wagtailimages_tags %}
 
 <picture>
+    {% image myimage width-1000 format-avif as image_avif %}
+    <source srcset="{{ image_avif.url }}" type="image/avif">
+
     {% image myimage width-1000 format-webp as image_webp %}
     <source srcset="{{ image_webp.url }}" type="image/webp">
 
@@ -24,7 +27,7 @@ image formats and let the browser choose the one it prefers. For example:
 
 ### Customising output formats
 
-By default all `bmp` and `webp` images are converted to the `png` format
+By default, all `avif`, `bmp` and `webp` images are converted to the `png` format
 when no image output format is given.
 
 The default conversion mapping can be changed by setting the
@@ -35,10 +38,11 @@ For example:
 
 ```python
     WAGTAILIMAGES_FORMAT_CONVERSIONS = {
+        'avif': 'avif',
         'bmp': 'jpeg',
         'webp': 'webp',
     }
 ```
 
-will convert `bmp` images to `jpeg` and disable the default `webp`
+will convert `bmp` images to `jpeg` and disable the default `avif` and `webp`
 to `png` conversion.

docs/reference/settings.md

@@ -359,7 +359,7 @@ WAGTAILIMAGES_EXTENSIONS = ['png', 'jpg']
 ```
 
 A list of allowed image extensions that will be validated during image uploading.
-If this isn't supplied, all of GIF, JPG, JPEG, PNG, WEBP are allowed.
+If this isn't supplied, all of AVIF, GIF, JPG, JPEG, PNG, WEBP are allowed.
 Warning: this doesn't always ensure that the uploaded file is valid as files can
 be renamed to have an extension no matter what data they contain.
 

docs/topics/images.md

@@ -326,6 +326,7 @@ Wagtail may automatically change the format of some images when they are resized
 
 -   PNG and JPEG images don't change the format
 -   GIF images without animation are converted to PNGs
+-   AVIF images are converted to PNGs
 -   BMP images are converted to PNGs
 -   WebP images are converted to PNGs
 
@@ -340,11 +341,12 @@ For example, to make the tag always convert the image to a JPEG, use `format-jpe
 
 You may also use `format-png` or `format-gif`.
 
-### Lossless WebP
+### Lossless AVIF and WebP
 
-You can encode the image into lossless WebP format by using the `format-webp-lossless` filter:
+You can encode the image into lossless AVIF or WebP format by using `format-avif-lossless` or `format-webp-lossless` filter respectively:
 
 ```html+django
+{% image page.photo width-400 format-avif-lossless %}
 {% image page.photo width-400 format-webp-lossless %}
 ```
 
@@ -369,17 +371,18 @@ representing the colour you would like to use:
 
 ## Image quality
 
-Wagtail's JPEG and WebP image quality settings default to 85 (which is quite high).
+Wagtail's JPEG and WebP image quality settings default to 85 (which is quite high). AVIF defaults to 80.
 This can be changed either globally or on a per-tag basis.
 
 ### Changing globally
 
-Use the `WAGTAILIMAGES_JPEG_QUALITY` and `WAGTAILIMAGES_WEBP_QUALITY` settings to change the global defaults of JPEG and WebP quality:
+Use the `WAGTAILIMAGES_AVIF_QUALITY`, `WAGTAILIMAGES_JPEG_QUALITY` and `WAGTAILIMAGES_WEBP_QUALITY` settings to change the global defaults of AVIF, JPEG and WebP quality:
 
 ```python
 # settings.py
 
 # Make low-quality but small images
+WAGTAILIMAGES_AVIF_QUALITY = 50
 WAGTAILIMAGES_JPEG_QUALITY = 40
 WAGTAILIMAGES_WEBP_QUALITY = 45
 ```
@@ -402,16 +405,18 @@ You can read more about this command from [](wagtail_update_image_renditions)
 
 ### Changing per-tag
 
-It's also possible to have different JPEG and WebP qualities on individual tags by using `jpegquality` and `webpquality` filters. This will always override the default setting:
+It's also possible to have different AVIF, JPEG and WebP qualities on individual tags by using `avifquality`, `jpegquality` and `webpquality` filters. This will always override the default setting:
 
 ```html+django
+{% image page.photo_avif width-400 avifquality-40 %}
 {% image page.photo_jpeg width-400 jpegquality-40 %}
 {% image page.photo_webp width-400 webpquality-50 %}
 ```
 
-Note that this will have no effect on PNG or GIF files. If you want all images to be low quality, you can use this filter with `format-jpeg` or `format-webp` (which forces all images to output in JPEG or WebP format):
+Note that this will have no effect on PNG or GIF files. If you want all images to be low quality, you can use this filter with `format-avif`, `format-jpeg` or `format-webp` (which forces all images to output in AVIF, JPEG or WebP format):
 
 ```html+Django
+{% image page.photo width-400 format-avif avifquality-40 %}
 {% image page.photo width-400 format-jpeg jpegquality-40 %}
 {% image page.photo width-400 format-webp webpquality-50 %}
 ```