Image size

Truth

An image's size can be determined in three ways:

  1. By the inherent size of the image.  If you use an <img> tag and do not specify any height or width, either on that tag or your CSS, the image will appear at its inherent size.
  2. By a fixed height, width, or both which may override the inherent size.  The height or width may be specified within the <img> tag or in CSS.
  3. By a dynamic height, width, or both which overrides the inherent size, depending on some user-variable property, such as window or text size.

Consequences

If you use the inherent size, but do not specify height and width, the browser will be unable to reserve appropriate space for the image as it lays out the page, which is normally done before images are fetched.  When the image arrives, the page layout will have to be expanded to allow for the actual size of the image, with the result that already-displayed items will 'jump' from one position to another, possibly distracting the user.

If you specify a height and width that exactly match the inherent size of the image, this jumping will be avoided.

If you specify a height or width that differs from the inherent values, the browser will stretch or shrink the image to fit your specification.  This is a rather brute-force process.  To shrink the image, the browser discards rows or columns of pixels; to expand it, the browser duplicates rows or columns of pixels.  Current browsers do not make any attempt to smooth or 'dither' the resulting image, so image quality is reduced.  This is most evident with straight lines which are neither vertical nor horizontal; they will acquire a stair-stepped appearance.  Depending on the image content and the amount of size change, its perceived quality may be significantly degraded.

If you specify a height or width that is less than the inherent value, e.g. to create a thumbnail image from a full-sized one, the browser will still download the entire image.  Depending on how much difference there is in the two sizes, this can result in significantly more download time than is really needed. (See Bandwidth and page size).

Although browsers will resize an image, they do not resize associated image maps.  If you resize the image, the hotspots in the map will no longer correspond with the intended part of the image.  Some hotspots may even map outside the image boundary, becoming unselectable.  This is certain to confuse users.

[Nothing technical prevents browsers from doing more sophisticated resizing of images, nor from making corresponding adjustments to their associated image maps.  Perhaps someday.]

If you specify both height and width and do not maintain the aspect ratio (the ratio of height to width) of the inherent image, the image will be distorted.  This can result in things like a slim model in an evening gown looking like a short, squat girl.

Recommendations

Tips

  1. Review what happens with various image sizing specifications on the Image size samples pages.
  2. Always specify height= and width= within the <img> tag, unless the image is to be dynamically sized.  This will allow the browser to reserve the proper amount of space for the image even before it has fetched your CSS.  (Yes, this is a rare case where the author recommends putting presentational information into the HTML).
  3. Never specify a fixed height or width that differs from the inherent values of the image.  Instead, resize the image itself with an image editor.  This will retain more of the original image quality.
  4. If you dynamically resize an image (specifying height or width in ems or percent), be aware that the quality of the resulting image will vary depending on the user's text or window size and will almost never appear as good as the original.
  5. Never resize an image if it has an associated image map.

Contents

Last revised 4 Feb 2006