Emojis from animated gif are shown uglily

emoji

#1

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 ?


(Régis Hanol) #2

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 :arrow_down:


#3

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 ?


(Kane York) #4

Doesn’t look correct to me:


(Sigurður Guðbrandsson) #5

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


#6

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


(Sigurður Guðbrandsson) #7

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 :smile:

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 …


(Régis Hanol) #8

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

I’m already doing it :wink:


(Sigurður Guðbrandsson) #9

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?


#10

I and my rabbits thank you very much for your help :smiley:


(Sam Saffron) #11

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


(Régis Hanol) #12

That’s now done :wink:

https://github.com/discourse/discourse_docker/commit/dfdd027ad9115e7c7a8e07f66c79a71b012acd03

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


(Régis Hanol) #13