Generally it is sufficient to specify only the width of an image,
allowing the browser to calculate the height based on the source image.
Otherwise, should someone replace the image with a
that happens to have different proportions, the resulting image will
appear squished or stretched to fit the original shape.
Images should never be given explict sizes in absolute units (e.g. pixels): in a large window they will look far too small, and in a small window too large.
This image has no explicit sizes set, and so will always have the same pixel size as the source image. If someone replaces that image with one of a different resolution, the appearance of your web page might drastically change.
This image has an absolute size specified (width: 80px;), and will always appear the same size regardless of the size of the source. Unfortunately it will always have the same resolution regardless of how one views it. On a low-definition device it will appear huge, while on a high-definition device it will appear tiny.
This image has a text-relative size (width: 8em;). If you resize your text font size, this image will similarly change in size.
This image has a page-relative size (width: 33%;).
As you resize your window wider or narrower,
this image will grow or shrink to preserve its size relative to
the window size (subject to
This is especially useful when one wants to preserve
the overall page layout on pages that might be viewed
on a large range of devices.
Note that as always, these CSS styles work only if the HTML code in the body contains no formatting instructions. Of course no good HTML code ever would, as its purpose is strictly to describe the content, not the appearance.