As you can tell by this theme and my other themes, I love png transparency. For single color and clear images, the file sizes are not bad at all. Even with a gradient involved png can compress that fairly well. But when you have a photograph or complex artwork png images are huge, like 500MB for a 1000×250 header. I wish that someone would develop a free jpeg-like standard that included transparency. Until they do this situation requires image slicing, because you can bring that down to well under 100MB.

I don’t think I could possibly go through all the ins and outs of image slicing. I’m sure somewhere on the web, somebody has tried, but I’ll just tell you some of my favorite tips that I find helpful. Photoshop is really the only way to do slicing, it’s very easy once you learn the tools and the way I do it, it doesn’t take long to transfer iterative image changes to the website.

Photoshop Guides

You’ll definitely want to set up some Photoshop guides where you want your slices. Combined with the snapping behavior of the slice tool, I actually find these to be a necessity. Without them, even with the grid turned on, it’s much more difficult. The slice tools are kind of weird and it’s hard to see the slice selection box, so the guides really, well, guide you.

File Names

Once you have you slices created use the slice selection tool to double click on the slices and change the generated name to the name you want. Photoshop will generate names like MyImage_01, MyImage_01, and MyImage_03. I always changed these to MyImage.T, MyImage.M, and MyImage.B (top, middle, bottom) so I remember which is which. For more complex slices I have my own personal naming scheme that makes sense to me.

Save for Web & Devices…

I always use the Save for Web & Devices… panel. You have to when you want to set the image types, but I never actually save the images here. Instead I use the Preview… button at the bottom of the panel to preview the web page that Photoshop would create. I don’t want the HTML, just the images, and since Safari is my browser I just drag them one a time to the desktop and then to the web folder where they belong. I know it sounds like it would take longer, but it doesn’t. It allows me to change only the slices I need and there’s no cleanup whatsoever, which saves a lot of time.

The HTML

I don’t use the HTML that Photoshop generates, trying to integrate that into your project will take all day. You should get to the point where you can manipulate this type of thing pretty quickly. I use an outer div with a height and width of the whole image. The outer div is also relatively positioned. Then I used child divs that are absolutely positioned inside of that for each of the slices. Because the outer div is relatively positioned, the inner divs positions are relative to that, which makes it easy to calculate their positions, it’s simple addition and subtraction. Using CSS properties like bottom and right the values are often 0. If I’m slicing I’m always using background-image in CSS rather than actual images, that’s another way to save time.

A few divs in the markup and a few more lines of CSS and you’re done!