Which attribute specifies the location of the image to be included in a web page?

How do we put an image on a webpage?

In order to put a simple image on a web page, we use the

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

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

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

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

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

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

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

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

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

The

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

Note: You should read A quick primer on URLs and paths to refresh your memory on relative and absolute URLs before continuing.

So for example, if your image is called

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

<img src="dinosaur.jpg" alt="Dinosaur" />

If the image was in an

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

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

And so on.

Note: Search engines also read image filenames and count them towards SEO. Therefore, you should give your image a descriptive filename;

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

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

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

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

But this is not recommended. You should host your own images, which in simple setups means keeping the images for your website on the same server as your HTML. In more advanced setups, you might use a CDN (Content Delivery Network) to deliver your images.

Warning: Never point your src attribute at an image hosted on someone else's website without permission. This is called "hotlinking". It is generally considered unethical, since someone else would be paying the bandwidth costs for delivering the image when someone visits your page. It also leaves you with no control over whether the image is removed or replaced with something embarrassing.

In general, you should host the images you want to use on your site. Keep in mind that many images you may find on the web are copyrighted. Before you host an image, you should make sure that one of these applies:

• You own the image.
• You have received explicit, written permission from the image owner.
• You have ample proof that the image is, in fact, in the public domain.

Our above code would give us the following result:

Note: Elements like

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

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

Note: You can find the finished example from this section running on GitHub (see the source code too.)

Alternative text

The next attribute we'll look at is

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

<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

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

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

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

• The user is visually impaired, and is using a screen reader to read the web out to them. In fact, having alt text available to describe images is useful to most users.
• As described above, the spelling of the file or path name might be wrong.
• The browser doesn't support the image type. Some people still use text-only browsers, such as Lynx, which displays the alt text of images.
• You may want to provide text for search engines to utilize; for example, search engines can match alt text with search queries.
• Users have turned off images to reduce data transfer volume and distractions. This is especially common on mobile phones, and in countries where bandwidth is limited or expensive.

What exactly should you write inside your

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

• Decoration. You should use CSS background images for decorative images, but if you must use HTML, add a blank

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

  8. If the image isn't part of the content, a screen reader shouldn't waste time reading it.
• Content. If your image provides significant information, provide the same information in a brief

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

  0 text – or even better, in the main text which everybody can see. Don't write redundant

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

  0 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

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

  8.
• Link. If you put an image inside

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

  3 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

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

  3 element, or inside the image's

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

  0 attribute – whichever works best in your case.
• 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. However, If you really can't avoid doing this, you should supply the text inside the

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

  0 attribute.

Essentially, the key is to deliver a usable experience, even when the images can't be seen. This ensures all users are not missing any of the content. Try turning off images in your browser and see how things look. You'll soon realize how helpful alt text is if the image cannot be seen.

Note: For more information, see our guide to Text Alternatives.

Width and height

You can use the

<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" />

<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" />

<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 yet loaded, you'll notice the browser is leaving a space for the image to appear in:

This is a good thing to do, resulting in the page loading quicker and more smoothly.

However, you shouldn't alter the size of your images using HTML attributes. If you set the image size too big, you'll end up with images that look grainy, fuzzy, or too small, and wasting bandwidth downloading an image that is not fitting the user's needs. 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.

Note: If you do need to alter an image's size, you should use CSS instead.

Image titles

As with links, you can also add

<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" />

<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 on mouse hover, just like link titles:

However, this is not recommended —

<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" />

It is better to include such supporting information in the main article text, rather than attached to the image.

Active learning: embedding an image

It is now your turn to play! This active learning section will have you up and running with a simple embedding exercise. You are provided with a basic

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

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

Earlier we said to never hotlink to images on other servers, but this is just for learning purposes, so we'll let you off this one time.

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

  <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" />
  

  6 and

  <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" />
  

  7 (hint: it is 200px wide and 171px high), then experiment with other values to see what the effect is.
• Set a

  <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" />
  

  8 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>Live outputh2>

<div class="output" style="min-height: 50px;">div>

<h2>Editable codeh2>
<p class="a11y-label">
  Press Esc to move focus away from the code area (Tab inserts a tab character).
p>

<textarea id="code" class="input" style="min-height: 100px; width: 95%">
<img>
textarea>

<div class="playable-buttons">
  <input id="reset" type="button" value="Reset" />
  <input id="solution" type="button" value="Show solution" />
div>

html {
  font-family: sans-serif;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}

const textarea = document.getElementById('code');
const reset = document.getElementById('reset');
const solution = document.getElementById('solution');
const output = document.querySelector('.output');
const code = textarea.value;
let userEntry = textarea.value;

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

const htmlSolution = '
';
let solutionEntry = htmlSolution;

reset.addEventListener('click', () => {
  textarea.value = code;
  userEntry = textarea.value;
  solutionEntry = htmlSolution;
  solution.value = 'Show solution';
  updateCode();
});

solution.addEventListener('click', () => {
  if (solution.value === 'Show solution') {
    textarea.value = solutionEntry;
    solution.value = 'Hide solution';
  } else {
    textarea.value = userEntry;
    solution.value = 'Show solution';
  }
  updateCode();
});

textarea.addEventListener('input', updateCode);
window.addEventListener('load', updateCode);

// stop tab key tabbing out of textarea and
// make it write a tab at the caret position instead

textarea.onkeydown = (e) => {
  if (e.keyCode === 9) {
    e.preventDefault();
    insertAtCaret('\t');
  }

  if (e.keyCode === 27) {
    textarea.blur();
  }
};

function insertAtCaret(text) {
  const scrollPos = textarea.scrollTop;
  let caretPos = textarea.selectionStart;

  const front = textarea.value.substring(0, caretPos);
  const back = textarea.value.substring(textarea.selectionEnd, textarea.value.length);
  textarea.value = front + text + back;
  caretPos += text.length;
  textarea.selectionStart = caretPos;
  textarea.selectionEnd = caretPos;
  textarea.focus();
  textarea.scrollTop = scrollPos;
}

// Update the saved userCode every time the user updates the text area code

textarea.onkeyup = function(){
  // We only want to save the state when the user code is being shown,
  // not the solution, so that solution is not saved over the user code
  if (solution.value === 'Show solution') {
    userEntry = textarea.value;
  } else {
    solutionEntry = textarea.value;
  }

  updateCode();
};

Annotating images with figures and figure captions

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

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

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 HTML

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

<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" />

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

The

<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" />

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

Note: From an accessibility viewpoint, captions and

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

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

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

A figure doesn't have to be an image. It 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, 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:

1. Wrap it in a

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

   7 element.
2. Copy the text out of the

   <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" />
   

   8 attribute, remove the

   <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" />
   

   8 attribute, and put the text inside a

   <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" />
   

   5 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:

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

html {
  font-family: sans-serif;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}

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

CSS background images

You can also use CSS to embed images into webpages (and JavaScript, but that's another story entirely). The CSS

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

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

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

The resulting embedded image is arguably easier to position and control than HTML images. So why bother with HTML images? As hinted to 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. Though, such images have no semantic meaning at all. They can't have any text equivalents, are invisible to screen readers, and so on. This is where HTML images shine!

Summing up: 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.

Note: You'll learn a lot more about CSS background images in our CSS topic.

Test your skills!

You've reached the end of this article, but can you remember the most important information? You can find some further tests to verify that you've retained this information before you move on — see Test your skills: HTML images.

Summary

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

Which attribute specify the location of the image to be included in the web page?

Which attribute should we use to specify the location of an image?

The tag has two required attributes: src - Specifies the path to the image. alt - Specifies an alternate text for the image, if the image for some reason cannot be displayed.

What is the tag used in inserting an image in a web page?

Which attribute is used to specify the location of an image file in HTML location source src URL?

The src attribute is used to specify the URL of the source image.