Make WordPress Core

Opened 3 years ago

Last modified 3 weeks ago

#53645 new enhancement

Convert heic to a web safe image format.

Reported by: spacedmonkey's profile spacedmonkey Owned by:
Milestone: Future Release Priority: normal
Severity: normal Version:
Component: Media Keywords: needs-patch needs-design-feedback
Focuses: Cc:

Description

As of ios 11, Apple start using the HEIF format to save images. Sadly HEIF files can not be viewed in web browsers. For those taking images on their iPhone, this would mean to embed a raw iPhone photo, would require them to use a third party tool to convert that image into a web safe format like jpeg.

WordPress core should convert this image to a web safe format while keeping the original for reference.

Change History (19)

#2 @adamsilverstein
3 years ago

Great suggestion @spacedmonkey!

Questions: What happens when users upload an HEIF image currently? Are there other formats users might try to upload we should think about when building this? Do both GD and Imagick support HEIF?

#3 @spacedmonkey
3 years ago

Seems like Imagick does support handling HEIF but PHP GD does not. There seems to be a PHP library that may help here called Intervention Image. There is a javascript library called Heic2any.

I am not sure if this would have to be an opt in feature or not. Would it be okay if the feature worked only if you use imagemagick.

#4 @adamsilverstein
3 years ago

Looks like support was added to LibGD in v2.3 - https://github.com/libgd/libgd/issues/395.

Support will hopefully make it into the next PHP release via https://github.com/php/php-src/pull/5127 although that may have shifted to AVIF focus.

#5 @spacedmonkey
3 years ago

@adamsilverstein Good find. Seems like it there is support was added in 2.3.2.

Meaning both image libraries do support it. Do we need to wait a while for this library versions to be more popular?

Can we add this as a projective enhancement like webp?

#6 @adamsilverstein
3 years ago

we should be able to treat this as a progressive enhancement. If the server supports HEIC, add the feature. We can start with a POC, I'd like to see if my local setup supports this.

#7 @desrosj
3 years ago

I have to admit that I am pretty hesitant to start converting uploaded images into different formats just because they are not web friendly.

I know that the ability to map mime types is new, but we haven't done this in the past with other formats. It's also perfectly reasonable to expect someone to want the original format of the image to persist.

On one hand, it would be great to upload any image they find and not have to worry about it being usable/visible to their users, but on the other hand there is value in the user being aware of the fact that the image they're uploading is not a widely supported format.

Also, where do we draw the line? TIFF is not supported by Firefox, JPEG 2000 is only supported by Safari. If we start building a list of mime types that we map, there's the potential to create a web that will be a maintenance headache.

To be clear, I think this is a great idea, but I am hesitant to add this to Core as the default without considering the implications of this more broadly.

#8 @spacedmonkey
5 months ago

I know that @swissspidy has been working on this as part of media-experiments. I wonder if he is interested in picking this up.

#9 @swissspidy
5 months ago

Indeed I have.

There are multiple ways to go about this, for example it can be opt-in, opt-out, or opt-in with a confirmation dialog the first time you upload such an image. So there are some UX considerations.

Right now in my project it's on by default (opt-out) but am considering changing it to be more flexible.

Either way, this project still a long way until this is ready for prime time, and that will have to go through Gutenberg anyway.

#10 @markhowellsmead
3 months ago

I like the idea of showing a message or making a choice when uploading an image file of a particular format for the first time, when the format is not usually used for inline display in the browser.

#11 @noisysocks
4 weeks ago

Thinking about a prompt some more, I believe the vast majority of users will not care what a HEIC file is ("I just want my image to appear!") and so we ought to make a JPEG or WEBP copy by default but allow this to be turned off if the user has atypical needs e.g. building a website exclusively for Safari users.

If the server doesn't support HEIC (e.g. if Imagick is disabled or outdated), then we can upload the HEIC and educate the user that it likely won't work well and they should probably convert the image manually. WordPress already does this, but the UX could be improved.

Support for other non web safe formats (TIFF, JPEG2000, etc.) is interesting to think about but, practically speaking, it's HEIC that is prolific and causing endless frustration, so let's focus on just that.

I think better to explore a server-side Imagick/GD solution first since there's complexity and licensing issues with doing the conversion client side.

I'm keen to pick this up for WP 6.7 unless someone wants it more.

Last edited 4 weeks ago by noisysocks (previous) (diff)

#12 follow-up: @swissspidy
4 weeks ago

  • Milestone changed from Awaiting Review to Future Release

Regardless of any work on client-side conversion in GB, adding such support on the server makes total sense. We should really do both. Just beware that server support will be quite limited (probably even more than AVIF support for example).

While I try to push forward the client-side work, I'd be happy to support any server-side efforts.

Performance Lab's Modern Image Formats plugin should be a great starting point for this, as it already does server-side format conversion during upload. The only difference is that it also keeps the original file, but I'm not sure we'd want/need that for HEIC.

#13 in reply to: ↑ 12 @markhowellsmead
4 weeks ago

Performance Lab's Modern Image Formats plugin should be a great starting point for this, as it already does server-side format conversion during upload. The only difference is that it also keeps the original file, but I'm not sure we'd want/need that for HEIC.

I would recommend that all image formats are handled in the same way, otherwise it would get complicated trying to work out if and why some original files are deleted, when others aren't. Some users may want to offer full-resolution downloads of their original images, and (in this example) link to the HEIC file.

#14 @noisysocks
4 weeks ago

  • Keywords needs-design-feedback added

I'd appreciate a designer's opinion on some of the UX details we're discussing.

#15 @Joen
4 weeks ago

Hey, hopefully I can provide some design feedback. What UI pieces are we considering? It seems the gist is: "I want my images to work", and the questions related to that is how WordPress makes that happen. Is it:

  • A modal that appears on upload: "Want to convert this to JPG?"
  • A notice that appears after upload: "We converted this to JPG."
  • Just doing it, without asking.
  • Just doing it, provided you've not opted-out through a Settings > Media checkbox.
  • Only doing it if you've opted-in through as Settings > Media checkbox.
  • Converting automatically, but not doing anything at all. It just becomes a JPG.

In most cases, images are already run through a parser to create thumbnail sizes in jpeg format. Is there anything we can do there, so if users insert a HEIC image and chooses "Full size", it's essentially converted to JPG for display at that time as well?

Tricky questions, but perhaps one path forward is:

  • Allow HEIC uploads, but don't store them. Convert them to JPGs and store the JPG.
  • Show a notice upon successful upload, that it was converted to JPG because HIEC only works in Apple browsers.

Let me know if that was useful.

#16 @swissspidy
3 weeks ago

Aren't these two the same thing?

  • Just doing it, without asking.
  • Converting automatically, but not doing anything at all. It just becomes a JPG.

Interesting suggestion with showing something after upload.

Originally I thought about a one-time modal before upload, and then storing the preference for later. That works well in the editor (where we have a preferences view and can easily display such notices), but not in the old media library.

Also, I feel like a (before-upload) notice works best when we can do the conversion in the browser and not on the server.

So for a server-side solution like here, my vote actually goes to "just do it, don't tell" - do not show any notice. There could be PHP filters for changing that behavior, as I don't think this warrants a checkbox on the settings page though (decisions, not options).

Is there anything we can do there, so if users insert a HEIC image and chooses "Full size", it's essentially converted to JPG for display at that time as well?

Well it would happen even before you choose a size. You drop the file into the browser and on the server we would immediately convert.

#17 @markhowellsmead
3 weeks ago

If there is a site which wants to offer HEIC downloads, then the decision to automatically convert the files to JPG and delete the originals would stop that from being possible.

HIEC only works in Apple browsers

…which is currently 20% of the internet, so that shouldn't be a dismissive statement.

There could be PHP filters for changing that behavior,

That's a reasonable suggestion, but one which would mean that a site owner would need to add a plugin—or have one developed—to allow HEIC on their site, where all* other image formats are allowed.

(* I believe…)

#18 @swissspidy
3 weeks ago

I think it would be helpful to show the status quo first. So here's the current behavior when uploading HEIC images to WordPress:

In the editor:

The image is uploaded but cannot be displayed (unless you are using Safari). No sub-sizes are generated (because the server doesn't support it).

In the media library:

The image is uploaded but cannot be displayed (unless you are using Safari). No sub-sizes are generated (because the server doesn't support it). Additionally, an error message is displayed that reads as follows:

This image cannot be displayed in a web browser. For best results convert it to JPEG before uploading.

If there is a site which wants to offer HEIC downloads

That sounds like an edge case to me, not a majority use case. Plus, we can still store the original anyway so no data is lost.

#19 @peterwilsoncc
3 weeks ago

My inclination is to auto-convert if possible and reject the upload if it's not possible, per Pascal's comment to just do it, don't tell.

The clear intent of a user uploading an image is to display it on the web. If displaying the image fails 80% of the time, then the user's expectations are not being met. My view is that conversion meets WordPress philosophy to design for the majority.

I understand the argument about TIFF and other image formats but it seems like a red-herring as the dominant issue is the uploading of HEIC images.

Note: See TracTickets for help on using tickets.