Images in HTML

This post is base on Images in HTML on MDN, which really refreshed my views of the <img> element, and introduced me the <figure> element which always goes with <img>! I love it.

Alternative Text

As the best practice, always add alt attribute (sometimes you can remain it empty) to your <img> element, for reasons like:

  • The user is visually impaired, and is using a screen reader
  • You may want to provide text for search engines to utilize; for example, search engines can match alt text with search queries.

When alt should remain empty:

  • Decoration. You should use CSS background images for decorative images, but if you must use HTML, add a blank alt="". If the image isn’t part of the content, a screen reader shouldn’t waste time reading it.
  • Redundant content. Don’t write redundant alt text. How annoying would it be for a sighted user if all paragraphs were written twice in the main content? If the image is described adequately by the main text body, you can just use alt="".
  • Image as link. When you wrap your image with <a>, as our mission to provide accessible link text, you can write the text inside the same <a> element or inside the alt attribute – whichever works best in your case. If you choose the former option, you should use alt=""

Width and Height

Notice! Never use width and height attributes to alter the size of your images! Instead, use them to specify the real width and height of your image, it’s worthy because when the user has just come to the page and the image hasn’t been loaded, the broswer is leaving a space for the image to appear in.

But why not use width and height to alter the size of your image (if must, use CSS instead)? Because if you make it too big, the image will become grainy and fuzzy; if you make it too small, the used bandwidth for downloading the image and the displayed image is not matched; and if you don’t maintain the correct aspect ratio, the image will be distorted.

Image Title

As with links, you can also add title attributes to images, to provide further supporting information if needed.

However, this is not recommended — title has a number of accessibility problems, mainly based around the fact that screen reader support is very unpredictable and most browsers won’t show it unless you are hovering with a mouse (so e.g. no access to keyboard users).

It is better to include such supporting information in the main text area, rather than using the title attribute.

Annotate Images

We can use <figure> and <figcaption> to group images and its annotation together:

1
2
3
4
<figure>
<img src="img/green_banana.jpg" alt="A green banana" width="200" height="200" />
<figcaption>An immature banana from China.</figcaption>
</figure>

Appreciate the differences between the alt attribute of <img> and the <figcaption> element. <figcaption> describes the other content of the <figure> element, so you can have more than one image in a <figure> element.

Also, contents inside the <figure> don’t have to be images, they can be a code snippet, video, several tables or something else.

CSS Background Images

We can use CSS to embed images into webpages. CSS background-* properties are used to control background image placement, such as background-image can be used to place a background image on every paragraph:

1
2
3
p {
background-image: url("img/banana.jpg");
}

CSS background images are for decoration only. If your images have semantic meaning, use HTML <img> instead!

Miscellaneous

SEO

As the best pratice, for SEO and indexing purposes, you should put the images used in your website in an images/ subdirectory which is inside the same directory as the HTML page. Also, use descriptive filenames for your images because search engine read these names and count them towards SEO.

Replaced Element

Elements like <img> and <video> are sometimes referred to as replaced elements. This is because the element’s content and size are defined by an external resource (like an image or video file), not by the contents of the element itself.