You might know this (or own a few yourself), but at Code School, we have a lot of badges. There are Path badges, course badges, level badges, and we recently even added achievement badges. We think it’s crucial to reward everyone who dedicates themselves to learning and bettering their craft, which is why we put a lot of thought and time into the badge reward system. And every time we release a course, half a dozen new badges ship along with it. Right now, Code School has more than a couple hundred badges across the site — and that number’s only going to go up as we continue to release more courses.

Earning badges is a vital part of the Code School experience, but the combined number and file size of badges is becoming an issue for website performance. Pages with a lot of badges take too long to finish loading because a lot of our image assets are pretty big files. So, to make our site faster, I’ve been digging into image optimization and have found a few different ways to cut down on file size while maintaining our standard for high quality. Users work hard for their badges, and we want to make sure they are as good as possible, so here are some of the ways I’ve found to keep your images around while maintaining speed.

Faking Transparency

One of the ways we can reduce badge file size is to remove the alpha channel from badge PNGs entirely. All badges are perfect circles inside of perfectly square images, so that means we can use border-radius: 50% in CSS to create the illusion of a badge’s transparent background.

Avoiding transparency allows us to remove the alpha channel from the PNG, converting it from a PNG-32 to PNG-24 in the process. In the example above, we’re able to reduce the Rails for Zombies Redux badge file size from 379 KB to 342 KB. That’s 9.8% smaller with no loss in quality!

It’s a step in the right direction, but we’ll need to try something else to get image performance up to snuff. A single badge needs to be much smaller than a few hundred kilobytes.

Choosing PNG-8

PNG-24 and PNG-32 are lossless formats, meaning there’s no quality loss when exporting images. Badges in these formats are pixel-perfect copies of their Photoshop files, but they also have enormous file sizes. Since we’re serious about improving website performance, we’ll have to compromise on image quality — there’s no way around it. Thankfully, PNG-8 is a drastically smaller format that can still look great on the web. The two badges below are nearly indistinguishable, see?

Each PNG-8 is limited to a maximum of 256 colors, which is often more than enough to achieve high-quality images. What’s cool is that PNG-8 also supports limited transparency. As long as one of those 256 colors is completely see-through, including transparency doesn’t have a noticeable effect on file size. That means we can avoid using CSS border-radius to fake the effect.

You can export images as PNG-8 directly from Photoshop by using the “Save for Web” option, or by using tools like ImageAlpha or pngquant.

Always Be Optimizing

Image files often contain embedded metadata that adds to their file size. While this metadata might be useful locally, there’s usually no reason to include it in images on the web. Using a tool like ImageOptim makes it quick and easy to remove any superfluous metadata. According to their site, ImageOptim “optimizes compression parameters, removes junk metadata and unnecessary color profiles” — all of which helps reduce file size.

If we take the PNG-8 version of the Rails for Zombies Redux badge and run it through ImageOptim, it optimizes the image down from 123 KB to 117 KB. That’s a 4.9% file size reduction from just dragging the PNG into an app.

And to get a little meta, ImageOptim was able to reduce the size of the first screenshot by 34.9%!

Takeaways

Comparing the original PNG-32 badge and the optimized PNG-8 badge, we’ve saved over 262 KB on just a single image. The two badges look almost identical, yet the optimized version is only 30.9% of its original file size. Switching to optimized PNG-8s means we’ll be able to dramatically reduce image size with only a small compromise on quality. And all of that means faster page loads across the site for everyone.

These are just a few easy ways to optimize images, bring down the sizes, and keep site performance. These small tweaks made a huge difference for us, and we’ll continue to create badges and reward learning by doing.