Gif compression

[Teensweb]

I have a logo for my website
http://www.teensweb.co.cc/Images/logo.gif
It's quite a nice one but the file size is way too big - 2.33 MB!!
Is there someway to reduce/compress it without affecting quality?
Any help is greatly appreciated!

 

[diabolo]

the only way to compress a gif (that i know of) is to reduce the colors, but that would result in loss of depth

 

[vol7ron]

Convert it to a PNG

Edit:
Ew it's animated. While you could use APNG, I don't think your IE users would be able to see the animation.

You'll need to use flash instead.

 

[CJ023]

I use IE and the animation showed just fine. I really like some of the effects, but something in the back of my head says that it's just too much. Overall, pretty cool banner logo in my opinion, I don't even know how to do some of the things you have done here.

 

[xPlozion]

the animation showed fine because it's a gif image. as others have said, using flash would be your best bet for what you want done. you have over 130 frames in your 1022x186 logo, which adds up pretty fast.

 

[Trixter]

yep Flash would be the way to go.

 

[zen-r]

I love the design. What software was used to make it, Photoshop & Fireworks?

With regard to Flash, yes, that would probably be your best bet. But it does have problems of it's own - a few people may not have it, or the right version of Flash installed in their browser, & many other people don't allow Flash to run for security or other reasons. They wouldn't be able to see your logo, & so you would still need an alternative design in gif or jpg for them.

As said by others, you should be able to get your current file size down by; using a small colour palette (256 max) & by limiting dithering (& interlacing) & compressing your GIF images via lossy compression. However this will have only a small effect over what has already been achieved. Probably the biggest thing you can do now to reduce file size is reduce the number of frames used. Glow & fading effects etc all tend to use lots of frames. Try to reduce the number of stages/frames used for each effect (though this will make the animation look more jerky). Also shorten the overall sequence before it repeats, by taking out some of the least noticeable effects.

This may be a shame because it may make the design less appealing, but it is really important to get the size down if you want the image to load before visitors (especially those on dial up) get bored of waiting & go elsewhere. Most banners on websites aim at being no more than about 12k!
.

 

[Teensweb]

I love the design. What software was used to make it, Photoshop & Fireworks?

With regard to Flash, yes, that would probably be your best bet. But it does have problems of it's own - a few people may not have it, or the right version of Flash installed in their browser, & many other people don't allow Flash to run for security or other reasons. They wouldn't be able to see your logo, & so you would still need an alternative design in gif or jpg for them.

As said by others, you should be able to get your current file size down by; using a small colour palette (256 max) & by limiting dithering (& interlacing) & compressing your GIF images via lossy compression. However this will have only a small effect over what has already been achieved. Probably the biggest thing you can do now to reduce file size is reduce the number of frames used. Glow & fading effects etc all tend to use lots of frames. Try to reduce the number of stages/frames used for each effect (though this will make the animation look more jerky). Also shorten the overall sequence before it repeats, by taking out some of the least noticeable effects.

This may be a shame because it may make the design less appealing, but it is really important to get the size down if you want the image to load before visitors (especially those on dial up) get bored of waiting & go elsewhere. Most banners on websites aim at being no more than about 12k!
.

I used Photoshop Cs3!
While I must confess it's a very good work (probably ma best- I 'm only 15 years old and haven't took any courses on photoshop either; so it's a great work according to me.But I did browse through tutorials though!)
I am well aware that it will slow down the site and I rely totally on browser cache(u see-once it's loaded completely, most browsers - though not all - keep a cache and will load it fast the next tim)e. And that was ma only hope.But 'm now very desperate to scale down the size (imagine every visitor having to load 2.3 mb to see the site's banner)
Now 'm considering to convert it into .swf, but will it reduce the size without affecting it's quality much? I dont care if users have flash player or not. Anyway those without a gen-next browser and flash player are not worth a piece for the site!

 

[zen-r]

....I dont care if users have flash player or not. Anyway those without a gen-next browser and flash player are not worth a piece for the site!

I know what you mean! But it can be an unprofessional attitude when we start putting things in our website which may exclude many visitors, simply because we want to show off our latest skills. We always need to make our sites accessible for as many people as possible (especially when the sites are small, & can't afford to lose the few visitors they may get).

...But 'm now very desperate to scale down the size (imagine every visitor having to load 2.3 mb to see the site's banner)
Now 'm considering to convert it into .swf, but will it reduce the size without affecting it's quality much?...

It's been a while since I made anything in Flash, but yes, it should make a big difference to file size. Since the Flash program is in effect controlling objects & vectors in your image, rather than updating complete bitmaps for each frame, the file size should reduce while the quality may in fact improve! It also has the advantage of allowing user interactivity - the visitor can make things happen in the image by clicking & hovering over it etc.

I've always made Flash files from scratch, though, & don't know how easy it is to convert to Flash from an existing gif (or how small the resulting file would be). Hopefully others, or yourself can post back here with any findings or success in achieving this!

 

[GrandeMike]

I wouldn't expect the decrease in file size using Flash format to be that dramatic.

If I were you, I would be more worried about hitting my bandwidth limit prematurely. Not only that, but people (like me) tend to adjust how their browser's effect refresh rates and caching. Some set to auto, others set to refresh content on every page hit -- no caching.

That being said, if you do go with a .swf you can always set it to use a lesser version of Flash than what is bleeding edge. You can set it to compile in ver. 7 or 8 rather than 9 or 10. If it's just an animation, this shouldn't effect you as much, if at all. This way you will hit the most common denominator of Flash enabled browsers. And of course, like was said before, always have a static graphic for those disabling, or having incompatible, Flash platforms.
Edit:

I've always made Flash files from scratch, though, & don't know how easy it is to convert to Flash from an existing gif (or how small the resulting file would be). Hopefully others, or yourself can post back here with any findings or success in achieving this!

I have tried to dump an animated .gif into Flash and the decrease wasn't more than 15% to 20%, if I remember correctly. It was a couple years ago. Since then, I too render animations in Flash almost exclusively.

 

[Teensweb]

But how can I (maybe I don't know) make the layers, styling, electric effect and all in flash, and layer them as accurately as I did in flash? And moreover, I maybe a Photoshop expert but in flash mx, i wont even be able to make a stickman fight properly. Now unless I can convert the psd file which I have to an fla file; the compression would not be effective(I tried a few convertors today and god! It gave results that were insulting my nice banner!) and can anyone help me with that?
And I read abt about a loseless compression and lossy compression somewhere. Can someone tell me how to exactly perform a lossless compression?

 

[GrandeMike]

Well...First, it would be nice to see what we're talking about. But I keep getting a page error from the link in your original post.

Second, the transition to understanding how Flash handles drawing, and almost everything, in general...sucks. I didn't find it easy, and still have trouble with it on occasion.

Someone mentioned a .apng format earlier, I would google that and see what you can learn. That may be one of your more viable options if you're not worried about end-user browser issues.

 

[zen-r]

Well...First, it would be nice to see what we're talking about. But I keep getting a page error from the link in your original post. ....

I get that also. But clicking F5 page refresh always then makes it load properly for me.

...Someone mentioned a .apng format earlier, I would google that and see what you can learn. That may be one of your more viable options if you're not worried about end-user browser issues.

Definitely worth a look at .apng. But as far as I can tell it works in Firefox but not in Internet Explorer (not in mine, anyway).
.mng is another format worth a look, but it seems to have even worse browser support.

But how can I (maybe I don't know) make the layers, styling, electric effect and all in flash, and layer them as accurately as I did in flash? And moreover, I maybe a Photoshop expert but in flash mx, i wont even be able to make a stickman fight properly. Now unless I can convert the psd file which I have to an fla file; the compression would not be effective(I tried a few convertors today and god! It gave results that were insulting my nice banner!) and can anyone help me with that?
And I read abt about a loseless compression and lossy compression somewhere. Can someone tell me how to exactly perform a lossless compression?

Even if you are a beginner now, as with anything, you have to start to learn somewhere. So why not just go for it & try to learn Flash - eventually you will have another useful IT skill under your belt.

A quick easy route in, without having to learn Flash itself, is to use a program like Alligator Flash Designer from Selteco.com. I found it a doddle to use & got some great results - though it is more limiting this way in the effects you will be able to produce. But sometimes one has to make a compromise!

Edit: Here's a couple of examples of what I knocked up a while ago for a bit of fun using Flash Designer, to try things out ;

Challenge to Don5.swf -took a photo of someone else & demonstrated for them some of the effects possible.

Bowl of cherries2.swf -someone asked me if I had a photo of a bowl of cherries....so I got one & enhanced it with her photo!

Try hovering on text/objects & clicking things in the Flash images to see its features.

 

[Teensweb]

A quick easy route in, without having to learn Flash itself, is to use a program like Alligator Flash Designer from Selteco.com. I found it a doddle to use & got some great results - though it is more limiting this way in the effects you will be able to produce. But sometimes one has to make a compromise!

Man why shud I learn flash? I dont intend to be a professional web designer or something and moreover I dont have much time to!

 

[zen-r]

Man why shud I learn flash? I dont intend to be a professional web designer or something and moreover I dont have much time to!

Don't then.

 

[Teensweb]

Thanx

 

[Teensweb]

Can anyone tell me more about APNG ? can i create it in photoshop, is the size smaller than gif?
IS it high quality and transparent like .png ?

 

[Teensweb]

????????