Problem/Motivation

#3510582: AVIF conversion with WEBP fallback 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

Issue fork drupal-3524206

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

catch created an issue. See original summary.

mstrelan made their first commit to this issue’s fork.

mstrelan opened merge request !12141

mstrelan’s picture

mstrelan commented
Status: Active » Needs review

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
smustgrave’s picture

smustgrave commented
Status: Needs review » Reviewed & tested by the community
Issue tags: +Needs Review Queue Initiative

Pretty simple, just did a search for id: image_convert and 34 instances in core, all got updated here.

  • catch committed 572c03af on 11.2.x 
    Issue #3524206 by mstrelan, catch, smustgrave: Use avif with webp...

  • catch committed ae796c66 on 11.x 
    Issue #3524206 by mstrelan, catch, smustgrave: Use avif with webp...

catch closed merge request !12141

catch’s picture

catch
he/him
Primary language English
commented
Status: Reviewed & tested by the community » Fixed

Committed/pushed to 11.x and cherry-picked to 11.2.x, thanks!

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.