Tips for optimizing animated 88x31 buttons

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

Use an image optimizer

Ari uses optipng -o7 -strip all image.png for PNGs, and gifsicle --batch --optimize=3 --lossy=100 --colors=40 image.gif for GIFs.

If you’re on macOS, ImageOptim is a thing that exists.

Alternative formats

In theory using WebP would save space, but sometimes it does the opposite for smaller images: when zenfyr converted the besties 88x31 from the original 16 KB .gif to a WebP, it became 96 KB. Try and see if it works for you.

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 and TLS handshake, 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.

---

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