Image Optimising all the Transparent things


The following was an interesting exercise in image compression software, in particular using apps rather than your usual array of command line tools, but it’s all built on the same kind of underlying software anyway (pngcrush, etc). File size can be a big deal in advertising, because you’re billed based on how big your filesize is.

Granted, we’re not short on space, but we must have a billing strategy, and this seems a reasonable one. Google (DoubleClick) are able to offer their advertisers ways to cut down on filesize through their services like their font libraries (whereas we prefer fonts be embedded in our files for more accurate billing), but even with fonts aside images are usually the biggest part of any adfile.

So I pulled an image from the internet to see how this mix of tools I’ve been using can cut down on a transparent PNG (often needed for dynamic advertising). This Kyoukai no Rinne image from Wikpedia I assume has been optimised to some degree, but still comes in at 33KB.

Kyoukai no Rinne logo from web

You’ll be seeing this image for a bit yet so don’t get bored of it too quickly. They should look the same, because I’m showing you how it does look the same even though we’ve brought down the filesize significantly!

Now, after importing it into Photoshop, I saved it through ‘Save as Copy’, which gave me a filesize of 64KB (194% of original). This lesson if nothing else tells me I should stop using this option, and use the appropriate one which is ‘Save for Web’.

Kyoukai no Rinne logo from Photoshop 'Save as Copy'

Using ‘Save for Web’ for a 24-bit PNG file with transparency and everything else on default settings (nothing else to change, really), the filesize came back down to 32KB (97% of original), but with 1KB off that’s still pretty poor. We can do better.

Kyoukai no Rinne logo from Photoshop 'Save for Web'

ImageOptim was suggested to me all the way back in 2013 by the then Ticketing and IT Coordinator as a way to bring down the filesizes in the Carousel of the homepage. 500KB is a bit heavy to have on the frontpage, but this hadn’t occured to me before… Nonetheless, it’s a lot easier to use than pngcrush. Drag and drop and Bob’s your uncle (except for the fact where, you know, he’s not).

ImageOptim

With ImageOptim, the filesize of the file exported through ‘Save for Web’ came down to a respectable 28KB (85% of original).

Kyoukai no Rinne logo optimised with ImageOptim

Not too bad. But, I think we can do even better. Discovered today, we can try out ImageAlpha created specifically for 24-bit PNG files that include (and don’t include) alpha transparency. By experimenting and changing the settings to 32 colours and IE6 friendly just for kicks (even though this site isn’t), the file size came down to 7KB without much discernible difference in quality. Whoa.

ImageAlpha

There’s your interface above, and here’s your output below. Still looks the same, doesn’t it? (You can use the ‘Show original’ option in the app to compare, and while there are very very slight differences, they are almost negligible).

Kyoukai no Rinne logo optimised with ImageAlpha

Here are the results again folks:

Origin Filesize
Original 33KB
Photoshop 'Save as Copy' 64KB
Photoshop 'Save for Web' 32KB
ImageOptim optimised Photoshop 'Save for Web' export 28KB
ImageAlpha optimised ImageOptim result 7KB