Emojis from animated gif are shown uglily

Sano · February 23, 2015, 10:08am

Continuing the discussion from Uploaded emoji images appear to be getting cropped:

I have a nearly similar issue with square aspect ratio animated gifs. They are correctly uploaded, but are shown uglily :

Without the “?v=0” part of the image link, everything is OK.
Tested on Discourse 1.3.0.beta1 and Firefox 35.0.1 / Chrome 40.0.2.

Are animated gifs supported as emoji ?

zogstrip · February 23, 2015, 10:16am

When an emoji is uploaded we downsize it to fit the 60x60 aspect ratio. Maybe ImageMagick is butchering the GIF?

Here are the instructions used for GIFs

github.com

discourse/discourse/blob/master/app/models/optimized_image.rb#L117-L123


      thumbnail.save
    else
      Rails.logger.error("Failed to store optimized image of size #{width}x#{height} from url: #{upload.url}\nTemp image path: #{temp_path}")
    end
  end
end

Sano · February 23, 2015, 10:20am

The gif is correctly uploaded:

It’s only the link used in the posts who mess it. Is there a another traitment on the picture on the show ? What is the “?v=0” on the link ?

riking · February 23, 2015, 11:17pm

Doesn’t look correct to me:

sigurdur · February 23, 2015, 11:29pm

What’s the original gif like?
Share a link plz

Sano · February 24, 2015, 6:25am

I withdraw what I said, it’s not correctly uploaded… The picture was probably resized in background to 60x60. Here is a link to the original gif:
http:// forum.canardpc.com/images/smilies/dodo_anim.gif

sigurdur · February 24, 2015, 4:16pm

I did a little investigating using your code there…
it looks like the flag “-layers optimize” is causing the broken look.

$ convert dodo_anim.gif -coalesce -gravity center -background transparent -thumbnail 60x60 -layers optimize dodo1.gif
$ convert dodo_anim.gif -coalesce -gravity center -background transparent -thumbnail 60x60  dodo2.gif
$ convert dodo_anim.gif -coalesce -gravity center -thumbnail 60x60 -layers optimize dodo3.gif
$ convert dodo_anim.gif -coalesce -background transparent -thumbnail 60x60 -layers optimize dodo4.gif
$ convert dodo_anim.gif -gravity center -background transparent -thumbnail 60x60 -layers optimize dodo5.gif

After looking at the output of each trial, I found that “-layers optimize” causes the transparency to fudge up.
The price of removing the switch for this image was only 147B

$ ll dodo*
-rw-r--r-- 1 sigurdur sigurdur 12437 feb 24 15:50 dodo1.gif
-rw-r--r-- 1 sigurdur sigurdur 12584 feb 24 15:51 dodo2.gif
-rw-r--r-- 1 sigurdur sigurdur 12437 feb 24 15:52 dodo3.gif
-rw-r--r-- 1 sigurdur sigurdur 12437 feb 24 15:52 dodo4.gif
-rw-r--r-- 1 sigurdur sigurdur 12437 feb 24 15:52 dodo5.gif
-rw-r----- 1 sigurdur sigurdur   995 feb 24 15:48 dodo_anim.gif

What’s worse is that the emoji is being upscaled to 60x60, not downscaled or the resolution kept.

To make sure you’re only downscaling (not upscaling to 60x60), you can add the > tag to the command … let me show you how:

$ convert dodo_anim.gif -coalesce -gravity center -background transparent -thumbnail 60x60\> dodo7.gif
$ ll dodo*
-rw-r--r-- 1 sigurdur sigurdur 12437 feb 24 15:50 dodo1.gif
-rw-r--r-- 1 sigurdur sigurdur 12584 feb 24 15:51 dodo2.gif
-rw-r--r-- 1 sigurdur sigurdur 12437 feb 24 15:52 dodo3.gif
-rw-r--r-- 1 sigurdur sigurdur 12437 feb 24 15:52 dodo4.gif
-rw-r--r-- 1 sigurdur sigurdur 12437 feb 24 15:52 dodo5.gif
-rw-r--r-- 1 sigurdur sigurdur   941 feb 24 15:58 dodo6.gif
-rw-r--r-- 1 sigurdur sigurdur   941 feb 24 16:00 dodo7.gif
-rw-r----- 1 sigurdur sigurdur   995 feb 24 15:48 dodo_anim.gif

What about the optimization?
Well, I did a little test on adding the optimization flag to see if the gif would break…

$ convert dodo_anim.gif -coalesce -gravity center -background transparent -thumbnail 60x60\> -layers optimize dodo8.gif
$ ll dodo*
-rw-r--r-- 1 sigurdur sigurdur 12437 feb 24 15:50 dodo1.gif
-rw-r--r-- 1 sigurdur sigurdur 12584 feb 24 15:51 dodo2.gif
-rw-r--r-- 1 sigurdur sigurdur 12437 feb 24 15:52 dodo3.gif
-rw-r--r-- 1 sigurdur sigurdur 12437 feb 24 15:52 dodo4.gif
-rw-r--r-- 1 sigurdur sigurdur 12437 feb 24 15:52 dodo5.gif
-rw-r--r-- 1 sigurdur sigurdur   941 feb 24 15:58 dodo6.gif
-rw-r--r-- 1 sigurdur sigurdur   941 feb 24 16:00 dodo7.gif
-rw-r--r-- 1 sigurdur sigurdur   928 feb 24 16:03 dodo8.gif
-rw-r----- 1 sigurdur sigurdur   995 feb 24 15:48 dodo_anim.gif

Saved 13 B and the image displays properly

So, my recommendation is to add the > flag on the thumbnail option.

I would have submitted a PR with this fix, but I can’t get this to behave the same way as @Sano in my test environment …

zogstrip · February 24, 2015, 4:19pm

So, having -layers optimize at the end does the optimization without butchering the GIF?

I’m already doing it

github.com

discourse/discourse/blob/master/app/models/optimized_image.rb#L113


    sha1: Upload.generate_digest(temp_path),
    extension: extension,
    width: width,
    height: height,
    url: "",
    filesize: File.size(temp_path),
    version: VERSION
  )

  # store the optimized image and update its url
  File.open(temp_path) do |file|
    url = Discourse.store.store_optimized_image(file, thumbnail, nil, secure: upload.secure?)
    if url.present?
      thumbnail.url = url
      thumbnail.save
    else
      Rails.logger.error("Failed to store optimized image of size #{width}x#{height} from url: #{upload.url}\nTemp image path: #{temp_path}")
    end
  end
end

sigurdur · February 24, 2015, 5:25pm

ORIGINAL

Hmm … I did a couple of more tests, using this image as a base …

Resized and optimized

When I resize it down to 60x60, it looks like frame 0 has been butchered a bit…

Here’s frame 0

Resized, not optimized

If I resize it to 60 without optimization then frame 0 isn’t butchered…

Resized, optimized using gifsicle

I figured that there must be a way to have your banana and eat it too … so how about not using imagemagick for optimization, but gifsicle for optimization…

FYI, the command used to optimize using gifsicle

$ gifsicle -O2 banananoopt.gif -o bananagifsicleO2.gif

Please note that you can resize using gifsicle, but gifsicle doesn’t worry about quality as much as imagemagick.

What about the optimization sizes?

Let’s take a look:

$ ll banana*
-rw-r--r-- 1 sigurdur sigurdur 73623 maí  9  2012 banana.gif
-rw-r--r-- 1 sigurdur sigurdur 13911 feb 24 17:02 bananagifsicleO2.gif
-rw-r--r-- 1 sigurdur sigurdur 14093 feb 24 16:53 banananoopt.gif
-rw-r--r-- 1 sigurdur sigurdur  8832 feb 24 16:43 bananaopt.gif

So, it looks like imagemagick is able to compress the most, but butchers the images.

If we resize with imagemagick and optimize with gifsicle then we get an image that looks right and is optimized for size … 36% bigger than the butchered image in this case though …

If we resize with imagemagick and skip the optimization then we get an image that is 37% bigger than the optimized image, but we save some cpu cycles.

Conclusion

I say we should remove the optimization flag from the convert command.
Adding gifsicle will require a modification to the docker and added cpu cycles when a user uploads an image, only for saving 182 Bytes … not worth it IMHO at this moment.

What do you say @zogstrip?

Sano · February 24, 2015, 6:55pm

I and my rabbits thank you very much for your help

sam · February 24, 2015, 10:08pm

I am all for including gifcile in our base image, will do so next time around, if you have such a hilarious home page you deserve to be in our docker image

zogstrip · February 25, 2015, 1:21pm

That’s now done

EDIT: Thanks @sigurdur for all the tests.

I removed the -layers optimize option for GIFs and (with the previous commit) ImageOptim will now use gifsicle to optimize them.

https://github.com/discourse/discourse/commit/d5828d3743ae5701a64db4384b5d2ccfbcc0ed0e

Topic		Replies	Views
Uploaded animated GIFs of 4MB or larger appear very small support	18	11702	August 3, 2020
Animated GIF avatars no longer supported by default announcements	22	5723	March 7, 2024
Gifs embedded in posts paused after locally downloaded support	18	702	March 4, 2021
Optimized / Resized GIFs lose all animation, become still frames feature	3	1892	September 6, 2014
Very large gifs should be shown as previews feature	36	8439	November 5, 2018