5/20/2021

The image element is used to place an image on screen. This is a void element. The Alt attribute should also be used.

<img src="image.jpg">

Alt Attribute

The alt attribute provides a simple method to provide alternative text for the image. This supports designing for the one web by enhancing accessibility.

<img src="image.jpg" alt="Text describing the image">

Width and Height Attributes

These optional attributes are used to specify the width and height of the image. These can help increase the perceived load-time of the page as the browser can reserve the space required for the image while rendering the rest of the document.

<img src="image.jpg" width="800px" height="auto">

Figure and FigCaption Elements

The figure and figcaption elements are used in conjunction with the image element. Figure provides context to the image, while figcaption provides a caption.

Note that the image has a maximum width of 100%, while the figure has a width of 640 pixels. Since the image is contained within the figure, the image will display at a maximum width of 640 pixels. If no width is specified for the image, the image will display at actual size.

HTML

<figure>
<img src="fcf.jpg" alt="Alley Spring Mill">
<figcaption>Alley Spring Mill</figcaption>
</figure>

CSS

figure {
        width: 800px;
        border: thin solid black;
        padding: 5px;
        }
        
        figcaption {
        text-align: center;
        font-family: Papyrus, fantasy;
        }
        
        img {
        max-width: 100%;
        }

Loading Attribute

Images are expensive in terms of bandwidth and download speed -- only load what you need! HTML now includes a standard method of lazy loading images (lazy loading refers to only downloading images when they are going to appear in the viewport).

The loading attribute enables this. There are three possible values: auto, lazy, and eager. Auto is the default and is the same as not including the loading attribute. Lazy delays loading the image until it reaches a set distance from the viewport, while eager requests the image immediately.

<img src="image.jpg" loading="lazy" alt="Text describing the image">

Note that the image element is often used with the figure and figcaption elements.