HTML: How to add images

Adding images in HTML

Images in your web page are important to make the content more dynamic and easier to understand. So how to insert an image correctly in HTML?

Simple example

This is the basic syntax:

<img src="/path/to/your/image.jpg" />

The img tag needs an src attribute which stands for "source", the source of your image file. In general you would add file formats like JPEG or PNG, but you can use other formats like for example WEBP, AVIF and SVG.

There are a few additional attributes that play an important role:

• width and height, defining the default dimensions of your image in the page, this is important because it tells the browser how much space to keep for showing your image when loading the document
• alt, one of the most important attributes, it defines the alternative text to show when the image cannot be loaded for some reason, it is also used for accessibility purposes, it should be empty if an image is decorative - it does not add meaningful context to the document - and it should be properly filled when an image is important inside the page, for example when you are explaining how to reach a certain place and show an image of the map
• loading and decoding, generally used for performance purposes, they can tell the browser how we want to load the image in the page, see the full example below
• sizes and srcset, used to create responsive images

Full example

Here is a complete example with the attributes we have seen so far:

<img src="images/photo-small.jpg"
alt="A beautiful sunset over the mountains."
srcset="images/photo-small.jpg 480w,
images/photo-medium.jpg 800w,
images/photo-large.jpg 1200w"
sizes="(max-width: 600px) 480px,
(max-width: 1024px) 800px,
1200px"
loading="lazy"
decoding="async"
width="1200"
height="800">

In particular, please note the Loading and Decoding attributes, better explained below. These are often used for improving the loading speed of the page. Width and Height are also important for the same reason. These attributes are generally useful for Google's Core Web Vitals.

Accepted Image Extensions, Loading, and Decoding

The <img> element supports a variety of image formats. The best format to use depends on the type of image and your specific needs, such as animation, transparency, or file size.

Commonly Accepted Extensions

• JPEG (.jpg, .jpeg): Best for photographs and images with lots of colors and gradients. It uses lossy compression, which means some quality is lost to achieve smaller file sizes.
• PNG (.png): Great for images with sharp lines, logos, and graphics that require transparency (alpha channel). It uses lossless compression, so no quality is lost.
• GIF (.gif): Ideal for simple animations and images with a limited color palette (256 colors). It also supports transparency.
• SVG (.svg): A vector image format that uses XML to define the image. It's perfect for logos and icons because it can be scaled to any size without losing quality.

Modern and Recommended Extensions

Modern browsers widely support newer, more efficient formats that offer better compression and quality.

• WebP (.webp): Developed by Google, WebP offers both lossy and lossless compression, resulting in significantly smaller file sizes than JPEG or PNG while maintaining good quality.
• AVIF (.avif): A high-performance format that offers even better compression than WebP. It supports a wide range of colors and features.

Loading and Decoding

The browser handles the process of loading and decoding images to display them on the page. You can provide hints to the browser to optimize this process, especially for page performance.

The loading attribute

This attribute provides a hint to the browser on how to handle the image's loading behavior.

• eager: The default behavior. The image is loaded immediately, even if it's not currently in the viewport.
• lazy: Defers loading the image until it is close to the user's viewport. This is a powerful technique for improving page load times, especially on pages with many images below the fold.

<img src="path/to/image.jpg" alt="A lazy-loaded image" loading="lazy">

The decoding attribute

This attribute provides a hint to the browser on how to decode the image. Decoding is the process of converting the image data into a format the browser can render.

• sync: Decodes the image synchronously, which can block the rendering of other content until the image is ready.
• async: Decodes the image asynchronously, allowing other content on the page to be rendered first. This can prevent "jank" on the page but might result in the image "popping in" later.
• auto: The browser decides the best decoding method. This is the default value.

<img src="path/to/image.jpg" alt="An image with async decoding" decoding="async">

Picture and figure image containers

The figure and picture elements are both used to handle images in HTML, but they serve different and complementary purposes.

Figure

The figure element is a semantic container used to group self-contained content, such as images, diagrams, code snippets, or even a poem, along with an optional caption. Its primary purpose is to give meaning and context to the content it holds.

It tells browsers and screen readers that the content inside is a single, independent unit that is related to the main document but can be moved or referenced elsewhere (like in a textbook or article) without disrupting the document's flow.

Its main child element is figcaption, which provides a descriptive caption for the content. This is crucial for accessibility, as it gives context to users who rely on screen readers.

Use it whenever you have an image that needs a caption or a description. It creates a piece of content that is semantically tied to its explanation.

Picture

The picture element is a powerful tool for responsive images. Its job is to provide the browser with multiple image sources and let the browser choose the most suitable one based on specific criteria.

Unlike the srcset attribute on an img tag, which is limited to providing different image resolutions, picture allows you to specify entirely different image files.

It must contain one or more source elements and a single, mandatory img element.

Each source element specifies an image file. You can use attributes like media to target different screen sizes or type to specify different image formats. The browser will evaluate these sources in the order they appear and use the first one it can support.

Use picture when you want to serve modern, optimized image formats (like AVIF or WebP) to modern browsers while providing a reliable fallback (like a JPEG) for older ones. It also lets you show a specific image for different screen sizes.

A picture tag can be put inside a figure wrapper, like so:

<figure>
    <picture>
        <source srcset="images/photo-large.avif" type="image/avif" media="(min-width: 1024px)">
        <source srcset="images/photo-medium.webp" type="image/webp" media="(min-width: 600px)">
        <source srcset="images/photo-small.jpg" type="image/jpeg">

        <img src="images/photo-fallback.jpg"
        alt="A beautiful sunset over the mountains."
        width="1200"
        height="800"
        loading="lazy"
        decoding="async">
        </picture>
        <figcaption>A vibrant sunset capturing the beauty of nature. Photo by XYZ.</figcaption>
</figure>

Conclusion

Now you know how you can add images in your page using the right HTML code. If you have any question, leave a comment below!

If this guide was useful, follow me on Facebook and subscribe on Youtube!

Also read:

• How to center text and divs
• PHP: How to connect to MySQL Database
• How to make Gettext work with PHP on Windows 11
• How to make Atom Beautify Work with PHP and PHP-CS-Fixer on Windows