Webwork
/
Image Size Tags

Images used on Web pages should be no larger than necessary. A very common error made by inexperienced Web designers is to use images that are way too large and then use HTML size tags to make them display at smaller sizes in the browser. This is a waste of bandwidth that can greatly slow the loading of the page.

Here's an example.

Image size tags

Pixels:

Source:
<img src="images/ape-silverback.jpg" alt="Photo of Ape Silverback" width="150" height="150" />
Web page:
Photo of Ape Silverback

Percentage (not supported in HTML5):

Source:
<img src="images/ape-silverback.jpg" alt="Photo of Ape Silverback" width="30%" />
Web page:
Photo of Ape Silverback

Note that the percentage is not based on the original image size. It is based on the size of the container in which the image is placed on the page—above, the image is 30% of the width of the gray-bordered box it is placed in. Much more on this topic when we get to stylesheets.

When using percentage sizing, only the width or height is usually specified. The browser will maintain the image proportions based on that single size specification.

Downscaling and upscaling:

Source:
<p>Original 150px x 150px image:</p>

<img src="ape-silverback150.jpg" alt="150px photo of Ape Silverback" width="150" height="150" />

<p>Same image downscaled to 38px x 38px:</p>

<img src="ape-silverback150.jpg" alt="150px photo of Ape Silverback" width="38" height="38" />
Web page:

Original 150px x 150px image:

150px photo of Ape Silverback

Same image downscaled to 38px x 38px:

150px photo of Ape Silverback
Source:
<p>Original 38px x 38px image:</p>

<img src="ape-silverback38.jpg" alt="38px photo of Ape Silverback" width="150" height="150" />

<p>Same image upscaled to 150px x 150px:</p>

<img src="ape-silverback38.jpg" alt="38px photo of Ape Silverback" width="150" height="150" />
Web page:

Original 38px x 38px image:

38px photo of Ape Silverback

Same image upscaled to 150px x 150px:

38px photo of Ape Silverback

Images can be resized using the image size tags but this only works in one direction. Contemporary browsers are pretty good at rendering a downscaled image as in the top example but upscaling, which literally involves taking a limited amount of information and spreading it over a larger area, does not work.

Previous | Webwork Table of Contents | Next >
photographs:

Semblance Portrait Project
The Built World
Greece
Hungary/Czech Republic
Poland
Graffiti
Simple Truths
Israel


Paris
Puebla, Mexico
Spain
Along the Mississippi
Italy
Santa Fe
The Reliance Building
Providence
archive:

Webwork
The Web Page from Hell
The Portals Project
Transition
Insights
Internet Spelling Guide
Ape Silverback (Primate Ruminations)
Revenge of the Movie Poster
GIFs 4 Us
The Web Rules
Webpix
Backgrounds 4 Us
Webpaper
Digital Sketches
© Jay Boersma