Stretching Images

Using Image Stretching Wisely in Web Design

When you first learn to work with HTML images, a common mistake is to set the height and width attributes without thinking about the image’s real dimensions. If the numbers you enter don't match the pixel size of the source file, the browser will have to reshape the picture to fit the requested space. The result is a warped, pixelated image that looks nothing like the original. To avoid this, always confirm the image’s real resolution before you publish.

Take a look at the two examples below. The first image has been forced into a 300 × 100 pixel box even though the original file is only 200 × 130 pixels. The browser stretches the picture horizontally and compresses it vertically, producing a wide, shallow shape that loses the detail and color balance. The second image, in contrast, is displayed at its native size of 200 × 130 pixels, keeping the aspect ratio intact and preserving the original look.