performance When uploading images in AVIF format, they are displayed as JPG.

Bug Description

When uploading images in AVIF format, they are displayed as JPG.

Steps to reproduce

Go to media
Click on upload media
Select any avif file on your computer
See on site front jpg

Jan 30 '25 08:01 bagow

Can you share your Site Health information? This has key information about what image libraries are available in your site.

Jan 30 '25 18:01 westonruter

Hi @westonruter @bagow, If I am correct, I tried to follow the steps mentioned in the issue description and uploaded a avif file and added it on page using image block and on frontend, it shows avif and jpg in srcset, but src being used is avif.

See the below screencast for the reference,

https://github.com/user-attachments/assets/e848a3d8-af3e-415d-a1ce-37e656064607

Also, below is the site health information,

Site Health Information

### wp-core ###

version: 6.7.1
site_language: en_US
user_language: en_US
timezone: +00:00
permalink: undefined
https_status: false
multisite: false
user_registration: 0
blog_public: 0
default_comment_status: open
environment_type: local
user_count: 1
dotorg_communication: true

### wp-paths-sizes ###

wordpress_path: /var/www/html
wordpress_size: 266.44 MB (279386477 bytes)
uploads_path: /var/www/html/wp-content/uploads
uploads_size: 103.37 KB (105850 bytes)
themes_path: /var/www/html/wp-content/themes
themes_size: 44.76 MB (46934953 bytes)
plugins_path: /var/www/html/wp-content/plugins
plugins_size: 9.51 MB (9971946 bytes)
fonts_path: /var/www/html/wp-content/uploads/fonts
fonts_size: directory not found
database_size: 2.08 MB (2179072 bytes)
total_size: 322.89 MB (338578298 bytes)

### wp-dropins (1) ###

object-cache.php: true

### wp-active-theme ###

name: Twenty Twenty-Five (twentytwentyfive)
version: 1.0
author: the WordPress team
author_website: https://wordpress.org
parent_theme: none
theme_features: core-block-patterns, post-thumbnails, responsive-embeds, editor-styles, html5, automatic-feed-links, widgets-block-editor, block-templates, post-formats, editor-style
theme_path: /var/www/html/wp-content/themes/twentytwentyfive
auto_update: Disabled

### wp-themes-inactive (14) ###

Twenty Eleven: version: 4.8, author: the WordPress team, Auto-updates disabled
Twenty Fifteen: version: 3.9, author: the WordPress team, Auto-updates disabled
Twenty Fourteen: version: 4.1, author: the WordPress team, Auto-updates disabled
Twenty Nineteen: version: 3.0, author: the WordPress team, Auto-updates disabled
Twenty Seventeen: version: 3.8, author: the WordPress team, Auto-updates disabled
Twenty Sixteen: version: 3.4, author: the WordPress team, Auto-updates disabled
Twenty Ten: version: 4.3, author: the WordPress team, Auto-updates disabled
Twenty Thirteen: version: 4.3, author: the WordPress team, Auto-updates disabled
Twenty Twelve: version: 4.4, author: the WordPress team, Auto-updates disabled
Twenty Twenty: version: 2.8, author: the WordPress team, Auto-updates disabled
Twenty Twenty-Four: version: 1.3, author: the WordPress team, Auto-updates disabled
Twenty Twenty-One: version: 2.4, author: the WordPress team, Auto-updates disabled
Twenty Twenty-Three: version: 1.6, author: the WordPress team, Auto-updates disabled
Twenty Twenty-Two: version: 1.9, author: the WordPress team, Auto-updates disabled

### wp-plugins-active (10) ###

Embed Optimizer: version: 0.4.1, author: WordPress Performance Team, Auto-updates disabled
Enhanced Responsive Images: version: 1.4.0, author: WordPress Performance Team, Auto-updates disabled
Image Placeholders: version: 1.2.0, author: WordPress Performance Team, Auto-updates disabled
Image Prioritizer: version: 0.3.1, author: WordPress Performance Team, Auto-updates disabled
Modern Image Formats: version: 2.5.0, author: WordPress Performance Team, Auto-updates disabled
Optimization Detective: version: 1.0.0-beta1, author: WordPress Performance Team, Auto-updates disabled
Performance Lab: version: 3.8.0, author: WordPress Performance Team, Auto-updates disabled
Speculative Loading: version: 1.4.0, author: WordPress Performance Team, Auto-updates disabled
Web Worker Offloading: version: 0.2.0, author: WordPress Performance Team, Auto-updates disabled
WordPress Importer: version: 0.8.3, author: wordpressdotorg, Auto-updates disabled

### wp-plugins-inactive (1) ###

Hello Dolly: version: 1.7.2, author: Matt Mullenweg, Auto-updates disabled

### wp-media ###

image_editor: WP_Image_Editor_Imagick
imagick_module_version: 1691
imagemagick_version: ImageMagick 6.9.11-60 Q16 aarch64 2021-01-25 https://imagemagick.org
imagick_version: 3.7.0
file_uploads: 1
post_max_size: 1G
upload_max_filesize: 1G
max_effective_size: 1 GB
max_file_uploads: 20
imagick_limits: 
	imagick::RESOURCETYPE_AREA: 122 MB
	imagick::RESOURCETYPE_DISK: 1073741824
	imagick::RESOURCETYPE_FILE: 786432
	imagick::RESOURCETYPE_MAP: 512 MB
	imagick::RESOURCETYPE_MEMORY: 256 MB
	imagick::RESOURCETYPE_THREAD: 1
	imagick::RESOURCETYPE_TIME: 9.2233720368548E+18
imagemagick_file_formats: 3FR, 3G2, 3GP, AAI, AI, APNG, ART, ARW, AVI, AVIF, AVS, BGR, BGRA, BGRO, BIE, BMP, BMP2, BMP3, BRF, CAL, CALS, CANVAS, CAPTION, CIN, CIP, CLIP, CMYK, CMYKA, CR2, CR3, CRW, CUR, CUT, DATA, DCM, DCR, DCX, DDS, DFONT, DNG, DPX, DXT1, DXT5, EPDF, EPI, EPS, EPS2, EPS3, EPSF, EPSI, EPT, EPT2, EPT3, ERF, FAX, FILE, FITS, FRACTAL, FTP, FTS, G3, G4, GIF, GIF87, GRADIENT, GRAY, GRAYA, GROUP4, H, HALD, HDR, HEIC, HISTOGRAM, HRZ, HTM, HTML, HTTP, HTTPS, ICB, ICO, ICON, IIQ, INFO, INLINE, IPL, ISOBRL, ISOBRL6, J2C, J2K, JBG, JBIG, JNG, JNX, JP2, JPC, JPE, JPEG, JPG, JPM, JPS, JPT, JSON, K25, KDC, LABEL, M2V, M4V, MAC, MAGICK, MAP, MASK, MAT, MATTE, MEF, MIFF, MKV, MNG, MONO, MOV, MP4, MPC, MPG, MRW, MSL, MTV, MVG, NEF, NRW, NULL, ORF, OTB, OTF, PAL, PALM, PAM, PATTERN, PBM, PCD, PCDS, PCL, PCT, PCX, PDB, PDF, PDFA, PEF, PES, PFA, PFB, PFM, PGM, PGX, PICON, PICT, PIX, PJPEG, PLASMA, PNG, PNG00, PNG24, PNG32, PNG48, PNG64, PNG8, PNM, POCKETMOD, PPM, PREVIEW, PS, PS2, PS3, PSB, PSD, PTIF, PWP, RADIAL-GRADIENT, RAF, RAS, RAW, RGB, RGBA, RGBO, RGF, RLA, RLE, RMF, RW2, SCR, SCT, SFW, SGI, SHTML, SIX, SIXEL, SPARSE-COLOR, SR2, SRF, STEGANO, SUN, TEXT, TGA, THUMBNAIL, TIFF, TIFF64, TILE, TIM, TTC, TTF, TXT, UBRL, UBRL6, UIL, UYVY, VDA, VICAR, VID, VIDEO, VIFF, VIPS, VST, WBMP, WEBM, WEBP, WMV, WPG, X, X3F, XBM, XC, XCF, XPM, XPS, XV, XWD, YCbCr, YCbCrA, YUV
gd_version: bundled (2.1.0 compatible)
gd_formats: GIF, JPEG, PNG, WebP, BMP, AVIF
ghostscript_version: 10.00.0

### wp-server ###

server_architecture: Linux 5.15.49-linuxkit aarch64
httpd_software: Apache/2.4.62 (Debian)
php_version: 8.2.27 64bit
php_sapi: apache2handler
max_input_variables: 1000
time_limit: 30
memory_limit: 128M
admin_memory_limit: 256M
max_input_time: -1
upload_max_filesize: 1G
php_post_max_size: 1G
curl_version: 7.88.1 OpenSSL/3.0.15
suhosin: false
imagick_availability: true
pretty_permalinks: true
htaccess_extra_rules: false
current: 2025-02-05T07:34:05+00:00
utc-time: Wednesday, 05-Feb-25 07:34:05 UTC
server-time: 2025-02-05T07:34:04+00:00

### wp-database ###

extension: mysqli
server_version: 11.4.4-MariaDB-ubu2404
client_version: mysqlnd 8.2.27
max_allowed_packet: 16777216
max_connections: 151

### wp-constants ###

WP_HOME: http://localhost:8888
WP_SITEURL: http://localhost:8888
WP_CONTENT_DIR: /var/www/html/wp-content
WP_PLUGIN_DIR: /var/www/html/wp-content/plugins
WP_MEMORY_LIMIT: 40M
WP_MAX_MEMORY_LIMIT: 256M
WP_DEBUG: true
WP_DEBUG_DISPLAY: true
WP_DEBUG_LOG: false
SCRIPT_DEBUG: true
WP_CACHE: false
CONCATENATE_SCRIPTS: undefined
COMPRESS_SCRIPTS: undefined
COMPRESS_CSS: undefined
WP_ENVIRONMENT_TYPE: local
WP_DEVELOPMENT_MODE: plugin
DB_CHARSET: utf8
DB_COLLATE: undefined

### wp-filesystem ###

wordpress: writable
wp-content: writable
uploads: writable
plugins: writable
themes: writable
fonts: not writable

Thank You,

Feb 05 '25 07:02 hbhalodia

cc @adamsilverstein

Feb 05 '25 19:02 westonruter

Hi @hbhalodia -

Can you confirm you are using the modern image formats plugin and have AVIF output enabled? it does seem odd that you are getting jpeg output as your server clearly supports AVIF.

Also, can you try the same test, but will all plugins disabled so we can see how the default behavior of WordPress is?

Feb 06 '25 16:02 adamsilverstein

Hi @adamsilverstein, as shown in site health information here - https://github.com/WordPress/performance/issues/1836#issuecomment-2635940821, Modern Image Formats plugin is activated and has AVIF output enabled. [see below screenshot].

Further, I disabled all the plugin and run the test and found the same, it has a fallback JPG in srcset attribute. [see below screenshot]

Feb 07 '25 08:02 hbhalodia

Hello,

I have a similar problem. On my setup, in the "Upload" directory, the resized images have a "-avif" suffix.

For an original image: myimage.avif

The resized images in the "Upload" directory appear like this: myimage-1024x590-avif.avif
myimage-150x86-avif.avif
etc...

The "-avif" suffix seems to be added by the Modern Image Formats plugin, which does not match the default behavior of WordPress. WordPress looks for an image without the "-avif" suffix and cannot find it.

I assume it then falls back to the JPG version.

In general, adding the "-avif" suffix causes a lot of issues (which I'm trying to work around).

Wouldn't it be simpler if the "Modern Image Formats" plugin didn't add the suffix? This would align with WordPress's default behavior and avoid many workarounds (not necessarily sustainable).

Mar 11 '25 12:03 GeeKanJi

From my testing, the issue appears when uploading a JPG image with the image output format set to AVIF or WebP, and the "Output Fallback Images" option enabled. In some cases, during the generation of image sub-sizes like 300x300, 150x150, etc., the resulting AVIF file is larger than its corresponding JPG file. For example, if demo-image-300x200.jpg is smaller in file size than demo-image-300x200-jpg.avif, the AVIF image gets deleted. As a result, the JPG version is included in the srcset on the frontend for that specific breakpoint, since the AVIF version is missing.

You can test this behavior using the sample image provided. For this image, the generated AVIF files for sub-sizes 150x150, 300x300, and 768x768 are larger than their corresponding JPG files when using the GD image editor. However, when using the Imagick editor, only the 150x150 and 300x300 AVIF versions are larger than their JPG counterparts.

Sample Image:

GD Image Editor:

Imagick Image Editor:

@bagow If you want to always use AVIF images in the frontend, regardless of their size, you can use the webp_uploads_discard_larger_generated_images filter. Returning false from this filter will prevent the AVIF files from being deleted even if they are larger than the JPG versions, ensuring that only AVIF images appear in the srcset.

Sample snippet:

add_filter( 'webp_uploads_discard_larger_generated_images', '__return_false' );

@adamsilverstein From my perspective, I think the current behavior is correct. If we were to exclude the JPG fallback from the srcset when the corresponding AVIF was discarded (due to being larger), the browser would fall back to a larger AVIF image instead of one properly sized for the viewport. For example:

Current srcset (with fallback JPG included):

...-1024x683-jpg.avif 1024w, ...-300x200.jpg 300w, ...-768x512-jpg.avif 768w, ...-jpg.avif 1200w

If the 300w JPG is removed:

...-1024x683-jpg.avif 1024w, ...-768x512-jpg.avif 768w, ...-jpg.avif 1200w

In that case, on a small viewport expecting a 300w image, the browser may load a much larger AVIF (e.g., 768w or 1024w), which defeats the purpose of using optimized AVIF images for bandwidth and performance. Including the JPG fallback ensures proper image selection based on screen size when the AVIF is unavailable for a specific size.

May 08 '25 10:05 b1ink0

@b1ink0 - thanks for the detailed analysis here. That does seem right - by default the plugin will only use a specified output format if the resulting image is smaller than the original image type output would be. This would explain the reported issue.

@bagow do you see this issue with ALL AVIF uploads, or only certain ones?

Jul 19 '25 19:07 adamsilverstein

My expectation here is that wordpress would generate all the srcset images as avif. in my instance here I am using a transparent image, which once other srcset images are loaded is no longer transparent.

Aug 07 '25 21:08 pierrerocket

@pierrerocket - core will generate all AVIF images, but in the plugin we decided to only keep AVIF images that are smaller then their JPEG same-dimension counterparts. You can use the filter mentioned in https://github.com/WordPress/performance/issues/1836#issuecomment-2862515478 to change this behavior.

Aug 31 '25 23:08 adamsilverstein