WordPress
Modern Image Formats: add AVIF output support
Summary
Add AVIF support for Modern Image Formats plugin.
Fixes https://github.com/WordPress/performance/issues/1151
Relevant technical choices
- When the server supports AVIF, add a dropdown under settings->media where users can choose between AVIF and WebP as the output format
- Slightly rename the field that enables generating JPEG images alongside the modern output format (so it isn't just about WebP plug JPEG).
- note: I left the option name unchanged for backwards compatibility.
- I removed the CSS class that were hiding part of the settings UI, that felt hacky and made adding the new field more challenging.
Screenshots
Media settings
The new settings fields on media, the new dropdown is only shown if AVIF is supported on the server:
note: the default selection is AVIF when available.
Uploads
- Note: activate twenty-twentyone theme
Output set to AVIF
Output set to WebP
With "Also Output JPEGs" checked
AVIF
WebP
Note: there appears to be a bug when the additional JPEG option is selected. I will double check, I believe this problem is already present in trunk. Looking carefully at the final two images where this setting is enabled, the AVIF/WebP images are only generated in the default (small/medium/medium/large/large and -scaled) variations it looks like custom sizes and maybe the high dpi images are missing in the modern format. I can create a separate issue to investigate this further.
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.
Unlinked Accounts
The following contributors have not linked their GitHub and WordPress.org accounts: @phanduynam.
Contributors, please read how to link your accounts to ensure your work is properly credited in WordPress releases.
If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.
Unlinked contributors: phanduynam.
Co-authored-by: adamsilverstein <[email protected]>
Co-authored-by: westonruter <[email protected]>
Co-authored-by: joemcgill <[email protected]>
To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.
![github-actions[bot] avatar](https://avatars.githubusercontent.com/in/15368?v=4 "Published by a pub.dev verified publisher"){kind=small}
It would be good to add some tests here. I was expecting existing tests to fail, since I changed the default output to AVIF - maybe the test runners don't have AVIF support.
I'm going to work on expanding the tests to cover both WebP and AVIF output.
Still working on tests for AVIF here, I also started working on making the fallback script more flexible so it will work for either AVIF or WebP.
Related: https://github.com/WordPress/performance/issues/469 & https://github.com/WordPress/performance/issues/996
Tests were failing with PHP 8.0 because some environments report AVIF support when in fact they do not support AVIF, see https://github.com/php/php-src/issues/12197. To get tests passing locally, I made the check for AVIF support more robust.
Notice warning users their server lacks AVIF support. Language borrowed from Health Check for AVIF
AVIF disabled in the dropdown due to lack of server support.
While testing the fallback script locally I noticed that if I check the box to output JPEG as well as WebP or AVIF, the output HTML lacks the srcset I expect to see. Unchecking the box, the srcset returns.
Looking at the generated meta data, it seems fine so I am going to dig further. I don't think this is the intended behavior. Maybe @mukeshpanchal27 knows, did this previously work with the full srcset here?
While testing the fallback script locally I noticed that if I check the box to output JPEG as well as WebP or AVIF, the output HTML lacks the
srcsetI expect to see. Unchecking the box, the srcset returns.
I tested this with the current shipping plugin and observed the same issue, so this is unrelated to the changes in this PR. I searched and didn't find an existing issue for this, so I will go ahead and open one.
While testing the fallback script locally I noticed that if I check the box to output JPEG as well as WebP or AVIF, the output HTML lacks the
srcsetI expect to see. Unchecking the box, the srcset returns.I tested this with the current shipping plugin and observed the same issue, so this is unrelated to the changes in this PR. I searched and didn't find an existing issue for this, so I will go ahead and open one.
I created this issue to investigate separately: https://github.com/WordPress/performance/issues/1207
These assertIsArray assertions were removed in #1203 (pending merge) since they are now redundant, so they can be removed here too.
Do the current modifications help convert PNG to Avif/Webp on upload?
@phanduynam - not currently, however you can add this using a simple filter, see this comment for details: https://github.com/WordPress/performance/issues/371#issuecomment-2050294385
Noting that I manually verified the fallback script works as expected (with the caveat that the srcset is not being output correctly when the JPEG generation is enabled.
when the JPEG generation is enabled.
Also: should we skip doing the detection at all is this is disabled since presumably there will be no fallback?
Is the Avif image format version you are using the latest Avif 1.1.0 version?
https://aomediacodec.github.io/av1-avif/ https://aomediacodec.github.io/av1-avif/#change-list
🎉
"At least 1 approving review is required to merge this pull request."
🎉
"At least 1 approving review is required to merge this pull request."
https://github.com/WordPress/performance/pull/1257 should let you approve this one @westonruter
Is the AVIF image file format version being used the latest version 1.1.0 as described below? https://aomediacodec.github.io/av1-avif/