A Novel Image Optimization Technique

As a developer, I'm often handed website mockups with beautiful, rich imagery, with lots of alpha transparency. As you may know, if you need to maintain that transparency on the website (to accomodate ever-changing content and layouts), you'll most likely need to use the PNG file format. But these can get pretty hefty. I'm always searching for new and nifty techniques for speeding up the sites we build, so I thought I'd share a technique I came up with to reduce the filesize of some large PNGs that have a lot of alpha transparency.

I had noticed that PNG's get really big when the image contains a lot of detail, like textures and such, but totally transparent pixels have very little cost in terms of filesize. I also know JPGs are handy for crunching those high-detail textured images down fairly small, without much visible difference, but they can't handle transparency. So what if we broke our image up into a PNG and a JPG? Could we get a significant savings in filesize? (Spoiler Alert: YES!)

So here's the image I want to end up with. It's a detailed wooden frame over a changing image. Notice the shadows around the frame, and within the frame, over top of the image. 

First, I tried just saving the frame part with the shadows as a PNG, which I could just overlay on top of my image and I'd be done. Bam.

But, jebus, that file is a whopping 219KB!!! That's just too much for my tastes. My next step was to draw some guides in Photoshop so I could easily create a PNG of the transparent shadowy parts and a JPG of the grainy wood texture parts. 

At this point, I had the option to create either a GIF image with transparency inside the frame, or a JPG with just a solid background color inside the frame. If you know me, you'd know that, of course, I tried both options. The GIF came out to 88KB, while the JPG came out to only 42KB. 

Next, I needed to create the PNG image for the rest of the image, and hope that this actually resulted in significant file size reduction.  What I ended up with was this, which is mostly totally empty space. 

And after saving that PNG, I was happy to find out that it was only 48KB!

Results!

Don't worry, I'll do the math for you. So I was able to take a 219KB png image, and split it into a 42KB JPG and a 48KB PNG, for a savings of 129KB total! That's less than half of the original size! And with some clever css, and some absolute positioning, you'd never know it was two images from looking at it. 

Granted, this method does result in two image requests to the server instead of just one, but I'm pretty sure it's worth it to save 129KB. 

Implementation:

Now, to actually get these images to work together as one just requires a little bit of html and css. Here's the HTML markup:

<div id="page-header-image-container">
<img src="/path/to/image.jpg" class="header-image" />
<img src="/_assets/images/page-header-image-frame.png" class="border-overlay" />
</div>

...and here's the CSS

#page-header-image-container{
	position: relative;
	width: 827px;
	height: 303px;
	margin: 0px auto;
	background-image: url('/_assets/images/page-header-image-frame.jpg');
	background-repeat: no-repeat;
	background-position: 4px 16px;
}
#page-header-image-container > img.header-image{
	position: absolute;
	top: 67px;
	left: 57px;
	z-index: 1;
}
#page-header-image-container > img.border-overlay{
	position: absolute;
	top: 0px;
	left: 0px;
	width: 827px;
	height: 303px;
	z-index: 10;
}

I hope this method helps you get your websites lean and teeny-tiny. Thanks for reading!

[UPDATE]
Since I wrote this, my friend June pointed me to http://tinypng.org/, which compressed my original PNG from 219KB down to 72KB! It compressed my 48KB png down to 14KB.... So that makes my final product 56KB, which is only a 16KB savings... but still, YAY! tinypng.org does use 'lossy' compression, but it's almost undetectable to the naked eyeball. Thanks, June.