At a minimum, an image placed in an HTML document needs the following information:

1. <img src=”images/xs.gif” title=”Extra-Small Shirt” alt=”Extra-Small Shirt” />

In the example above the image will display on the web page it is embedded in at its native or natural size. If the image does not load for any reason, the title attribute value is preferentially used as a text substitute. This value is also used as pop-up text when the user leaves their mouse cursor over the image. The alt value is equal to the title value, and is left in place to meet validation standards and for older browsers (which will look to alt, rather than title for semantic information).

If the image is used for purely decorative purposes and has no semantic intent, alt and title must still be set, but may be set to null characters (i.e. alt="" title="").

The image must also be in the context of a block element: a heading, a list item, a div etc. We’ll use a paragraph, and add an inline style to the image:

1. <p><img src=”images/xs.gif” title=”Extra-Small Shirt” alt=”Extra-Small Shirt”
2. style=”width: 200px; height: 200px; float: right; margin-left: 2em; ” />
3. Shirts from the TightWaist Company are made using 100% natural cotton in a
4. manufacturing process that avoids the harsh chemical treatments and waste of
5. traditional techniques.</p>

Note that the position of the <img /> code inside the paragraph matters – moving the <img /> within the paragraph changes where the text wraps around the image.

Images do not have to be floated, but without this property text does not wrap around the image: instead, the lower edge of the image lines up with the baseline of the text in the block, assuming margin-top or margin-bottom are not applied.

Images are often given an inline style, as their size, orientation and position are usually unique. Like every other element, images can be given an id value. Images that share the same display properties can be addressed more efficiently via an embedded or linked style by using a class or a descendant selector.

The height and width values of the image should be the actual height and width of the image. The browser is not a visual editor, and changes to an image, including alternations of size, resolution and aspect ratio, will have a higher quality result if made in PhotoShop and and re-exported. Do not try to use CSS to create “thumbnails” of images – use PhotoShop to create new versions of the image instead.

However, don’t use PhotoShop to create borders on images. Doing so inevitably increases the number of pixels in an image, increasing file size; borders added in PhotoShop also mean that you must return to PhotoShop in order to make any changes. It is far more efficient to create border effects via CSS – for the following example, as a style sheet with images given a particular class:

1. img.catalog { height: 200px; width: 200px; border: 2px solid red; }

(If you want a multicolored border, experiment with adding an outline property with different values, or use some of the less common border styles).

Images that are inside an <a> tag will automatically have a blue border applied in older browsers. To remove this, set the border to an value of 0, or none. (This is often done as part of a CSS Reset)