Modern Image Formats: add AVIF output support

[adamsilverstein]

Summary

Add AVIF support for Modern Image Formats plugin.

Fixes #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.

[github-actions]

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 <adamsilverstein@git.wordpress.org>
Co-authored-by: westonruter <westonruter@git.wordpress.org>
Co-authored-by: joemcgill <joemcgill@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[adamsilverstein]

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.

[adamsilverstein]

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?

[phanduynam]

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

[westonruter]

Could more of the logic be factored out into the helper function like this?

[westonruter]

Looks like the formatting here got messed up a bit:

Suggested change

	<label for="perflab_modern_image_format">
	<select name="perflab_modern_image_format" id="perflab_modern_image_format" aria-describedby="perflab_modern_image_format_description">
	<option value="webp"<?php selected( 'webp', $selected ); ?>><?php esc_html_e( 'WebP', 'webp-uploads' ); ?></option>
	<option value="avif"<?php selected( 'avif', $selected ); ?><?php disabled( ! $avif_supported ); ?>><?php esc_html_e( 'AVIF', 'webp-uploads' ); ?></option>
	</select>
	<?php esc_html_e( 'Generate images in this format', 'webp-uploads' ); ?>
	</label>
	<p class="description" id="perflab_modern_image_format_description"><?php esc_html_e( 'Select the format to use when generating new images from uploaded JPEGs.', 'webp-uploads' ); ?></p>
	<?php
	// Alert users if they lack AVIF support using a wp-admin notice.
	if ( ! $avif_supported ) {
	?>
	<br />
	<div class="notice notice-warning is-dismissible inline">
	<p><b><?php esc_html_e( 'AVIF support is not available.', 'webp-uploads' ); ?></b></p>
	<p><?php esc_html_e( 'AVIF support can only be enabled by your hosting provider, so contact them for more information.', 'webp-uploads' ); ?></p>
	</div>
	<?php
	}
	?>
	<select name="perflab_modern_image_format" id="perflab_modern_image_format" aria-describedby="perflab_modern_image_format_description">
	<option value="webp"<?php selected( 'webp', $selected ); ?>><?php esc_html_e( 'WebP', 'webp-uploads' ); ?></option>
	<option value="avif"<?php selected( 'avif', $selected ); ?><?php disabled( ! $avif_supported ); ?>><?php esc_html_e( 'AVIF', 'webp-uploads' ); ?></option>
	</select>
	<label for="perflab_modern_image_format">
	<?php esc_html_e( 'Generate images in this format', 'webp-uploads' ); ?>
	</label>
	<p class="description" id="perflab_modern_image_format_description"><?php esc_html_e( 'Select the format to use when generating new images from uploaded JPEGs.', 'webp-uploads' ); ?></p>
	<?php if ( ! $avif_supported ) : ?>
	<br />
	<div class="notice notice-warning is-dismissible inline">
	<p><b><?php esc_html_e( 'AVIF support is not available.', 'webp-uploads' ); ?></b></p>
	<p><?php esc_html_e( 'AVIF support can only be enabled by your hosting provider, so contact them for more information.', 'webp-uploads' ); ?></p>
	</div>
	<?php endif;