Make WordPress Core

Opened 10 months ago

Last modified 5 days ago

#61167 assigned task (blessed)

AVIF image thumbnail not created !

Reported by: joomskys's profile joomskys Owned by: adamsilverstein's profile adamsilverstein
Milestone: 6.8 Priority: normal
Severity: normal Version: 6.5
Component: Media Keywords: avif image thumbnail early has-patch
Focuses: performance Cc:

Description

Thank you all the team for this great feature.
i have issue when i try to use AVIF image, can you help?
the issue is:

i have AVIF image file,
i uploaded it to wordpress via Media Upload -> https://prnt.sc/54s8JQoSWgfl
image upload completed -> https://prnt.sc/QZmqQiCD-R63
BUT the image thumbnail size like : thumbnail, medium, large, … NOT CREATED ! -> https://prnt.sc/A54F2cFUsHBH
can you look and help ?
am using siteground web hosting!
Thanks

Attachments (5)

Julie Gold Earrings.avif (8.4 KB) - added by joomskys 10 months ago.
error-uploading-in-media-library.jpg (154.8 KB) - added by adamsilverstein 10 months ago.
server-lacks-avif-support.jpg (224.0 KB) - added by adamsilverstein 10 months ago.
AVIF-upload-test.jpg (1.4 MB) - added by adamsilverstein 10 months ago.
Monosnap Edit Post “test avif” ‹ My... Website — WordPress 2024-05-08 12-46-02.jpg (46.9 KB) - added by adamsilverstein 10 months ago.

Download all attachments as: .zip

Change History (34)

This ticket was mentioned in Slack in #core-performance by spacedmonkey. View the logs.


10 months ago

#2 follow-ups: @adamsilverstein
10 months ago

  • Owner set to adamsilverstein
  • Status changed from new to assigned

Hey @joomskys - thanks for the bug report and sample image.

I gave your image a test on my server that has AVIF support enabled and the srcset entries were created, which means it is likely your server lacks AVIF support.

Can you check to see if your media handling includes AVIF? Look under Tools->Site Health->Info->Media and check which media editor and formats are supported (search for "AVIF").

I tested again on a site that lacks AVIF support and got the behavior you described - I was able to upload the image, but no subsizes were created.

Interestingly, when I tried uploading the AVIF file in the Media library, I got an error message "This image cannot be processed by the web server. Convert it to JPEG or PNG before uploading." and the image refuxed to upload. So this does feel like a bug to me, the behavior should be consistent - the bug is likely on the Gutenberg (rather than core) side though - the editor should reject your AVIF file when you try to upload it on a site that lacks AVIF support.

am using siteground web hosting!

Great, you can ask them about enabling AVIF for your site! It may be available only on certain plans or they may need to hear requests from enough customers wanting it to add support.

Last edited 10 months ago by adamsilverstein (previous) (diff)

#3 @adamsilverstein
10 months ago

the bug is likely on the Gutenberg (rather than core) side though - the editor should reject your AVIF file when you try to upload it on a site that lacks AVIF support.

Correction: looks like we bootstrap the available mime types from the WordPress side. We should be able to address this in core.

This ticket was mentioned in PR #6531 on WordPress/wordpress-develop by @adamsilverstein.


10 months ago
#4

  • Keywords has-patch added

#5 @adamsilverstein
10 months ago

  • Keywords has-patch removed

I created this PR which should disable AVIF uploading on sites where AVIF isn't supported by the server.

Testing in Gutenberg, after this patch I get a warning message on my server that does not support AVIF and I cannot upload the test image.

I expanded the check to include WebP since a small percentage of servers still don't support that format. Checking every format seems excessive.

Last edited 10 months ago by adamsilverstein (previous) (diff)

@adamsilverstein commented on PR #6531:


10 months ago
#6

## Testing instructions

  • Use the WordPress playground build above
  • Try uploading an AVIF image (see the Trac ticket for a sample image)

#7 @adamsilverstein
10 months ago

  • Component changed from Upload to Media
  • Keywords dev-feedback reporter-feedback added

#8 in reply to: ↑ 2 @azaozz
10 months ago

Replying to adamsilverstein:

I got an error message "This image cannot be processed by the web server. Convert it to JPEG or PNG before uploading." and the image refuxed to upload.

Yea this is a bug and needs fixing. Most likely it's a "left over" from the initial implementation of error messages about AVIF files few years ago when they weren't supported in the web browsers.

Looking at https://github.com/WordPress/wordpress-develop/pull/6531: thinking it would be better to show a better error message that explains exactly what's wrong (server not able to work with these images) and tell the users to convert the file before uploading it. Perhaps the same text as in the JS error?

Or maybe implement that error in JS in Gutenberg, and keep the change to allowedMimeTypes in case an unsupported image is uploaded by other means.

Last edited 10 months ago by azaozz (previous) (diff)

#9 in reply to: ↑ 2 @joomskys
10 months ago

Replying to adamsilverstein:

Thank for your watching,
i will contact and request support from my hosting provider!

Best Regard

Last edited 10 months ago by joomskys (previous) (diff)

This ticket was mentioned in Slack in #core-media by antpb. View the logs.


8 months ago

#11 @adamsilverstein
6 months ago

  • Focuses performance added
  • Keywords good-first-bug added; dev-feedback reporter-feedback removed

#12 @adamsilverstein
5 months ago

Looking at https://github.com/WordPress/wordpress-develop/pull/6531: thinking it would be better to show a better error message that explains exactly what's wrong (server not able to work with these images) and tell the users to convert the file before uploading it. Perhaps the same text as in the JS error?

@azaozz in the PR I'm aiming to alter allowedMimeTypes so that it actually reflects the supported types. This means an error will be shown when trying to upload an AVIF image if the server doesn't have AVIF support. Currently, users don't get any error - the image uploads, but no sub-sized images are created (leading to this bug report).

Is your suggestion that we make this change and ALSO update the error message string?

#13 @adamsilverstein
5 months ago

Note we have this related ticket about updating the error message - https://core.trac.wordpress.org/ticket/61361

This ticket was mentioned in PR #7629 on WordPress/wordpress-develop by @adamsilverstein.


4 months ago
#15

  • Keywords has-patch added

#16 @adamsilverstein
4 months ago

  • Keywords early added; has-patch removed
  • Milestone changed from Awaiting Review to 6.8

Or maybe implement that error in JS in Gutenberg, and keep the change to allowedMimeTypes in case an unsupported image is uploaded by other means.

I agree, we can improve the error message in Gutenberg. The important part here is preventing uploads when the mime type isn't supported by the service.

I created a new PR (before I found my old one) - https://github.com/WordPress/wordpress-develop/pull/7629. This new PR now covers HEIC images, so it also fixes https://github.com/WordPress/gutenberg/issues/66293

Marking this for 6.8 early since we are already in RC.

This ticket was mentioned in Slack in #core-performance by joemcgill. View the logs.


2 months ago

#18 @joemcgill
2 months ago

  • Keywords has-patch 2nd-opinion added

@adamsilverstein was just reviewing the updates here and wonder if we need to be concerned about cases where image resizing is being handled by an external service, like Photon. In those cases, do we still want to limit uploads by what the application server is able to edit?

#19 @adamsilverstein
6 weeks ago

@adamsilverstein was just reviewing the updates here and wonder if we need to be concerned about cases where image resizing is being handled by an external service, like Photon. In those cases, do we still want to limit uploads by what the application server is able to edit?

We already limit uploading unsupported filetypes in the media library, the goal here is to match that behavior in the block editor uploader.

I am iterating in the PR, we probably need to add explicit handling for each image type. Services could filter the support checks to override the default behavior.

Last edited 6 weeks ago by adamsilverstein (previous) (diff)

#20 @adamsilverstein
6 weeks ago

I tried excluding only the specific image types we know the server might not support when that is the case in https://github.com/WordPress/wordpress-develop/pull/7629/commits/18f99116a95ae400ad7f04a7974355513da63c93.

Testing this in the editor however reveals it is a pretty poor experience.

First, the upload fails with a cryptic message that is misleading: "Sorry, you are not allowed to upload this file type". In the media library we instead say "The web server cannot generate responsive image sizes for this image. Convert it to JPEG or PNG before uploading.".

Next we are left with a broken state in the editor with the image half uploaded.

To fix this, we can add the data to the settings object about server support for each image type in core, but handle the actual upload experience and rejection of non-supported types in Gutenberg.


#21 @adamsilverstein
5 weeks ago

This is probably best done upstream, then relevant data bits brought to core in a merge.

Posted a fixed in https://github.com/WordPress/gutenberg/pull/68644

#22 follow-up: @flixos90
5 weeks ago

After skimming the discussion here, I'm not entirely sure on what the current state and direction is.

@adamsilverstein Would the Gutenberg PR https://github.com/WordPress/gutenberg/pull/68644 address this ticket so that we would close it once ported over to Core? Or are there other things to address here?

#23 in reply to: ↑ 22 @adamsilverstein
5 weeks ago

Replying to flixos90:

After skimming the discussion here, I'm not entirely sure on what the current state and direction is.

@adamsilverstein Would the Gutenberg PR https://github.com/WordPress/gutenberg/pull/68644 address this ticket so that we would close it once ported over to Core? Or are there other things to address here?

Yes, my expectation is that https://github.com/WordPress/gutenberg/pull/68644 will address this ticket. I decided a more complete solution required changes in Gutenberg so it made sense to do it there then port over the core bits in a merge. I will close this ticket once the Gutenberg work merges.

This ticket was mentioned in Slack in #core by audrasjb. View the logs.


4 weeks ago

#25 @audrasjb
4 weeks ago

  • Type changed from defect (bug) to task (blessed)

As per today's bug scrub, let's change this ticket into a Task as it's only an umbrella ticket for a Gutenberg package update :)

This ticket was mentioned in Slack in #core-performance by adamsilverstein. View the logs.


3 weeks ago

#29 @adamsilverstein
5 days ago

  • Keywords good-first-bug 2nd-opinion removed

https://github.com/WordPress/wordpress-develop/pull/8322 will add an error when an image is uploaded and the mime type is not supported by the server.

https://github.com/WordPress/gutenberg/pull/68788 will improve the display of this error in the Gutenberg.

Note: See TracTickets for help on using tickets.