I’m trying to make a HTML5 banner ad with an animated background under 159KB. I can’t get it it smaller than 3MB…does anyone have any tips or tricks? I’ve tried using photoshop and animate.
I don’t think you can achieve 159KB for an animation, unless you banner is just a button size.
You can do the following things:
- Reduce the quality of the gif by allowing less colors
- Reduce the dimensions of the image if possible
- Reduce the frames per second
- Retouch the background to reduce the details that are not important
If none works, see if you can completely rethink the banner, and use mostly vector images, not bitmaps. Try this app: https://tumult.com/hype/pro/
I agree with Iraszi’s suggestions.
But I wonder how you’ve managed to create something so large and been unable to make it smaller. Can you tell us something about how you built it. I could be completely wrong, but it almost sounds like you’ve created a small, full-motion MP4 video than a restricted-color animated GIF.
If you are already making an animated GIF, what kind of animation is it? Shooting a video with your phone, for example, and converting it to an animated GIF will create a large file since each one of the many thousands of pixels on each frame add up rapidly. GIF compresses broad, contiguous areas of color really well, so planning out the animation and using lots of solid colors (like a vector file does) keeps the file size smaller. Also restricting those areas within the banner where the moving elements occur can reduce the size.