Tips for optimizing animated 88x31 buttons

This guide is written for GIMP, but I imagine other software has things like this as well.

Combine, not replace

Go use Filter > Animation > Optimize (for GIF).

This let me save 15.2 KB on aei’s 88x31.

Remove artifacts

Go through each frame of the GIF and remove pixels that appear not to change.

This let me save 7.71 KB on toastyfen’s 88x31.

Make sure to open both the original GIF and your optimized version to make sure that there are no visible changes.

Index it

In GIMP, it’s Image > Mode > Indexed.

This let me save 6.95 KB on N64 Sherbet Land’s 88x31.

Remove loops

It’s a GIF. It loops infinitely. You don’t need to hardcode loops. If you want a finite amount of loops, GIMP allows you to set that as well.

This wasted 21.6 KB on authen’s 88x31.

Inline them

If you have a lot of 88x31s on your page, it might be worth it to inline the small ones as data: URIs. If you need a rule of thumb, Vite defaults to 4096 bytes, and Seirdy recommends 250 bytes.

The overhead of Base64 is made up with solid compression, reduced latency, and also avoiding the ~1 KB of overhead HTTP requests have.

This saved 24 KB on split’s website when compressed.

Don’t hotlink

To follow any of these, you need to be the one hosting the image. Also, third-party requests mean a DNS lookup, adding even more latency. Don’t count on the cache.

31a05b has written a counterpoint about 88x31 links.

Include width and height

If all else fails, make sure you have included width="88" height="31", even if the image is exactly 88x31.

Unloaded images without an explicit size do not reserve their space, resulting in layout shift when they load.

Alternative formats

In theory using WebP, AVIF, or JPEG XL would save space, but in my experience it does the opposite for smaller images. Try and see if it works for you.

Merge identical frames

I don’t have an example but I swear it worked once.

---

I hope this guide will make your website a little faster. Good luck!