Should you worry about slicing your web images?

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:
Slice select tool
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.

logo

Related posts

The Difference Between Interlaced and Non-Interlaced Images

The Difference Between Interlaced and Non-Interlaced Images

We talked previously about content delivery systems as a means to alleviate bandwidth strains on your server, but in smaller environments, a CDN may not be necessary. However, you should still be concerned about bandwidth at all times. Any website, no matter how big or small can see increase...

Reduce your bandwidth without reducing your website's look

Reduce your bandwidth without reducing your website's look

Previously, I talked about image slicing and how it related closely to saving bandwidth (or how this was much more of an illusion than anything else) and it got me thinking about how important bandwidth savings can be. Most webmasters out there don't always know what it's like to reach their web...

1 Comment

  1. Trackback: Reduce your bandwidth without reducing your website's look

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.