WordPress destroys animation in animated GIF when it resizes

[archon810]

When uploading animated GIFs to WordPress and then resizing them, the end result is the resized versions lose all frames and become static. This is a bug and should be fixed to allow animated GIFs to be resized properly.

[SergeyBiryukov]

Related: #22543

[markoheijnen]

If we decide to fix this, then I rather only do this for Imagick and not for GD.
For GD it takes a lot of work to make it work and I don't think it make sense to do so.

Imagick: ​http://www.php.net/manual/en/imagick.coalesceimages.php.

[archon810]

I think that's fair but I also think a warning that resized animated gifs would become static should also be implemented if possible, for those without ImageMagick. Maybe even with a suggestion or a link to the fix (I. E. Installing ImageMagick).

[kirasong]

I'd love to see this fixed.

If someone can come up with a sane way to do it in GD as well, I'd see no problem including it. However, as far as I'm aware, this is currently something that's difficult to do (especially with low memory usage) with GD.

In the meantime, I think it's fine to do it in Imagick, but well-document the differences. This certainly wouldn't be the only improvement that a user gets when using Imagick.

[archon810]

Anyone care to tackle this one?

[markoheijnen]

I will look into this to see how we wan't to do this but you can assume it will not be tackled for GD.

[archon810]

As I use imagick, I (and many others) will be happy with that.

[ericlewis]

Without support for resizing gifs, this sort of featured post thumbnail can't happen: attachment:gif-as-featured-image.mp4​

[gabrielstuff]

Hey there, I made several test using imagemagick in command line and it seems to handle it pretty easily. Currently by passing this limitation by checking the extension and calling manually the

coalesceImages 

instance.

What is the right way to contribute / make things move for that. Looks like GD could not do it natively and need extensive extension such as : ​https://github.com/coldume/imagecraft

Thanks

[here]

Related to ​https://wordpress.org/plugins/animated-gif-resize/

[wcvendors]

Bump? :)

[archon810]

Bump bump.

[kirasong]

Let's look at how feasible this is in 4.5.

[markoheijnen]

​https://github.com/markoheijnen/Improved-image-editor/commit/0937865453b6a0f46403d7c385386a506c469484 was the start of my attempt more then a year ago. It did saw the frames but resizing didn't worked out.

[kirasong]

Rough First Pass. Partially works. This does not check for all necessary functions existing, and doesn't seem to always thumbnail correctly.

[azaozz]

As far as I see pretty much all animated GIFs don't need hard resizing (make smaller image files). They are at the right size already, not like 4000px X 6000px photos from a digital camera. They can be soft-resized by CSS or the tag width/height attributes.

At the same time we can get hard resizing working only in Imagick leaving about 20-30% of the users out.

In these terms best would be to not try to hard resize animated GIFs at all. Just make a thumbnail, keeping the animation if possible (like 28474.diff). We should also exclude animated GIFs from the image editor. Even thinking we can start adding a flag to image meta to easily exclude them when adding srcset, etc.

If we can't create animated thumbnail the users will be able to see that and insert the full-size image, then soft resize it when needed. We can also add something in screen help about that (no matter how few users look there).

[wcvendors]

I would disagree with @azaozz -- If the gif animation is a 5MB file, resizing in CSS still forces a 5MB file to load. The entire issue here is that a CSS resize would still require the full bandwidth, and the point of the resize is to retain the GIF animation *and* resize it to the correct, optimized file size at the same time. azaozz's argument would mean we should just CSS resize jpg/png's too because you can and that's easier, which defeats the purpose entirely.

If the site doesn't have Imagick and leaves out 20-30% of the sites that dont have it enabled/installed, I would suggest replacing the option to resize gif's as grey'd out with a helper text that requires Imagick and they don't have it installed.

Cheers

[azaozz]

Replying to wcvendors:

If the gif animation is a 5MB file...

Yes, any animated GIF can be 5, 50 or even 100MB, it's a really bad format :) What I mean is that all animated GIFs are already at the right size for displaying on a web page, like 600px x 400px, etc. Not like photos from digital cameras or phones that are thousands of pixels. If you really want to resize 600x400px down, you would do a much better job resizing it before uploading.

I'm also a bit skeptical about a core feature that leaves out so many users. It just brings more confusion at the end of the day.

[markoheijnen]

Added a new patch that should fix some if not all issues. I also added a method to check if it's an animation which I also added to GD for reasons azaozz mentioned found at ​http://stackoverflow.com/questions/280658/can-i-detect-animated-gifs-using-php-and-gd.

[markoheijnen]

Forgot to mention that I had to switch getImageIterations() to coalesceImages() to make it work. For the image I used it was returning 0 but coalesceImages() was returning 15

[kirasong]

Per discussion in Slack, since implementation, or even whether this is the correct route forward, doesn't have consensus at this point, punting to future release.

If anyone is interested in tackling this, please feel free to dig in.

[gabrielstuff]

As stated here (https://core.trac.wordpress.org/ticket/28474#comment:9) 22 months ago, I would be happy to help.
I disagree with the idea of letting GIF in there own space. I really think Wordpress should be easy for everybody, even for people who upload 800x600 px GIF instead of 400x300 and who end up with frozen frame. It feels buggy. Every young people around upload gif and I always tend to explain to them to resize before upload but they won't. Even when a simple tool like giphy exists.

I was wondering why not using a library that abstract the use of GD and image magick and that would allow for more advanced image processing.

As for audio, Wordpress uses ​https://github.com/JamesHeinrich/getID3, why not using an abstraction librery such as ​https://github.com/kosinix/grafika/ or an other, to replace ​https://github.com/WordPress/WordPress/blob/0a349c964178343f7668abf065bb86fc114b8332/wp-includes/class-wp-image-editor-imagick.php and ​https://github.com/WordPress/WordPress/blob/dd6da701b286579819cd6aa518aa2d7018efd759/wp-includes/class-wp-image-editor-gd.php

Also if not possible why not just use the same method that @markoheijnen found and we confirmed 22 month ago ? (​http://php.net/manual/fr/imagick.coalesceimages.php) It won't break anything to GD and will bring resized GIF for imagemagick compatible server.

Thanks !

[archon810]

Still no takers for this important ticket? :-/

[gabrielstuff]

I would still be happy to take it :) as mentioned earlier this year.

[SergeyBiryukov]

#41777 was marked as a duplicate.

[archon810]

@markoheijnen Will you be able to find some time to assist @gabrielstuff in fixing this?

[archon810]

:(

[kirasong]

@archon810 @gabrielstuff
Thanks for the comments and feedback! Apologies for the latency in a reply.

First, as a quick note -- You definitely don't need to wait on a ticket owner if you're interested in helping out.
Tickets being assigned to someone does not mean that a ticket isn't open for testing, feedback or patches.

I agree, the ticket is pretty stagnant, so it'd be great to have testing of the existing patch and/or to have alternate patches uploaded with updated or different approaches to the problem. It's not that it's not desired to fix the bug, but that the ticket doesn't have a complete and well-tested solution yet.

I see that you've provided a suggestion that we use an alternate library. Could you please walk through how that would be a better solution for this particular issue?

A solution that doesn't require swapping out/refactoring the image manipulation internals entirely is likely to be able to be merged more quickly, but I'm excited to see any approaches for fixing this bug.

[gabrielstuff]

Hello @mikeschroder, I'm really happy to read you. What is the preferred way to propose a patch?

• Should we first discuss about implementation and then put it in place ?
• Should we develop a plugin, show it to you and then see how it lands in the core ?

Thanks for taking interest into this particular issue.

G

[kirasong]

Replying to gabrielstuff:

Hello @mikeschroder, I'm really happy to read you. What is the preferred way to propose a patch?

<snip>

I'd suggest proposing patches by submitting them to this ticket (there's an attach button at the top of the page).
Then, we can discuss the approach(es), and iterate together.

If it's close to what you're thinking, it'd also be great to have testing (and refresh if necessary) of the existing patch, since it's been a while since it was initially added, to know how how far that is from a solution.

[seedsca]

@mikeschroder wouldn't your 28474.diff patch be good enough here? Seems like the same reasoning as the one for ​abstracting GD from core in 3.5. Just now noticing you wrote that post :)

Namely: "We add support for Imagick by default, giving better image quality to those who have it available on their host."

I'd be happy to freshen it up and test more.

[kirasong]

Replying to seedsca:

@mikeschroder wouldn't your 28474.diff patch be good enough here? <snip>
I'd be happy to freshen it up and test more.

Thanks so much!

Last I remember, that approach *mostly* worked, but with some problem edge cases. Yes, I think gradually introducing support, starting with Imagick would be totally fine. Would certainly be happy to consider a tested/refreshed version.

[archon810]

Seeing how https://core.trac.wordpress.org/ticket/14459#comment:84 is getting some action, I think the time is right to revive this ticket and finally get GIF animations right in WP.

Perhaps @azaozz could chime in with a solution that at least works with ImageMagick like he did in the other ticket, suggest a good path forward, and prioritize?

Thank you.

[archon810]

Bump?

[adamsilverstein]

I came across this ticket when working on support for WebP in #35725.

Although adding proper support for resizing GIF images when uploaded - when the user has Imagick enabled - feels like a worthwhile goal. However, GIF images have some drawbacks - particularly their performance/file size. Best practice suggests we should try replacing uploaded GIFs with videos instead. Reference: ​https://web.dev/replace-gifs-with-videos/

This will result in a much smaller file size, with all the key characteristics of a GIF:

• They play automatically.
• They loop continuously (usually, but it is possible to prevent looping).
• They're silent.

[marsjaninzmarsa]

Same story with APNG, I guess.

[subscriptiongroup]

Worth noting that some image optimisation plugins can bypass this bug.

In our case, we noticed that while Ewww (free) is active and set to convert Gifs to "pixel perfect", the animation is retained on all thumbnails.

I'd imagine many other image optimisation plugins would do the same, but it's really annoying that you have to rely on a plugin and there's no workaround/patch for this.

[danstramer]

I've just experienced this on a client site.
They created a large GIF animation (above 2560px wide) and uploaded it to the media library and found out there was no animation when added to a post.
After doing some digging we found the culprit.
I do think that even if it's not solved programmatically, WP should pop a message to the user when uploading a GIF animation above the threshold size, stating that it will be resized and lose the animation. Give a solution (resize before uploading) or link to an explanation page.

[bigflannel]

Hi All

It's 10 years since this was raised, and regardless of the benefits of video over gif, we should still be able to use animated gif and WordPress should resize without breaking it. If Imagick is installed, it looks relatively simple to maintain the animation.

For example, one can't add a video to a gallery, so the two assets, animated gif and video fulfill different needs.

I really think this should be fixed, if I could fix it I would.

Thanks for any help doing so.

Regards
Mike