Should you worry about slicing your web images?

Back in the days, the Internet was fresh and new and connections to it were rather slow. This caused quite a problem for the first websites that actually had images on them because these sites would take forever to load. A neat little trick that was invented was called image slicing and originally, it was intended to allow a really large image to load seemingly quicker by cutting that image into many smaller images.

Today, this practice is less about saving bandwidth and more about page layout. For example, it’s possible to slice an image that is positioned horizontally and vertically in order to make it appear correctly on a page that is broken into different sections (header, footer, sidebar, etc.)

Saving Bandwidth

As stated earlier, the saving of bandwidth is actually an illusion. If you had a large 1MB image and sliced it into to 6 much smaller images, the loading of the whole set still requires the server to deliver 1MB to the visitor. No matter how you slice it (pun intended), you still have the same image size.

Slicing just makes you think the webpage is loading faster because you see parts of the smaller images loading simultaneous. Others might disagree and say that slicing actually makes a webpage load slower because of the multiple requests being sent to the server at the same time.

Either way you look at it, it’s irrelevant. Image slicing should no longer be a way to try and load webpages/images faster than normal.

How to do it

I use Adobe® Photoshop® to do all my image work and Adobe® Illustrator® for all my graphics. Either way, slicing an image is the same process. Here’s a screenshot of the tool selection in most Adobe products:

Other imaging software programs most likely have image slicing tools, but there’s no need to create a whole how-to guide here. I simply wanted to import some knowledge about what it is.

My two cents

I wouldn’t focus too much on using image slicing techniques unless you’re trying to organize a webpage layout by re-positioning logos and background images across various sections of your site. Rather than slicing images, you should focus your attention on optimizing images — which I cover in the next section.