The shortest and simplest answer is the smaller the file size of the images used in a web page, the faster the page will display. This in itself is a good enough reason.
Website visitors traditionally have a very short patience span. Broadband’s steady proliferation has not changed this. If anything, visitor expectations is now that pages should load instantaneously. At rate, the longer they have to wait for a page to display, the more likely it is you will lose them before they have viewed your offerings.
So how does slicing and dicing produce faster page display?
Have you ever seen a page with central table with shadows to make the table appear as if it were floating on a layer above the page? The left and right edges of the central table are tiny tiled vertically to produce the effect of a solid graphic. The slice is a very small file size, so takes much less time to display than if a side graphic big enough to fill the required area was used. This brings up another reason – why we slice and dice images.
Scalability… By using a tiled image slice, it makes no difference how much content is in the page. It could go on forever and the slice would be tiled to eternity. Using a tiled slice means you don’t have to consider the amount of content. The design becomes stretchy, scalable to whatever content it is asked to contain. Another benefit of is this method stands the best chance visitors will enjoy a consistent look regardless of which web browser they have, what size monitor they web scraping data have and what screen resolution they are using. You ensure a consistent look for the widest possible audience.
There are other good reasons to slice and dice.
One of most important reasons is to increase accessibility for visitors using text reading software. Instead of their software reading a bunch of image tags, they get straight to what they want, your message, the content. When used properly, image slices, tiles, are not contained in a web page. They are instead, referenced from a stylesheet, which includes instructions on how to display your webpage’s visual appearance. This among other benefits, allows you to remove all non-essential graphics from the page code. A non-essential graphic is one that doesn’t add any meaningful content to the page. It’s only there to make the page more visually appealing. So part of the art of slicing and dicing a web template from it’s original graphic form is the decision making process of determining the essential from the non-essential graphics by envisioning how a text reader will navigate through your site.
This covers most of the most important reasons as to why you would slice and dice, but there is one more I would like to briefly mention.
Slicing your graphics
Slicing your graphics (and referencing them from an external stylesheet) gives you the first basic level of protection (albeit slender) for your/clients’ artistic property. It makes it more difficult for unscrupulous people to steal all the hard work you put into your artwork. Or at least make them work harder by having to download more pieces, reassemble them like a puzzle. This is called site scraping and is a serious problem currently. There are even several software creators who will sell your products who’s one purpose is for stealing others websites! Another problem is some sites will actually try and use your work by linking to your image from their webpage, so it looks like it’s on their site! You can make it hard for them by slicing up your images. You can also fight this kind of theft using tools available in the administration control area of your hosting service… But that’s a topic for another article!