Saturnboy
 2.1

Optimizing Web Design

,

Once everything is done (meaning I have a layout, I have a design, and I have it sliced and assembled), I like to make another pass to optimize both the size of the image files, and the number of files. My two favorite techniques are using Sprites to reduce the total number of images, and using OptiPNG to compress the images.

Sprites

It is fairly common to see sprites used in high performance web design. The Gmail team has a great blog post discussing various performance enhancements currently in use, including sprites. But for some reason, almost everyone thinks of sprites for icons and buttons. In my opinion, any time you can fuse two images into one, you’re making a “sprite” and you’re improving performance. Using a grid-based framework like Blueprint CSS tends create a lot of rectangular layout imagery, which are often ideally suited for fusing into a larger sprite.

The current web page has two candidates for spriting: the main header image can be fused to the footer, and the sidebar header to the sidebar footer. Just like this:

fuse diagram

So the original circ-head.png and circ-foot.png are fused to create circ.png. Similarly, the sidebar header and footer are fused to create sidebar.png.

The original circ.css is simply modified with the new image filenames and a negative vertical offsets on the footer backgrounds. Here are the relevant parts of the new circ.css:

#header {
background:#111 url(img/circ.png) 0 0 no-repeat;
height:160px;
min-height:160px;
}
 
#footer {
background:#111 url(img/circ.png) 0 -160px no-repeat;
height:30px;
min-height:30px;
text-align:center;
}
 
#sidehead {
background:transparent url(img/sidebar.png) 0 0 no-repeat;
height:14px;
min-height:14px;
}
 
#sidefoot {
background:transparent url(img/sidebar.png) 0 -14px no-repeat;
height:14px;
min-height:14px;
}
Compression

Using OptiPNG is really easy. Just run it over a folder of PNGs, and it losslessly compresses what it can, and leaves the rest untouched. When I’m not using source control on a design, I’ll often perform the compression step exclusively on the server to keep things simple.

Here is a simple command to perform maximum compression of all the PNGs in a folder:

optipng -o7 *.png

Digging Deeper: I have noticed that OptiPNG, in it’s quest for maximum optimization, will sometimes alter the image type (either by reducing the bit depth or switching from full color to indexed color) in such a way as to make Photoshop very unhappy with the resulting image. In these cases, the GIMP is your friend.

The Results

We fused four images totaling 52552 bytes into two images totaling 52356 bytes. So we saved two whole HTTP requests and a meager 200 bytes. Not much to write home about (or even blog about), but hopefully it serves as a useful demonstration that design optimization is fairly simple. Next up, we’ll take our design and layout into Flex. What fun!

The Files

Comments

2.29.2012

1

Hi, thanks for the tutorial. Just to let you know that you have invalid link in “design and layout into Flex”…

The correct link is : http://saturnboy.com/2009/02/designing-in-flex/

3.1.2012

2

@William: all fixed, thanks!

© 2017 saturnboy.com