Overview

Not having to do specifically with the design of the website, image optimization is often overlooked by web designers. However, optimized images are essential for the success of a website, especially if images play a large role in the site.

What is image optimization?

Image optimization is using the most compressed (smallest file size) yet visually acceptable image in the proper file format for the specific role of the image.

Why is Image Optimization needed?

There are two immediately prevalent reasons for image optimization: download time and bandwidth used. These may seem interrelated, but they are important for different reasons. Hardware storage space is a third reason that many only really apply in some cases.

Download time, though not as important as it was in the days of the 14.4k or 28.8k modem, is still a major factor in a sites success. A user made to wait is a user more likely to hit the back button on the website, or click on content that’s loads first instead of waiting for the entire page to load. Losing customers to a page that take 10 seconds to load is unacceptable. Though you may have a fast internet connection, others do not necessarily have these pleasantries, and there are certainly a significant number of dial up users on the internet and these users actually make up the majority in many developing countries.

Bandwidth is the hidden killer of the high traffic site. Plain and simple, bandwidth costs money, and not optimizing images wastes precious bandwidth that will end up costing you money, customers, or both. Most mainstream hosting plans have bandwidth caps that require extra payment for additional bandwidth if you go over your allotted bandwidth. The problem is that you may not be reachable when this happens and your site could be down until you pay additional funds or the bandwidth accrual period starts over again.

Now consider a large site that uses images primarily as its content. What if all the images on Flickr.com were not optimized. What if they were twice the file size compared to what they could be? For a site this large, not optimizing images has a serious impact on the infrastructure of the site. You need twice the data center storage capacity, electricity, data center engineers, part supply, and twice as much floor space to house your servers. Not optimizing images on a scale this large could mean thousands or millions of dollars of unecessary costs. You better believe Flickr.com has thought about it, and probably has some very advanced image resizing scripts in place.

How do I Optimize my Images?

Manual image optimization is an easy process and not something that you should have to go out of your way to do. First of all, you should be tinkering with all your images in Adobe Photoshop. Other programs, despite promise, are not on the same level as Photoshop. After you have manipulated your image to the correct appearance and canvas size for the job, you need to use the “Save for Web” command from the file menu. This will allow you exercise fine-grained control over the image and its file size.

The first thing to do is select a format for the job. A rule of thumb: if your image is similar to a photograph (something with thousands or even millions of colors), you should be using a .jpg format. If your image is more similar to a graphic (think an illustration, or something that has less than 300 colors), you should be using a .gif or .png format. Many sites have jpegs when they should be using gifs or pngs. When in doubt, trust your eyes and toggle back and forth between jpg and gif. Make sure you look for distortion around sharp edges in .jpgs as a sign of poor quality.

Jpeg graphic (.jpg) sizes are determined by the image canvas size and the quality of the image. The quality is a factor between 1 and 100, with 100 being the highest quality, that determines how much compression is applied to the image. Sometimes, you will see this quality rating in the range of 1 to 10, with 10 being the highest quality. Though it depends on the particular use of the image, most jpgs look best and are most efficient between 50-70 quality. 50 being the lower range for less important pictures, and 70 being the highest for larger, more important pictures, like a title graphic or headshot of an important person.

The size of gif and png graphics is determined by the canvas size (though to a lesser extent than jpgs) and the number of colors in the optimized image. Using an efficient algorithm, Photoshop can break your graphic into preset intervals of 256, 128, 64, 32, 16, 8, 4, 2, 1 colors or even odd numbers in between. Most graphics and logos don’t need 256 colors to look good, and may even look good with as little as 32 or 16 colors. If in doubt, toggle the number of colors to 8 and work upwards until you find a setting with acceptable appearance. The difference between png and gif images is subtle; Depending on the graphic, either one could look the best with the smallest file size. For larger graphics, png seems to win the contest versus the older gif format. Pick one format and be consistent with it throughout your site.

Large Scale Optimization

One of the many benefits of PHP is its image handling packages GD and GD2. Built into the latest versions of PHP, GD and GD2 allow for instant image resizing and manipulation on the server before the image is sent to the client. Bandwidth saved! Combined with the PHP's filesystem functions, GD allows you to permanently resize images on your server. Have a site where people upload there own pictures to go with their user profile? After the user uploads the image, set the desired quality and image size using PHP before saving the image to disk.

For details, read: PHP Image Optimization