Images for the Web

Posted on Friday, 23rd October 2015 by admin Images are one of the most important visual elements of a web page.

Generally, you can say there are two uses of images:

Informational Images are used to convey information. They are part of the message of the web. Obvious examples include charts, but any image which is used to illustrate a point in the article is informational.

These images are not necessarily referred to in the text: photos of a news event, a landscape or even your cat would qualify.

Generally, you could argue that without the image, or a reasonable substitute, your article would be less complete. If the image were to change, then the message would also be changed even if only slightly.

Decorative Images enhance the aesthetics of the page, but contribute no information. If the image were to be unavailable, or if the image were to change, then it would have no impact on the article.

Obviously there is some overlap between the two roles. Informational images are also chosen for their artistic merit. It may also be possible to substitute an alternative image to get the same point across.

Decorative images, on the other hand, do contribute to the overall atmosphere of the page, and should at least be consistent with the message of the page if not actually adding to it.

The point is the role of the image will influence how you treat the image in HTML.

Missing Images

It stands to reason that if an image is part of the message, then a missing image will detract from that message.

Background Images

Background images should be

What about images?

Images are made up of dots — pixels. Ignoring CSS for a moment, an image will by default display at a resolution of 96 pixels per inch. Just like CSS.

You can distort an image by fiddling with its width and height attributes. These were meant to allow the browser to leave room for the image while waiting for the image to load, but they have also been used to distort an image to fit an allotted size.

They have also been used to squeeze in a high resolution image for some of the newer screens.

However, if you are preparing an image for the Web, and you have in mind a particular physical size for the image, just remember that the result should be at a resolution of 9

Alternative Resolutions