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

<img src="xs-shirt.png" alt="Extra-Small Shirt">

In the example above the image will display on the web page at its native or natural size. If the image cannot be seen for any reason, the alt attribute value will be displayed used as a text substitute.

An image will often appear in the context of a heading or paragraph:

<p><img src="xs-shirt.png" alt="Extra-Small Shirt" style="float: left">
Shirts from the TightWaist Company are made using 100% natural cotton…

Note that the position of the <img> code inside the element matters: moving the image within the paragraph will change how and where the text wraps around it.

Images do not have to be floated, but without CSS, text will not wrap around the image: instead, the lower edge of the image will line up with the text baseline .

A few hints and tips:

• As a general rule, images that are floated to the left within body text should have margin applied to their right, and vise-versa, to provide a visual “gutter” between text and illustrations.
• Images that share the same appearence are addressed more efficiently via an embedded or linked style and selectors.
• Don't use CSS to create “thumbnails” of images – use PhotoShop or another bitmap editor to make new small versions of the image instead.
• Don’t use PhotoShop to add borders or filters on images. Doing so inevitably increases the number of pixels in an image, increasing file size; borders or filters added in PhotoShop also mean that you must return to the application in order to make any changes. It is far more efficient to create borders and filters with CSS.

Photograph by Mohammed Nairooz, used under a Creative Commons Attribution-NonCommercial 2.0 Generic license

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.