Improve Speed with Small Images

It was true in 1997 and it’s still true today: website visitors demand responsiveness. Studies show that slow websites are one of the most common complaints of users. It doesn’t matter how great your site looks — if customers have to wait for a page to load, they will leave before you even get a chance to show them.

Images are a common source of slow websites. On average, images account for about half of the total size of a webpage. Here are some ways to minimize the size of your images, increasing site speed and lowering bandwidth costs.

Reduce, Reduce, Reduce

The smaller you can make the image dimensions, the smaller the file size will be. Cropping an image so that it is as small as possible is helpful. In addition,  a less “busy” image — fewer colors, fewer objects — will be easier for your graphics program to compress. Obviously, you can’t always modify your image in these ways, but it’s something to consider.

Images should also be resized in a graphics program to their final size before putting them on the web. Webpage editing programs (DreamWeaver, PageMaker, ExpressionWeb, and others) allow you to specify dimensions for images, but visitors still need to download the entire file. Images often look blurred or distorted when using this method. This best solution is to always edit your images in a graphics program first.

Save For Web

Professional image editing programs allow you to save an image for the web. For example, in Adobe Photoshop, you should use the “File -> Save for Web & Devices” option rather than “Save” or “Save As”. The “Save for Web” option strips out unneeded metadata (such as color profiles) and also gives you much more control over how the image looks.

Finding the optimal image settings can be an art in itself, but with “Save for Web”, you can easily get a reduction in file size of 85%.

• How to Use the Photoshop Save for Web Tool
• Speed Up Your Website with Better Image Optimization in Photoshop

Lossless Optimization

For many years, the first two tips were about as good as you could get. But recently, researcher Stoyan Stefanov from Yahoo demonstrated how you can compress images even further without loss of quality.

Stefanov actually outlined seven different tips for optimizing images, which can yield additional 10-30% increases in speed. Luckily there are some tools that implement his methods for you; Smush.It and PunyPNG are two such services. They require you to manually upload your original images and then download the compressed versions. For easiest maintenance, you could set up a content delivery network (CDN) or dedicated server that compresses and caches your images automatically.