Improve display of HEIC placeholders in post editor

[ironprogrammer]

What problem does this address?

When an HEIC file is uploaded to a server that does not support HEIC -> JPEG conversion, and the browser does not support displaying HEIC (such as Chrome or Firefox), the placeholder for the image could be improved. Additionally, in Chrome, the placeholder is preceded by a "broken image" icon, even if the image was uploaded/embedded successfully.

What is your proposed solution?

The placeholder could be clearer about the image type, and explain that not all browsers will be able to display the image. It may be helpful to provide feedback that the user should consider converting to JPEG locally and re-uploading, as it does for HEIC uploads made directly in the media library.

[AhmarZaidi]

Hey 👋,
I'd like to work in this issue.

[AhmarZaidi]

Created a PR show 'snackbar' error notice on HEIC image upload: #66368
This fixes the error message part, but the "broken image" icon is still there on chrome/chromium.

[adamsilverstein]

WordPress/wordpress-develop#7629 Should resolve this issue by preventing heic uploads when your server doesn't support them.

[ironprogrammer]

@adamsilverstein, because WP allows upload and insertion of this type already (since preventing upload based on server specs is targeted for 6.8), it's possible these images are already or will be in use 😅.

For instance, after reading about 6.7's HEIC support, a user on a non-ImageMagick host may not realize that their images won't render externally except in Safari. A warning when HEIC is used in a post could prompt them to address the issue.

I think the underlying issue here is that the editor does allow inserting an HEIC image, even if this situation will eventually be mitigated for new uploads.

UPDATE: To be honest, I think an updated, informative placeholder should be shown in Safari, too, rather than show the image and give the impression that things are fine.