How to reduce animated GIF to 100kb?

Advertiser has specified that adverts must be 100kb or under.

I’m working on a series of web ads for a client. They are 3 frame gifs with text and photography. I’m building in Indesign, saving as JPG and creating the GIF in Photoshop. When I save to 64 colours, file size is 131kb, the images already look rubbish. If I save to 32 colours, the file size is 91kb and the images are really awful. The client is not going to be happy if I send back these GIFs. What should I do?

Original:

Final 91kb:

131KB isn’t really all that large any longer. It’s a good-sized file, but not all that big. How much bigger would 128 colors make it? You could also try dithering (maybe you already did), which would make the file a bit bigger, but perhaps not as large as if you used 128 colors.

At the risk of stating the obvious and insulting your intelligence, is the file set up to the finished size? If the ad is 1000 pixels x 50 pixels, your file should be set up to that size. I ask because it appears the dimensions for the original image are 1174 x 780. That seems like an odd size for an animated gif ad. Beyond that, it may take a slight redesign of the ad . . . make the photographic portion smaller or make the sky a flat color rather than the gradient.

@Buda What is the final pixel size of the Animated Gif? Are there other photos being used. You mention it is 3 frames, are there photos in the other frames? >100kb for a large animated GIF might be a challenge (as you’ve seen).

Currently working on 300x600 ads but there are a bunch of different sizes I have to do.

Sorry the screen shots are big, it’s not going to be that big in real life, but the quality/colours is accurate. I just wanted to show the colour.

This is through Photoshop, 300x600, 256colors GIF – 111kb
example-256-PS

This is through Photoshop, 300x600, 256colors GIF, setting “lossy” to 30% – 61kb
example-256-PS-30percent

Certainly noticeable in the sky. As mentioned earlier, making the sky a solid shade might help some.

Are the other frames pretty “simple” and more geared to better GIF compression (i.e no photos, not overly detailed). If so, playing with how “lossy” the GIF is you might be able to hit 100kb or less pretty easily.

This screenshot shows adjusting the lossy-ness.

You could also try any of the numerous online “gif compressors”. Most will compress animated GIFs as well. Best of luck.

Thanks CraigB, I will try lossy to 30% but I need to get the animation (three frames) in under 100kb. One frame, no problem.

Yup, if you’re trying to do “full page” images on all 3 frames that might be impossible. Unfortunately you may need to look at redesigning it to use the photo images in a way that is not full screen. And rely on more flat color and “flat” art for the remainder.

Are you sure the format needs to be GIF? Many “GIFs” you see online now are actually videos because the compression support is so much better, but people still call them GIFs because language doesn’t obey any of us.

Specifically I know that Reddit ads with GIFs underneath are typically videos.

Update, the client has decided to go with HTML5.

1 Like

Nice.

©2019 Graphic Design Forum | Contact | Legal | Twitter | Facebook