Q: What is the difference between these two images?

A B
Image A Image B

A: Image B is 20,479 bytes smaller. Both images came from the same source file and were both compressed with pngcrush -brute and deflopt.

The trick: The images, without a CSS rotation transform, are thus:

A B
Image A Real image B

The explanation: PNG are (basically) filtered then compressed on a row by row basis. This means that the more changes in colors along a row of the image, the worse it will compress. So by rotating the image by 90 degrees so that there is less differences across a row, the compression can do a better job at making the file smaller on disk. After that it is just a matter of telling the browser to rotate the image back to upright when displayed. So in CSS and HTML:

<style type="text/css">
.rotTrk {
transform:rotate(270deg);
-ms-transform:rotate(270deg);
-webkit-transform:rotate(270deg);
}
</style>
<!-- ... -->
<img class="rotTrk" src="pre_rotated.png">

This example is a 'best case' situation, where each row after rotation is a single color. Real world savings for 'interesting' or 'useful' images would be smaller, but when serving lots of content to lots of users, you want to save bandwidth every way possible.

References:

This was tested on Internet Explorer 10.0, Pale Moon 20.2, and Google Chrome 28.0

© 2013 Jason Faust. Do whatever you want with this, ignore it, use it, make it better, add it to a website optimization software package, etc. You don't even need to give me credit. Consider this public domain.

jason.faust@gmail.com

2013-07-10