WEB DESIGN GARAGE [Electronic resources] نسخه متنی

Optimizing Image Size

Screen real estate is like physical real estate in midtown Manhattanabsurdly 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.

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 by tweaking the width and height attributes of the img tag (see Topic 29). But if you want to display an image at 60 by 30, fire up your graphics software and create a copy of the image at those precise dimensions. Otherwise, the browser still has to download the larger 300-by-150 file, and you don't shave off any download time.

Along similar lines, don't build excessive amounts of whitespace into your image file. Instead, crop the image to the size of whatever you want to display, and incorporate the whitespace into the design of the page.