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 usages over time as traffic conditions fluctuate. One great way to help with the loading time of a graphic-intensive website is to create it using interlaced images.

Interlaced and non-interlaced images

These images look and function almost the same way as a non-interlaced image with one exception–how it appears to load to your visitor. If you have a large image on your site and someone with a slower Internet connection comes to view that image, a non-interlaced image will simply be blank until the data transfers and then slowly it will appear from top to bottom.

An interlaced image will appear completely, but it will be highly pixelated. As the data transfers, the picture will begin to get clearer and clearer until the full resolution becomes apparent. A perfect example of the different between the two can be seen below:

Interlaced and non-interlaced images

Interlacing is supported by all the top image formats: PNG, GIF, JPEG, JPEG 2000, JPEG XR and PGF. To create an interlaced image, all you need to do is make the correct setting change when saving your document. You should take note that interlacing an image does add a little more to the filesize of the image as compared to a standard progressive-scan image.

Site benefits

People don’t like waiting. Today, even 5 seconds is a long time! The advantage of an interlaced image is that a viewer can start seeing the image as a whole (although not clear) from the very start of the page load. Believe it or not, even though both types of images load at about the same speed, the perception is that the interlaced image loads faster! This can mean the difference between a visitor hitting the back button or just waiting out the load.

As a web developer, you have to always been looking for the edge when it comes to visitor retention and even the littlest of tricks can give you that edge.

Overall, you should be careful about putting high-resolution images on your website, if not for bandwidth considerations, at least for your visitor’s benefit. However, interlacing these images will provide your users with something other than a blank screen while they wait for your content to load.

CDN stands for Content Delivery Network. Its sole purpose is to help you evenly spread your entire website’s content (mostly the larger media files) across multiple web servers to alleviate server load from a single machine. This, in turn serves two purposes.

First, it minimizes how much bandwidth you’re serving out to your web visitors on your webhost. Second, it allows your site to run smoothly without server crashes, timeouts and user caps. However, a CDN can be quite expensive depending on what type of CDN you require and what services you need. Let’s explore these.

CDN Types

A Content Delivery Network can serve the function of completely mirroring a portion of your site or a specific area of your site, like your video section or streaming music channel. Back in the old days, we didn’t have sites like YouTube, so if you wanted to play videos on your site, you needed a lot of bandwidth or pay a company to host the video for you and stream it live from your site.

• End-to-end Transport – This is the fundamental standard of the Internet. It basically means the service will connect you to the content directly. Let’s say you had 10 videos all about 5 minutes each. Just for the sake of this point, let’s assume to stream each video, it would “cost” you about 100mb in bandwidth. If your site streamed all 10 videos 10 times a day, that’s 10GBs of bandwidth every day! To offset this cost, a CDN would charge you a monthly fee to host the video thus sparing your server–and your wallet.
• P2P Transport – I can write a whole article on just P2P alone! To keep this one short, P2P is short for peer-to-peer and it is currently used as the backbone for downloading content online. The idea behind it is sharing. For example, when you are downloading (and watching) a video, you are also helping in the upload process for someone else who is watching it too. So rather than 1000 people streaming 1 video from 1 site, each of these thousand are sharing the parts they downloaded with the other users who need them. This allows the 1 video to circulate through all viewers at the same time thus removing the main load from the website.

CDNs aren’t generally described as P2P networks as they were designed to use point-to-point protocol, however P2P has become a fast alternative and popular protocol among the large media sites of today. Some examples of CDNs (and P2P) are bit torrent, Internet radio, Hulu, YouTube, Webcasting and Internet tv.

Content Providers

High-end delivery companies are designed to handle massive amounts of web users, traffic and media data every single day. If you’re running a basic website or blog, you will never need something of this nature, but nonetheless, here are a few commercial companies.

• Akamai Technologies
• Level 3 Communications
• Peer 1
• Amazon CloudFront

How does all this help me?

Again, depending on your specific needs, you may or may not even need a CDN. The point is that if you have a very large web presence, you might want to consider saving some of your webserver’s bandwidth and going with a company that specializes in these services. Doing so can dramatically decrease your monthly costs and save you a lot of headaches over time.

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 host’s bandwidth limit because they either don’t have enough visitors or they don’t manage that portion of the business for their clients.

However, it’s very important to try and optimize your site as much as possible to avoid reaching those limits. Just because your host gives you 2GB of bandwidth each month doesn’t mean you shouldn’t optimize your site to use less than that.

Reducing Bandwidth

There are many ways you can reduce your bandwidth and fortunately they are all in your control. Obviously you can’t control how many visitors load your site, how many downloads they take and you certainly can’t control who leeches your links and content onto their own site, so don’t waste your time trying.

Instead, focus on all the ways you can trim your site’s overall size while not losing any of that quality work you’ve put into it. Besides making your site load in a much smaller footprint, you’ll also be speeding it up for your users and they’ll love that.

Here are some areas of interest when it comes to reducing bandwidth:

• Graphics – This might be the most important area of your site because it is most likely made up of many different graphics. Unlike images, graphics are used to fullfil your website’s appearance. This is good because these graphics can be reduced to lower quality files without compromising much quality. A great way to do this is to convert your web graphics in to .GIF or .PNG files.
• Images – Unlike graphics, images are generally used to display a product or service by way of sending a .JPG or other higher quality image format to the user. You don’t want to compress these files too much or use .GIF technology because you will seriously downgrade the overall experience and look of these images. However, you can use .JPG to compress the image without losing too much quality and you can also reduce the overall size help save bandwidth. Also, when showcasing a series of images, always use thumbnail pictures. This allows a smaller version of each image to be shown to the user and they can select which ones they want to see larger. This way, only the desired images are loaded at full size.
• Video – Thanks to YouTube and some other copy-cats out there, you no longer have to store and stream video from your own server. You can now upload your video to your YouTube account and embed that same video on your own site. It plays just as easily as it would if someone had gone to YouTube and found it. Also, you get the added benefit of having your video be found on YouTube and then any site promotion you have on your account (or the video itself) will lead people back to your site! Alternatively, you don’t have to have the video available on YouTube as you can just mark the video as unlisted–this way nobody can find it in the searches.
• Sound – As of yet, I don’t think there’s a service like YouTube that simply allows the upload of your own music compositions, but that’s ok. Music doesn’t take up a lot of space if you compress it right. If you streamed a 192kbps song from your site, each user would have to download all 3-7MB every time they want to hear it. All you need to do is downgrade the bitrate into to something more manageable like 60kbps. This allows the track to be heard somewhat clear, but not enough to drag your bandwidth down or allow people to copy your music. Also, consider using short clips instead of full tracks.
• Downloads – Consider using file sharing services like MediaFire that work similar to YouTube to store your downloads. By keeping the files off of your own server, you not only save bandwidth, but also hard drive space! If you must have files on your server, try to keep them compressed by allowing the download of .ZIP files only.

This is certainly not a complete (or detailed) list of things you can do to reduce bandwidth, but I just wanted to get you pointed in the right direction. Above all, you want to ensure your site is user friendly, lightweight and accessible to everyone. To find this happy medium, you need the perfect balance of a fast webhost, compressed graphics and images and a network on off-site media storage locations.

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.