Slicing and Saving Graphics in Photoshop for Use on the Web

Images are the number one leader of average bandwidth usage. Usually it’s because the images that load on every single page are typically between a total of 60k and a total of 500k. That can easily make your bandwidth usage add up to beyond your limit per month. So what I’m going to be showing you is how you can cut your image’s file sizes in half, if not more.

Byte This

Images are one of the most important parts of web design; they are also one of the most common design flaws on the web. If images aren’t used in the correct fashion, they can cause pages to load slowly, use up expensive bandwidth, or even cause an image to timeout and leave a blank spot where the image should be. The bandwidth usage that images cause is typically due to the designer using the wrong format or not compressing the images correctly. For example if all your HTML and content is a total 8k and your images are a total of 112k, that means that every page load is using at least 120k of bandwidth. Divide that by the number of days in a month and you’ll usually see that you can only have an average of 142 page views a day, or else you’ll run out of bandwidth. Each visitor usually browses 5 to 6 pages before they leave a site; therefore, you’d only be able to serve 23 visitors a day. Which I’m sure isn’t anyone’s idea of good traffic. Not to mention those calculations are only based on your average content and layout images, things like downloads and wallpapers eat away at your bandwidth really fast.

The best solution to this problem is to reuse images, and use smaller images which have smaller file sizes. Over the next few parts of this article I’m going to explain what the best image format is, the best image compression scheme, and the best image dimensions to use for the typical website layout.