Image Slicing, Tables, and Web Layout

Slicing Images is the process of converting an image into an HTML/CSS website. There is a “slice tool” in Photoshop, which can be a part of this process. Slicing images also can be used to create interesting navigation buttons.

Tables, so far, are strictly for tabular data. In terms of image slicing, the slices can be brought into a site as tables or as divs. I think we'll be using divs.

Per some forums on divs vs tables, divs rule because they are:

better for SEO (> content over code ratio)

faster loading (less code)

browser friendly

future flexibility

2009 not 2000

Basic Information

This is a quick You Tube tutorial on slicing images in Photoshop. It's not Lynda.com, but in five minutes, the narrator creates a pretty nice menu bar. In Photoshop, he draws a rectangle and applies a gradient. He adds the text he needs, i.e. home, about us, development, etc. Then he uses the slice tool to separate the bar into individual rectangles. Next, he uses Save for Web and Devices and saves as "HTML and Images". This creates an HTML document and pieces them back together, although they are now several different slices.

XVEL Software sells Image Cut,software to make slicing look professional. The author of To Slice or not to Slice Web Images states, "There are ways to slice images for HTML files that will allow them to load much faster, with portions of the image in JPEG format while others are in GIF format. This allows each portion of the image to be optimized to load the fastest possible while still providing the best html image slice needed for the website." In another article How and Why to Split Images (Image Splitting Basics), she talks about different reasons for splitting images: faster load times, animate picture parts, and to create menus. (She promotes Image Cut here, too.)

This page was helpful in simplifying the answer to "Why slice?" Three reasons include:

1. Rollovers. In order to create rollover menus that integrate well with the rest of the graphics on the page, you need separate, small images for the menu items. It would simply take too much bandwidth to have one big image for every single rollover.
2. Control over layout. By splitting the big image up into lots of smaller images, you can control the position of other page elements, such as HTML text and Flash movies, more easily. For example, you can place a Flash movie "inside" your big image by creating a table around the movie that contains the slices of your big image. You wouldn't be able to do this if you just had one big image, as there would be nowhere to put your Flash movie!
3. User Friendliness. It's not nice to have to wait ages for a big image to download. By splitting the image up into smaller images and placing these images in the Web page, the user can get a feel for the layout and look of the page before the whole page has loaded.

Janice Omacht ✽ November 2009

Home Email Me