(Copying what somebody said on another forum recently): I feel a little silly answering my own post.
I'm doing my graphics work in GIMP. After reading a couple articles on GIF animation and optimization, I decided to reduce the size of the image from 250x250 to 200x200. As a result, for best quality, I went ahead and started over from scratch. I also decided not to do the duplicate frames in reverse order, because each additional frame means a whole lot more file space usage.
Basically what I am doing is a blend technique in GIMP, blending 3 different images, thus creating multiple frames. I am then animating those frames.
Even though I used 3 different images to run a "blend," originally, I wanted all 3 images to appear in the animation unchanged. I decided to still use all 3 images to run the blend, but I am only showing 2 of the pictures "unchanged" now. The other one is just used on the transition frames (and has quite a bit of opacity, of course).
I also reduced number of the frames used in the blend (originally, I used 6 - now I used 3) and it still looks good. I also read about "optimizing the image" so that only the pixels that are different from frame-to-frame are saved into the file. Seeing that I am using the same text (and the same text color) on each frame, I decided to explore that a little. After rewriting the text onto each frame, I found GIMP's animated gif optimization tool that does that trick. So I ran it, and viola!
My new file size is 277kb. This still isn't very ideal, but it's a heck of a lot better than 1.3Mb. The concept I wanted is still there, and the image (in my opinion) still looks good.
Your thoughts on the image would be appreciated. Also, any other ideas or suggestions on how I might be able to reduce the file size more? I mean 277kb is still quite a bit of size for a web page, in my opinion. I'd like to hear about it if you think differently.
[Edit]
I removed the link. Thanks, Soon. I think part of it is my hotlink and leech protection software. If you do want to see the graphic, I have it up on the homepage of huntsources.com (currently) but will probably take it down in a few days if I can't get the size down further.
[/Edit]
Hi Tony,
Thanks for the response. I haven't used flash much and don't have any flash software. I'll get onto Google and see if I can find any sort of program that can save to flash (besides Adobe).
I think I may also be able to reduce it by another 2 frames if need be, (it has 8 total frames now), but for what I want it to do, that wouldn't be ideal.
- David
Hi Jup, thanks for the response. While I am worried about load times, the file is fine for high speed connections. But the current file size is 277kb, which is unacceptable for slow connections. I'm also worried about my server's bandwidth. On only 5 unique visits, bandwidth will be over 1mb because of that 1 photo - and I get hundreds of visitors every month and don't have that much bandwidth.
I've done a little research, and I've decided to shamelessly ask ....
Anyone have Adobe Flash and would be willing to convert this file for me? /blink.gif" style="vertical-align:middle" emoid=":blink:" border="0" alt="blink.gif" />
/unsure.gif" style="vertical-align:middle" emoid=":unsure:" border="0" alt="unsure.gif" />
- David
I've pulled apart the gif from your website and done the best I could with that, without the original images I couldn't include the duck.
You can view the sample [removed by user]
If you send me the three images and also the text as an image (gif with transparent background) I'll be able to get it all together fairly simply. It would be helpful if you included a brief explanation for the timing, sequence etc if the sample is not exactly what you're after.
The file size of the sample swf file is 90.5Kb!
Not to make it sound complicated, but have you considered a slideshow of those 3 separate images, using JavaScript?
That way, if an impatient visitor stays on your home page for less than a second, all he gets is the first image instead of having to download the whole huge animated image file on his home page visit.
Just my thoughts.
Hey Jup, thanks for the work. I appreciate it. For now, I've decided to just go with 1 image, and I'll look into / think about doing the flash possibly later. Arul, that's an idea, but again, that would just add to the bandwidth of my server. I'll watch the stats, because I'm still not close to maxing out, but my website is a seasonal site, and because its still fairly new, I get more visitors every year. Within the next month, traffic is going to start picking up - not to mention I've added more things to do, and hopefully more ways of retaining visitors for longer.
I'm also getting ready to send out my very first newsletter, which will will probably drive returning traffic up, remind the some of the real old traffic that I still exist, and hopefully start spreading the word a little more that this is a useful site. Summary: I still don't want a lot of big files. But that's a thought - I'll think about it.
Thanks,
David
Hey guys,
I have just finished playing around with an animated gif that is 250px by 250. I need to add some color to one of my websites, add more content, and just make the site more attractive. So I'm hoping that something like this will help.
Anyway, it's got 30 frames (15 are duplicates, but are in reverse order).
The final file size is over 1mb - which obviously is VERY unacceptable for a website. Any suggestions or ideas? I'd post the image here, but, seeing that it's over 1mb, bandwidth of course will be eaten up pretty quickly.
- David
IT consulting, Technical Support, and Web Hosting Solutions
http://www.huntsources.com - Hunting Resources