Web Design Garage

Optimizing Image Size

Screen real estate is like physical real estate in midtown Manhattan—absurdly expensive. You get a lot more mileage out of your Web site if you use images with smaller physical dimensions (that is, smaller width and height values). Smaller images download faster than larger ones. Plus, by using smaller images, you can fit more information on the screen before your visitors have to scroll, and your site looks better on the compact displays of portable devices.

TIP When you shrink an image, run the resized image through a sharpening filter to bring out the detail.

While smaller is better, avoid using the browser to resize images for you. It's perfectly doable in HTML to turn a 300-by-150 image into, say, a 60-by-30 image ...