HTML Images

While text will make up most of a website's content, sometimes images can say more than a thousand words or add that extra spice to the site design. Thankfully it's very easy to implement images in HTML.

Image tag

To load images into a HTML document you can use the image tag <img src="..." width="" height="" alt="..." />. Note that it is a self-closing tag so don't forget the space and slash at the end. Similar to the href attribute of HTML links the src attribute (source) holds the absolute or relative address to an image file.

The optional width and height attributes set the size of the picture in pixels and can be set to the exact same values as the image source or to a bigger or smaller value to scale the image. Although these attributes are not required you should always try to use them, otherwise the web browser will have to calculate the image size while loading the page which can cause the content to jump around.

The alt attribute (alternative text) describes the image content and is displayed in case the image doesn't load. Note that alt is required for every image tag in order to be valid XHTML 1.0 strict. If you don't wish to provide an alt text you can simply put alt="". If possible you should always provide an image description, though, as it will help blind persons using screen readers or search engines like Google to know what your image is about.

HTML image:

Display:

Image links

Next to text links you can also use image links or a mix of both.

HTML image link:

Display:

This link starts here and ends here.

Image formats

Although this is better suited in detail for a web graphics tutorial, it's always good to know the different types of image formats you can use. Most browsers support the following 3 image types:

GIF

GIFs can contain at most 256 colors (also called a color palette) out of all the millions of colors you computer can display. They're best used for non-realistic graphics such as buttons, drawings and logos.

Having only limited colors makes these image files relatively small in file size which is always a good thing. It's also possible to specify one of these colors as transparent, meaning that instead of that particular color nothing will be drawn letting the background show through.

They also support animation by storing multiple GIF frames and playing them back as a sequence. It's not as widely used anymore, though, now that Flash is pretty much mainstream.

JPEG

JPEGs support 16.7 million colors and are thus best suited for realistic photographs. The image quality can range from great to very poor depending on the compression settings. Try to strike a balance between file size and quality as big files will cause your website to load slowly.

PNG

PNGs are a somewhat newer format in the web design landscape and are thought to replace GIFs. They support color palettes like GIFs as well as 16.7 million colors like JPEGs.

The perhaps most interesting feature is their support for alpha transparency. Each pixel can have its own transparency ranging from 0 to 100% (unlike GIFs where a pixel is either transparent or opaque) allowing for interesting effects such as anti-aliasing. It's supported in all modern browsers (Firefox, Opera, Safari, IE7). Unfortunately IE6 doesn't natively recognize the alpha transparency, though there exist some acceptable workarounds.