The Cabinet
authen-delooped.gif: 8.3 KB; authen.gif: 29.9 KB.

Tips for optimizing animated 88x31 buttons

Try not to make 20 kb GIFs challenge failed instantly

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.

Merge identical frames

I don't think I have an example for this but I swear it helped one time.

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.

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

This sounds counterintuitive, but if you have a lot of 88x31s on your page, it might be worth it to inline the small ones. If you need a rule of thumb, Vite defaults to 4096 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.

Note: 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.

PS: In alt text, describe the location, not the content

Links with images are functional images. Write where it goes, not what it looks like.

This is your decision however, see @760ceb3b9c0ba4872cadf3ce35a7a494's reply for a counterargument.


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