Resources
helping you along the way
Knowledge is the foundation of all wisdom...
Resources >> Web workshops >> Image slicing
Image Slicing
What is image slicing?
Image slicing is what you do if you don't know any better!
Image slicing is the process of taking a larger image; say an interface to a web page you created in a photo editor like Photoshop, and slicing it up into smaller images. Then rebuilding your image (with the slices you just created), by putting them back together using an HTML table.
Programs like Image Ready and Fireworks do this automatically which saves a huge amount of time over doing it manually.
Why slice images up?
People slice up images for inclusion/insertion into web pages for a couple of reasons:
- To reduce file sizes and thus download time of the web page.
Often when creating a web interface, certain sections are better suited to be saved as gif images while others as jpegs. By being able to isolate these areas (using image slices) and saving them as the appropriate image type (gif or jpeg), you are able to maximize the quality and lower the total size of the image.
- To be able to create rollovers within the larger image.
Creating rollovers with images traditionally involves swapping images as the user passes his/her mouse over the button image. For each button, you need a new image for the 'swap' to occur. This is not practical with huge images - you don't want to be swapping big images since it would take forever to load. So by slicing your one big image into smaller images, you're able to swap only the button portions on your pages.
Should we be slicing up images today?
The short answer is no. Previously, image slicing was a good option because of the huge limitations in the layout of a web page. These days with CSS-P and Flash being universally supported, there is no reason to slice up images anymore.
CSS-P is short for 'Cascading Style Sheet Positioning'. CSS-P or CSS based layouts allow for pixel perfect placement of your page elements (images, text, tables etc) - the major reason for image slicing.
One of the major problems with image slicing is that it is a slow process compared to using CSS based layouts; it's simply much quicker and easier to layout your pages with CSS.
Another major problem with the image slicing technique, is that you are left with an inflexible, hard to update web page. For example, what if you wanted to add a new button to your pages? With image slicing based design, you would have to go back to your image editor (say Photoshop) and make your changes, realign your grid and output the whole thing again. Then you have to take your new sliced up image and insert it back into your web pages. This may not seem like much, but it does take time.
Compare this to CSS based design where all you would have to do is add one line of code! So you could be comparing an hour of work (with image slicing) vs. less than a minute using CSS!
Based on an article by Stefan Mischook, Killersites.com. Take a look at his site for other great articles and tips, and sign up to his newsletter.
