Populate "package.json" with these codes: Lets create two empty text files labeled as "package.json" and "gruntfile.js": Img_dest = optimized image files processed by imagemin will be saved in this folder Img_src = all image files (jpeg, png and gif) stored here will be the source of imagemin Therefore, the shell commands, output, etc. Lets take a look on how to setup and use this plugin to our workflow. Good thing is Grunt has this Imagemin plugin which can also optimize images (jpeg, png and gif). But Grunt is the workflow management I am using. This feature reduces the byte size of of the image and this means faster web page loading. I say we should remove the optimization flag from the convert command.Īdding 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.I have tried to use Prepros and one feature that I like is its image optimization. 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. 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 … So, it looks like imagemagick is able to compress the most, but butchers the images. rw-r-r- 1 sigurdur sigurdur 8832 feb 24 16:43 bananaopt.gif rw-r-r- 1 sigurdur sigurdur 14093 feb 24 16:53 banananoopt.gif rw-r-r- 1 sigurdur sigurdur 13911 feb 24 17:02 bananagifsicleO2.gif rw-r-r- 1 sigurdur sigurdur 73623 banana.gif Please note that you can resize using gifsicle, but gifsicle doesn’t worry about quality as much as imagemagick. 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…įYI, the command used to optimize using gifsicle $ gifsicle -O2 banananoopt.gif -o bananagifsicleO2.gif If I resize it to 60 without optimization then frame 0 isn’t butchered… When I resize it down to 60圆0, it looks like frame 0 has been butchered a bit… Hmm … I did a couple of more tests, using this image as a base … So, having -layers optimize at the end does the optimization without butchering the GIF? ORIGINAL I would have submitted a PR with this fix, but I can’t get this to behave the same way as in my test environment … So, my recommendation is to add the > flag on the thumbnail option. Saved 13 B and the image displays properly rw-r-r- 1 sigurdur sigurdur 928 feb 24 16:03 dodo8.gif 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 60圆0\> -layers optimize dodo8.gif rw-r-r- 1 sigurdur sigurdur 941 feb 24 16:00 dodo7.gif rw-r-r- 1 sigurdur sigurdur 941 feb 24 15:58 dodo6.gif To make sure you’re only downscaling (not upscaling to 60圆0), you can add the > tag to the command … let me show you how: $ convert dodo_anim.gif -coalesce -gravity center -background transparent -thumbnail 60圆0\> dodo7.gif What’s worse is that the emoji is being upscaled to 60圆0, not downscaled or the resolution kept. rw-r- 1 sigurdur sigurdur 995 feb 24 15:48 dodo_anim.gif The price of removing the switch for this image was only 147B $ ll dodo* $ convert dodo_anim.gif -gravity center -background transparent -thumbnail 60圆0 -layers optimize dodo5.gifĪfter looking at the output of each trial, I found that “-layers optimize” causes the transparency to fudge up. $ convert dodo_anim.gif -coalesce -background transparent -thumbnail 60圆0 -layers optimize dodo4.gif $ convert dodo_anim.gif -coalesce -gravity center -thumbnail 60圆0 -layers optimize dodo3.gif $ convert dodo_anim.gif -coalesce -gravity center -background transparent -thumbnail 60圆0 dodo2.gif $ convert dodo_anim.gif -coalesce -gravity center -background transparent -thumbnail 60圆0 -layers optimize dodo1.gif It looks like the flag “-layers optimize” is causing the broken look. I did a little investigating using your code there…
0 Comments
Leave a Reply. |