Imaging Slicing with Photoshop and CSS

It’s better than using tables...

Why slice images?

These are some of the benefits of slicing images:

• Improve image optimization
• Increase in dowload speeds (potential)
• Add interactivity

Why use CSS?

CSS positioning allows you to reassemble your images without the need for tables. Tables should no longer be used for layout anyway.

How is it done?

Using Adobe® Photoshop®, the process is quite simple:

• Use guides to map out the areas you want to slice
• Select the Slice tool, and click Slices From Guides in the options bar.
• Using the Slice Select tool, hold down shift and merge your rectangles (the fewer the better)
• Use Save for Web and Devices, optimize your image slices, and hit save.

Note: Be sure to use Generate CSS by ID in your Settings.

Sliced image example

Here's and image that we sliced into pieces, optimized for quality/file size, used CSS to position, and added some links to recreate the look of the original home page.

©2011 David Windahl. All rights reserved.