Using Images in Your HTML5 Document

Posted on 2010-11-02 by Jan Vantomme
Tags: teaching, tutorial

Adding images to your HTML document can be done with the <img> tag. This tag has two required attributes: src and alt. You should also add the width and height attributes if you can. Note that this won't be possible in some content management systems.

src: Location (URL) of the image. (required)
alt: Altenate text for the image. (required)
width: Width of the image, in pixels.
height: Height of the image, in pixels.

The path in the src attribute links to images/photo.jpg. This means that the file photo.jpg is inside a folder named images. This images folder sits in the same place as the html file where you use this tag.

HTML5 adds some new semantic tags to use images: <figure> and <figcaption>. In previous versions of HTML it wasn't possible to add captions in a semantically correct way. You can use more than one image inside the figure tag, but the figcaption can only be used once.

<figure>
    <img src="images/photo.jpg" width="400" height="300" ¬
        alt="A descriptive text of the image" />
    <figcaption>A descriptive caption for the image.</figcaption>
</figure>

File Formats

Depending on the contents of your image, you need to choose a file format and try to keep your images as small as possible without losing quality. Use "Save for Web & Devices" in Photoshop to compare your options and choose the best file format for your image.

JPEG (Joint Photographic Experts Group)

JPEG is a lossy compression method for digital photography. This compression method is used to get small file sizes for photos without losing too much quality.

GIF (Graphics Interchange Format)

This image format has a palette of 256 RGB colors. It is mostly used for logos or images with large areas of the same color. GIF also has support for transparent pixels and animation. Never use this format for color photographs.

PNG (Portable Network Graphics)

This is the only file format for the web that supports RGBA. This means that you can get true transparency in your images. Note that older browsers like IE6 don't support alpha transparency.

PNG-8: An alternative to GIF. PNG-8 also has a palette of 256 colors and the filesize is often smaller than GIF.
PNG-24: This format has real alpha transparency. This files are usually bigger than any other format. Older versions of IE don't support PNG alpha transparency.

Best Practices

Never resize images in HTML: You could use a 4000 x 3000 pixel image straight from your camera and resize it in HTML with the width and height attributes of the <img> tag. This will result in slow downloads, and older computers may have problems displaying the image in the browser.
Always add the extension to your files.
Only use lowercase characters in your filenames and never use spaces. If you need to separate two words, use a hyphen or an underscore.
Keep your image files together in a separate images directory, not in the same place as your HTML files. This way, you'll have a better overview of your website when it grows.

Tweet this article