Use avif with webp fallback for all core image styles

Created on 13 May 2025, 4 days ago

Problem/Motivation

AVIF conversion with WEBP fallback Active added an AVIF image effect with configurable fallback.

Core already ships with webp, but we can change this to AVIF with a webp fallback to have smaller image derivatives out of the box.

This should be done for both the standard profile and Umami - can be one MR for all shipped image styles.

I'll open an equivalent issue for Drupal CMS too.

Steps to reproduce

Proposed resolution

Remaining tasks

User interface changes

Introduced terminology

API changes

Data model changes

Release notes snippet

📌 Task
Status

Active

Version

11.0 🔥

Component

image system

Created by

🇬🇧United Kingdom catch

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

  • Issue created by @catch
  • First commit to issue fork.
  • Merge request !12141Use image_convert_avif image style → (Open) created by mstrelan
  • Pipeline finished with Failed
    1 day ago
    Total: 683s
    #498604
  • 🇦🇺Australia mstrelan

    I installed Umami profile on 11.x (WEBP) and then on this branch (AVIF) then ran wget --mirror to warm all the image styles. The results are below. We save around 2.5 MB (40%) using AVIF.

    WEBP:

    $ du -s sites/default/files/styles/
    6704    sites/default/files/styles/
    

    AVIF:

    $ du -s sites/default/files/styles/
    4144    sites/default/files/styles/
    

    Below shows a comparison for each style:

    | Image style             | WEBP | AVIF | Saving   |
    |-------------------------|------|------|----------|
    | large_3_2_2x            | 2180 | 1412 | 35.23%   |
    | large_3_2_768x512       | 952  | 628  | 34.03%   |
    | medium_3_2_2x           | 1548 | 876  | 43.41%   |
    | medium_3_2_600x400      | 616  | 396  | 35.71%   |
    | medium_8_7              | 20   | 16   | 20.00%   |
    | scale_crop_7_3_large    | 208  | 120  | 42.31%   |
    | scale_crop_7_3_medium   | 160  | 96   | 40.00%   |
    | scale_crop_7_3_tiny     | 44   | 28   | 36.36%   |
    | scale_crop_7_3_wide     | 584  | 324  | 44.52%   |
    | square_large            | 220  | 132  | 40.00%   |
    | square_medium           | 124  | 76   | 38.71%   |
    | square_small            | 48   | 40   | 16.67%   |
    

    Considering past discussions on efficiency of decoding AVIF, perhaps we could consider using WEBP by default for image styles with less than 35% saving. Or perhaps any other arbitrary number.

    Also note, the following image styles exist outside of the any profiles subdirectory:

    $ find . -type f -name 'image.style.*.yml' ! -path '*/profiles/*'
    ./core/modules/image/config/install/image.style.wide.yml
    ./core/modules/image/config/install/image.style.medium.yml
    ./core/modules/image/config/install/image.style.thumbnail.yml
    ./core/modules/image/config/install/image.style.large.yml
    ./core/modules/media_library/config/install/image.style.media_library.yml
    ./core/recipes/standard_responsive_images/config/image.style.max_2600x2600.yml
    ./core/recipes/standard_responsive_images/config/image.style.max_650x650.yml
    ./core/recipes/standard_responsive_images/config/image.style.max_325x325.yml
    ./core/recipes/standard_responsive_images/config/image.style.max_1300x1300.yml
    
  • Pipeline finished with Failed
    1 day ago
    Total: 403s
    #498615
  • Pipeline finished with Failed
    1 day ago
    Total: 519s
    #498617
  • Pipeline finished with Failed
    1 day ago
    Total: 586s
    #498634
  • Pipeline finished with Success
    1 day ago
    Total: 407s
    #498643
Production build 0.71.5 2024