Compress a GIF Image to Fit in as Digit Avatar

[saROMan]

Many people must have noticed the New Avatar of Mine ...which is a Curtasy of a Digit Forum Member..who did a Splended Job by Compressing it from 200KB to 10KB

So as he is too shy to Post it as Tutorial so i will do it on Behalf of him

Remeber all the Work is Done by Tarey_g and not Me ..I have made some Minor Changes to make the Tutorial Clear .


so here we Go ..


Take a Gif Image of your liking for eg The 64 frame juggling gif(200 kb)

*img.photobucket.com/albums/v496/cyberpuzzle/holakoavatars4nv.gif


This image as you see, will be impossible to compress this image to a greater extent but still we can do some optimization to reduce its size -

1)

First reduced the color count to 16 colors + resized the image to 80x80 which is the max allowed size of avtar in this forum + removed the similar frames from the gif and reduced frame count to 42 + removed the redundent pixels between image layers( very important and useful for compression, leads to no loss in quality of image and helps in reduction of size of gif greatly )+ Removal of all the useless comment blocks for further reduction in size . all this led to decrease in the size of the image from 200 kb to 34kb only (but it was still not near to the 10kb limit ). note there is a slight loss of image quality as the colors used in image was limited to 16 for the sake of compression

*www.geocities.com/tarey_g/saroman/try1.gif

2)

To reduce the size of the gif further reduce the color count to mere 8 colors,which resulted further loss in quality of image but this time the loss in quality is barely noticable as compared with the 16 color image shown above) . So the 8 color image looked almost same as the 16 color image and the size was reduced to 24.1kb.

*www.geocities.com/tarey_g/saroman/try2.gif

3)

still it was not near the 10 kb limit so to further compress it remove some similar looking frames again ,the frame count was reduced further to 28 . This made the image a bit jerky and there was a little loss in fluency of gif. All this led to the reduction of the size of image to 16.1kb.
Notice the speed of gif has increased because some of the frames were removed. This can be slowed down by increasing the timing of interchange of images this is shown below in step 5.

*www.geocities.com/tarey_g/saroman/try3.gif


4)

Reduce dither value in the image(helped in reducing size and no quality loss was observed as compared to the previeous image) + reduce the size of image further 75X75 (best and the only way left to reduce the size further). result : image size 14.7 kb .

*www.geocities.com/tarey_g/saroman/try4.gif


5)

Previeous step didn't help in reduction of the image size much. So in this step Reduce the dither value + resized image to 70X70 + reduced frame count once again to 18. This reduced the size of image greatly resulting the size image as mere 8.90 Kb

*www.geocities.com/tarey_g/saroman/try6fast.gif


6) But here as u notice the animation in the gif is really going fast ,so to reduce the speed increase the transition timing of the frames in the gif which did the job . the three images below show the normal,slow and slower settings if transition timings in the image(all three images below are of size less than 10 kb)

Fast

*www.geocities.com/tarey_g/saroman/try6fast.gif

Slower

*www.geocities.com/tarey_g/saroman/try6slow.gif

Slowest

*www.geocities.com/tarey_g/saroman/try6slower.gif

and Vollah ...you get a Cool Avatar that Fits in Digit's Avatar Limits


SO Finally we got

*www.geocities.com/tarey_g/saroman/try6slower.gif

out of

*img.photobucket.com/albums/v496/cyberpuzzle/holakoavatars4nv.gif


Here is Another Example

Old

*img.photobucket.com/albums/v496/cyberpuzzle/crows8js.gif

New

*www.geocities.com/tarey_g/saroman/crowavtaar.gif


Njoy!!!!!!!!

 

[rajkumar_personal]

I had been looking forward 2 someone telling me how to do this task properly !
Thanks mate !
Was immensely helpful................
I hope that I could master these tricks soon !

 

[enoonmai]

Good work, saROMan. A really useful thread for the people who want to resize their avatars. I thought I'd make a small contribution from my part. So here's a bit of a tweak for the lazybones out there who want to do this without worrying about anything else.

Recipe:
To create an avatar that looks as good as possible, is an Animated GIF and fits within the limits imposed by the forum rules.

Ingredients:
One overblown Animated GIF that you want to resize
Macromedia Fireworks MX 2004 (I'm sure the Adobe ImageReady CS guys can come up with their own versions)

First, since I just resized an avatar for ycr007, I will be using the same as an example. This is the image that we will be working with.
*img56.exs.cx/img56/2088/garfield9pu9ov1mb.gif

Preparation:
Save the image in a convenient location, say the Desktop. And open Macromedia Fireworks MX 2004. In the main screen that opens, select "Open" and then navigate to this file and select Open. Next, select the image (it will be shown with a blue border around it) and then select File>Export Preview.

As you can see, the image is 100x100 pixels and is 31.63k in size. If your image is not symmetrical, then you can alter it by right clicking the gray space around the image and selecting Modify>Canvas>Canvas Size and then entering a symmetrical value. Time to trim the flab. Select the File option at the top, shown in the diagram below.
*img56.exs.cx/img56/8296/mfx14sv.th.jpg

Change the Height and Width to 80 and 80 and then go back to the Options page. Here, click the "Optimize To Size Wizard" button.
*img56.exs.cx/img56/1379/mfx20js.th.jpg

In the window that opens up, enter the target file size of 10k and then click the OK button.
*img56.exs.cx/img56/4290/mfx35hd.th.jpg

If you want, you can preview the Animated GIF file by clicking the Play button to make sure its all working properly.
*img56.exs.cx/img56/7464/mfx44wy.th.jpg

In the last step, you can see that the file size at the top is 9.78k (well within the 10k limit). Next, make sure the "Remove Unused Colors" option at the left is checked and then finally click the Export button and then save your GIF image.
*img56.exs.cx/img56/2183/mfx59qy.th.jpg

Voila! And the result?
*img221.exs.cx/img221/125/garfield23id.gif

Once again, this is for the person who just wants to "simply" resize his avatar to fit within the limits, not for someone who wants to fiddle with the animation itself or slow/speed up the animation, etc. They are better off following saROMan's advice. Hope this helps someone.

Total Time Spent on Avatar Cooking:
Less than a minute!

 

[saROMan]

thx enoonmai..for the Tute..BTW is it possible to do the same thing with my Original Avatar ie
*img.photobucket.com/albums/v496/cyberpuzzle/holakoavatars4nv.gif

...With out Loss of quality..if it is...can u resize it for me too ..coz i dont have Flash MX..and i really Love this Avatar....

 

[enoonmai]

No, buddy, what you/tarey_g did is right for your avatar. The file size, plus, the number of frames are a bit too much for the simple process I outlined below and the quality will drop too much if I were to just simply try to reduce the file size. Its what I would have done too, chopping off a few layers, reducing the dither values and the color counts, but the result would be approximately nearly the same as tarey_g ended up with. I will work with it tomorrow and see the maximum image quality I can pull out of it, while sticking to the limits, but dont get your hopes up too much. It would be pretty much near to what tarey pulled off.

 

[koolbluez]

enoonmai... this thing u said is a great time&energy saver.. I didn't use fireworks till now.. and now i'm startin 2 use it.. although less effective than photoshop in terms of effects, filters.. it still is good for web designin... especially 4 the reason u gave us...

 

[enoonmai]

Glad to have helped. And Fireworks was never any competition to Photoshop. It just was for ImageReady. And both ImageReady and Fireworks are purely for the web. Macromedia never got into a tiff over professional image editing solutions with Adobe, they just concentrate on web imaging with Fireworks and vector graphics with Freehand. Plus, when it comes to web graphics, Fireworks is more easier to work with and more "intuitive" than ImageReady. Just my opinion, of course!

 

[koolbluez]

yaar enoonmai.. i never said of competetion between psp & fw... I was just pointin out y i liked fw...
psp is the best image editor
I liked fw 4 vector graphics & ease of optimization, as u pointed out.
I'm not goin 2 dump Psp 4 god's sake.
And ur opinion is right

Btw r there more filters 4 fw... ur personal best... please pm me... thnx in advance

 

[roshbinarc]

thanks a lot fro the info....

 

[Aspire]

How do i upload the avatar to TDF?
It shows just the 1st frame.
My avatar is an animated GIF but it shows only the First Frame.

How to upload it in continuos animation?

 

[thewisecrab]

What a bump

 

[Aspire]

What a bump

What does this mean?

 

[Cool G5]

Mega Bump

 

[MetalheadGautham]

So what if its a bump ? Threads like these are evergreen. They are STILL valid 5 years after being posted 8)

 

[Krazzy Warrior]

How do i upload the avatar to TDF?
It shows just the 1st frame.
My avatar is an animated GIF but it shows only the First Frame.

How to upload it in continuos animation?

This is because it exceed the size limit or 80x80

 

[Aspire]

^^
I already got the solution within an hour of the post and updated it soon.
Thanks for getting your post count increased by one.

 

[Krazzy Warrior]

^^ From next time if problem solved, edited your post instantly !

 

[Aspire]

^^
k
Post count of Krazzy(and mine too) increases by 1.