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.
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.
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
- 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
altattribute – whichever works best in your case. If you choose the former option, you should use
Notice! Never use
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
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.
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
We can use
<figcaption> to group images and its annotation together:
Appreciate the differences between the
alt attribute of
<img> and the
<figcaption> describes the other content of the
<figure> element, so you can have more than one image in a
Also, contents inside the
<figure> don’t have to be images, they can be a code snippet, video, several tables or something else.
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:
CSS background images are for decoration only. If your images have semantic meaning, use HTML
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.
<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.