A student asks…
“Just to clarify, the primary purpose of the width and height attributes is to reserve space for the image, not to actually resize the image, correct? “
The width and height attributes on the img tag actually do both; they reserve the screen real-estate and also resize the image.
Reserving real-estate
When you think about, what is HTML markup? It is a collection of content surrounding by tags giving instructions to a browser. All of it is ASCII text. There are no embedded images or media like you might have in a pdf, or Word document. All resources other than text are referenced as external files. For example, look at the following example:
<img src="images/logo.gif" width="100" height="50" />
The browser is being instructed to reserve a place on the screen 100 pixels wide and 50 pixels tall for the logo.gif image, in the images directory, that will be referenced as an external file. Since all media resides outside the HTML file, then what we are doing is preparing a place on the screen where the media will be shown.
Providing Dimensions
The attribute values of width=”100″ height=”50″ state that a definite amount of screen space is being reserved. The image will be forced into those dimensions. If we do not provide the dimensions, the browser will calculate them based on the actual image dimensions; which may or may not throw off our design. Many designers recommend providing the dimensions to take that additional computational burden off the browser.
Here are some things to think about
- If the image dimensions we provide are not the same as the original dimension, some distortion will take place
- If the original image dimensions are much larger than the ones we specify in the attribute values, then we are wasting bandwidth. The entire image has to be downloaded and then resized before rendered. Why download a 1 MB image and resize it, if a 20 kB image will do?
- If the original image dimensions are much smaller than the ones we specify in the attribute values, then the image will appear pixelated because it is being scaled up.
Best practices
Remember, you always have to think about the output. Keep different versions of the image to be used for different output resolutions. For example, if you have a 1 MB version of a logo for printed material, resize it for web delivery. Determined how many colors, and what size you need for the screen and then save an appropriate version for the web that has the needed dimensions, color depth, and resolution (72ppi). Put those dimensions into the width and height attribute values of your <img> tag. In that way, the image is web optimized. What you see in your image editing program is what you see on your web page. You are taking the resizing calculation burden off the browser, maximizing bandwidth, and preventing your image from distortion problems.