Images in HTML

In the beginning, the Web was just text, and it was really quite boring. Fortunately, it wasn't too long before the ability was added to embed images (and other more interesting types of content) inside web pages. There are other types of multimedia to consider, but it is logical to start with the humble <img> element, used to embed a simple image in a webpage. In this article we'll look at how to use it in depth, including basics, annotating it with captions using <figure>, and how it relates to CSS background images.

How do we put an image on a webpage?

To put a simple image on a webpage, we use the <img> element. This is an empty element (meaning that it has no text content or closing tag) that requires a minimum of one attribute to be useful — src (pronounced sarc, sometimes spoken as its full title, source). The src attribute contains a path pointing to the image you want to embed in the page, which can be a relative or absolute URL, in the same way as <a> element href attribute values (you should read A quick primer on URLs and paths to refresh your memory before continuing.)

So for example, if your image is called dinosaur.jpg and it is sat in the same directory as your HTML page, you could embed the image like so:

<img src="dinosaur.jpg">

If the image was in an images subdirectory sat in the same directory as the HTML page (which is what Google recommends for SEO/indexing purposes), then you'd embed it like this:

<img src="images/dinosaur.jpg">

And so on.

You could embed the image using its absolute URL, for example:

<img src="https://www.example.com/images/dinosaur.jpg">

But this is pointless, as it just makes the browser do more work, looking up the IP address from the DNS server all over again, etc. You'll almost always keep the images for your web site on the same server as your HTML.

Our above code would give us the following result:

Alternative text

The next attribute we'll look at is alt — its value is supposed to be a textual description of the image, for use in situations where the image cannot be seen/displayed. For example, our above code could be modified like so:

<img src="images/dinosaur.jpg"
     alt="The head and torso of a dinosaur skeleton;
          it has a large head with long sharp teeth">

The easiest way to test your alt text is to misspell your filename. If for example our image name was spelt dinosooooor.jpg, the browser wouldn't display the image — it would display the alt text instead.

So, why would you ever see or need alt text? It can come in handy in a number of situations:

• The user is visually impaired, and using a screen reader to read the web out to them — in such a case, having alt text available to describe images is very useful indeed!
• As described above, you might have spelt the file or path name wrong.
• The browser doesn't support the image type. Some people still use text-only browsers, such as Lynx, which will display the alt text of any images.
• You want to provide some text for search engines to make use of — search engines can match alt text with search queries, for example.
• Users have turned off images to reduce data transfer and distractions (especially common on mobile phones, in countries where bandwidth is limited and expensive.)

What exactly should you write inside your alt attribute? It depends on why the image is there in the first place (in other words, what you lose if the image doesn't show up):

• Decoration. If the image is just decoration and isn't part of the content, add a blank alt="" so that, for eample, a screen reader doesn't waste time reading out content that is no use to the user. Decorative images don't really don't belong in your HTML anyway — CSS background images should be used for inserting decoration — but if it is unavoidable, alt="" is the best way to go.
• Content. If your image provides significant information, provide the same information in a brief alt text, or better yet, in the main text that everybody can see. Don't write redundant alt text (how annoying would it be for a sighted user if all the paragraphs were written twice in the main content?) If the image is described adequately by the main text body, you can just use alt="".
• Link. If you put an image inside <a> tags to turn an image into a link, you still must provide accessible link text — in such cases you may either write it inside the same <a> element or inside the image's alt attribute if that works better.
• Text. You should not put your text into images (if your main heading needs a drop shadow, for example, use CSS for that rather than putting the text into an image.) If you really can't avoid doing this, however, you should supply the text inside the alt attribute.

The key is to deliver a usable experience even when the images can't be seen, where users aren't missing any of the content. Try turning off images in your browser and see how things are. You'll soon realise how unhelpful alt text such as "logo" or "my favourite place" is, if the image cannot be seen.

Width and height

You can use the width and height attributes to specify the width and height of your image (you can find your image's width and height in a number of ways, for example on the Mac you can use Cmd + I to get the info display up for the image file.) Returning to our example, we could do this:

<img src="images/dinosaur.jpg"
     alt="The head and torso of a dinosaur skeleton;
          it has a large head with long sharp teeth"
     width="400"
     height="341">

This doesn't result in much difference to the display under normal circumstances, but if the image isn't being displayed (for example the user has just navigated to the page, and the image hasn't loaded yet,) you'll notice that the browser leaves a space for the image to appear in:

This is a good thing to do — it results in the page loading quicker and more smoothly.

You shouldn't however alter the size of your images using HTML attributes — if you set the size too big you'll end up with images that look grainy/fuzzy; too small, and you'll be wasting bandwidth by downloading an image that's far bigger than you need. The image may also end up looking distorted if you don't maintain the correct aspect ratio. You should use an image editor to put your image at the correct size before putting it on your webpage.

Image titles

In the same way as with links, you can also add title attributes to images to provide further supporting information if needed. In our example, we could do this:

<img src="images/dinosaur.jpg"
     alt="The head and torso of a dinosaur skeleton;
          it has a large head with long sharp teeth"
     width="400"
     height="341"
     title="A T-Rex on display in the Manchester University Museum">

This gives us a tooltip, just like with link titles:

Image titles aren't essential to include by any means, and it is often better to include such supporting information in the main article text, rather than attached to the image. They are useful in some circumstances however, for example in an image gallery when you have no space for captions.

Active learning: embedding an image

Ok, your turn! In this active learning section we'd like you to play with a simple embedding exercise. You are provided with a basic <img> tag; we'd like you to embed the image located at the following URL:

https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg

Yes, earlier we said to never hotlink to images on other servers. But this is just for demo purposes — we'll let you off just this once.

We would also like you to:

• Add some alt text and check that it works by misspelling the image URL.
• Set the image's correct width and height (hint; it is 200px wide and 171px high), then experiment with other values to see what the effect is.
• Set a title on the image.

If you make a mistake, you can always reset it using the Reset button. If you get really stuck, press the Show solution button to see an answer.

<h2>Input</h2>
<textarea id="code" class="input">
<img></textarea>
<h2>Output</h2>
<div class="output"></div>
<div class="controls">
  <input id="reset" type="button" value="Reset" />
  <input id="solution" type="button" value="Show solution" />
</div>

body {
  font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;
}

.input, .output {
  width: 90%;
  height: 10em;
  padding: 10px;
  border: 1px solid #0095dd;
  overflow: auto;
}

button {
  padding: 10px 10px 10px 0;
}

var textarea = document.getElementById("code");
var reset = document.getElementById("reset");
var code = textarea.value;
var output = document.querySelector(".output");
var solution = document.getElementById("solution");

function drawOutput() {
  output.innerHTML = textarea.value;
}

reset.addEventListener("click", function() {
  textarea.value = code;
  drawOutput();
});

solution.addEventListener("click", function() {
textarea.value = '<img src="https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg"\n     alt="The head and torso of a dinosaur skeleton; it has a large head with long sharp teeth"\n     width="200"\n     height="171"\n     title="A T-Rex on display in the Manchester University Museum">';
  drawOutput();
});

textarea.addEventListener("input", drawOutput);
window.addEventListener("load", drawOutput);

Annotating images with figures and figure captions

Speaking of captions, there are a number of ways that you could add a caption to go along with your image. For example, there would be nothing to stop you doing this:

<div class="figure">
  <img src="images/dinosaur.jpg"
       alt="The head and torso of a dinosaur skeleton;
            it has a large head with long sharp teeth"
       width="400"
       height="341">

  <p>A T-Rex on display in the Manchester University Museum.</p>
</div>

This is ok — it contains the content you need, and is nicely stylable using CSS. But there is a problem here — there is nothing that semantically links the image to its caption, which can cause problems for screen readers, for example (when you have 50 images and captions, which caption goes with which image?)

A better solution is to use the HTML5 <figure> and <figcaption> elements, which are created for exactly this purpose — to provide a semantic container for figures that clearly links the figure to the caption. Our above example could be rewritten like this:

<figure>
  <img src="images/dinosaur.jpg"
       alt="The head and torso of a dinosaur skeleton;
            it has a large head with long sharp teeth"
       width="400"
       height="341">

  <figcaption>A T-Rex on display in the Manchester University Museum.</figcaption>
</figure>

The <figcaption> element tells browsers and assistive technology that the caption describes the other content of the <figure> element.

Note that a figure doesn't have to be an image — a figure is an independent unit of content that:

• Expresses your meaning in a compact, easy-to-grasp way
• Could go in several places in the page's linear flow
• Provides essential information supporting the main text

A figure could be several images, a code snippet, audio or video, equations, a table, or something else.

Active learning: creating a figure

In this active learning section, we'd like you to take the finished code from the previous active learning section, and turn it into a figure:

• Wrap it in a <figure> element.
• Copy the text out of the title attribute, remove the title attribute, then put the text inside a <figcaption> element below the image.

If you make a mistake, you can always reset it using the Reset button. If you get really stuck, press the Show solution button to see an answer.

<h2>Input</h2>
<textarea id="code" class="input">
</textarea>
<h2>Output</h2>
<div class="output"></div>
<div class="controls">
  <input id="reset" type="button" value="Reset" />
  <input id="solution" type="button" value="Show solution" />
</div>

body {
  font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;
}

.input, .output {
  width: 90%;
  height: 10em;
  padding: 10px;
  border: 1px solid #0095dd;
  overflow: auto;
}

button {
  padding: 10px 10px 10px 0;
}

var textarea = document.getElementById("code");
var reset = document.getElementById("reset");
var code = textarea.value;
var output = document.querySelector(".output");
var solution = document.getElementById("solution");

function drawOutput() {
  output.innerHTML = textarea.value;
}

reset.addEventListener("click", function() {
  textarea.value = code;
  drawOutput();
});

solution.addEventListener("click", function() {
textarea.value = '<figure>\n  <img src="https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg"\n       alt="The head and torso of a dinosaur skeleton; it has a large head with long sharp teeth"\n       width="200"\n       height="171">\n  <figcaption>A T-Rex on display in the Manchester University Museum</figcaption>\n</figure>';
  drawOutput();
});

textarea.addEventListener("input", drawOutput);
window.addEventListener("load", drawOutput);

CSS background images

You can also use CSS to embed images into webpages (and JavaScript, but that's another story entirely.) The CSS background-image property — and the other background-* properties — are used to control background image placement. For example, to place a background image on every paragraph on a page you could do this:

p {
  background-image: url("images/dinosaur.jpg");
}

The resulting embedded image is arguably easier to position and control than HTML images, so why bother with HTML images? As hinted at above, CSS background images are for decoration only — if you just want to add something pretty to your page to enhance the visuals, this is fine, but such images have no semantic meaning at all — they can't have any text equivalents, are invisible to screen readers, etc. That is where HTML images shine.

So, if an image has meaning in terms of your content, you should use an HTML image. If an image is purely decoration, you should use CSS background images.

Summary

That's all for now — we have covered images and captions in detail. In the next article we'll move up a gear, looking at how to use HTML to embed video and audio in web pages.