Images in HTML

Contents

1. <img> Element
   1. src
   2. alt
2. Practical Considerations
3. Summary
4. Playing Around
5. References

<img> Element

Unlike the other HTML tags we have seen, the <img> tag is completely self contained – there is no closing tag for it. This is because it doesn’t contain any content – it directly embeds an image into the document:

<img>

The example above is the simplest (and incorrect) usage and doesn’t display anything because there is no image associated with the tag.
How the <img> element is rendered by the client is controlled by various attributes

src

The attribute src is mandatory. Its value is a URL that identifies the image resource to be loaded. It can be:

• absolute – the full path to the image is specified. For example, http://example.com/image.jpg
• relative – the relative path from to the image from the current document is specified. For example, img/image.jpg says to locate the file image.jpg located in the folder img which is a subfolder in the directory from which this page is being served.

<img src="image.jpg">

<img src="img/image.jpg">

<img src="http://example.com/image.jpg">

Let’s explore each of these uses:

<img src="~/image.jpg">

In this case, the file image.jpg is assumed to be in the same location as the .html file loading this image. In other words, both your HTML and image file are in the same directory.

<img src="img/image.jpg">

In this case, the file image.jpg is in a subfolder called images that is located in the same folder as the .html file loading the image. In other words, img/ is a folder in the directory with your HTML file and the file image.jpg is located in that folder.¹

<img src="http://example.com/image.jpg">

In this case, the file image.jpg is being loaded from the domain example.com.²
As your webpages become more complex, it is a good idea to structure and organize your files. Having a separate images or img directory is a good idea.
Having said that, it is easy to go overboard in trying to structure and organize your files. If you have a handful of files, there is no problem in keeping them all in the same directory. If you have dozens of images, it might be a good idea to put them in their own subfolder.
For now, I recommend you either:

1. Place the images in the same folder as the .html file.
2. Place the images in a subfolder called /img or some other meaningful name.

As your webpages become more complex and you start creating sites with many pages, you will need to think about how to structure your resources.

alt

The alt attribute provides a text alternative for the image if it cannot be loaded. The image might not be loaded because it is unavailable or because the document is being viewed in a client that cannot display images (for example, a text reader for the visually impaired).

<img src="image.jpg" alt="some text">

This leads us to an interesting behaviour of images, they are not embedded as a separate block into the document but into the flow of the document. That is to say, an image is treated the same way as text:

<p>This is text with an <img src="image.jpg"> embedded
   in it</p>

In the above example, the image is embedded in the flow of the text, not apart from it. If the image is not available, and alt text is available, it is displayed in place of the image:

<p>This is text with an <img src="image.jpg" alt="image">
  embedded in it.</p>

The following rules govern how images and alt text are displayed by clients (or user agents):

1. If src is set and alt is set to “” (an empty string):
   • The image is decorative or supplemental to the content.
   • If the image is available and the user agent is configured to display that image, then the image is displayed.
   • Otherwise, the element represents nothing, and may be omitted completely.
2. If src is set and alt is set to a non-empty string:
   • The image is an important part of the content; the alt attribute gives a text equivalent for the image.
   • If the image is available and the user agent is configured to display that image, then the image is displayed.
   • Otherwise, the element represents the text assigned to the alt attribute.
3. If src is set and there is no alt attribute:
   • There is no textual equivalent for the image.
   • If the image is available and the user agent is configured to display that image, then the image is displayed.
   • Otherwise, the user agent should display some indication that there is an image that is not being displayed.
4. If there is no src attribute and the alt attribute is set to a non-empty string:
   • The value of the alt attribute is displayed.
5. If there is no src attribute and the alt attribute is set to an empty string (or there is no alt attribute):
   • There is nothing to display.

Practical Considerations

It should be obvious that, except for images like emojis or complex mathematical expressions, we, generally, do not embed images into the flow of the text. So the normal way to display images is to enclose them in their own paragraph tag (or some other tag to enclose them):

<p><img src="image.jpg"
  alt="a summary description of the image"></p>

This way, if you display multiple images, they stack up one on top of the other instead of flowing, like text, one after the other.
If the image is important to the document, it should have an alt attribute which gives a textual representation of the image. This way, if the image cannot be displayed, the user can still get a textual representation of the image.
If the image is only for decoration or, otherwise, unimportant, then set the alt attribute equal to the empty string (“”). This way, if the image cannot be displayed, the user won’t know about it (otherwise, the browser will indicate a missing image).

Summary

• The <img> tag is a single tag with no closing tag and no content.
• The <img> tag embeds the specified source image into the flow of the document content.
• The src attribute specifies the name of the image and its location.
• The alt attribute specifies text to be displayed if the image cannot be displayed.
• To ensure images stack one on top of the other, place the image inside a paragraph.

Playing Around

The best way to learn is to play around with what you have learned.
Some webpage ideas are:

• update one of your previous webpages to include an image – or several images
• create a rebus³

References

1. <img> tag
2. src attribute
3. [alt attribute]https://html.spec.whatwg.org/multipage/embedded-content.html#attr-img-alt)