/

The HTML `img` tag: Basics and Responsive Images

The HTML img tag: Basics and Responsive Images

In this blog post, we will explore the basics of working with images in HTML, specifically using the img tag. We will also learn about making images responsive using the srcset attribute. So let’s dive in!

The img tag

The img tag is used to display images on a web page. It is a self-closing tag and accepts various attributes to define the image source, alt text, dimensions, and more. Here’s an example of using the img tag with the src attribute:

1
<img src="image.png" />

You can use different types of image formats, such as PNG, JPEG, GIF, SVG, and WebP. The src attribute specifies the path or URL of the image file.

Alt text

The HTML standard requires the alt attribute to be present in the img tag. This attribute provides a text description of the image. It is essential for accessibility, as screen readers use it to describe the image to visually impaired users. Search engine bots also rely on alt text for indexing and understanding the content of an image. Here’s an example:

1
<img src="dog.png" alt="A picture of a dog" />

Dimensions

You can use the width and height attributes to specify the dimensions of the image. This helps the browser allocate space for the image and prevents layout shifts when the image fully loads. Both attributes accept numeric values in pixels. Here’s an example:

1
<img src="dog.png" alt="A picture of a dog" width="300" height="200" />

Responsive images using srcset

The srcset attribute allows you to provide multiple image sources for different screen sizes or pixel densities. This enables the browser to choose the most appropriate image to download, based on the device’s capabilities. By using srcset, you can improve performance and optimize the user experience.

Here’s an example of using the srcset attribute with multiple images:

1
2
3
4
5
6
<img src="dog.png"
 alt="A picture of a dog"
 srcset="dog-500.png 500w,
 dog-800.png 800w,
 dog-1000.png 1000w,
 dog-1400.png 1400w">

In the above example, we provide four additional images with different sizes using the srcset attribute.

To complement the srcset attribute, you need to use the sizes attribute. The sizes attribute defines how the image size is determined relative to the viewport. Here’s an example:

1
2
3
4
5
6
7
<img src="dog.png"
 alt="A picture of a dog"
 sizes="(max-width: 500px) 100vw, (max-width: 900px) 50vw, 800px"
 srcset="dog-500.png 500w,
 dog-800.png 800w,
 dog-1000.png 1000w,
 dog-1400.png 1400w">

In this example, the sizes attribute specifies the image sizes based on viewport conditions. Multiple conditions separated by a comma are allowed. For example, if the viewport width is less than 500px, the image is rendered at 100% of the viewport width (100vw).

To generate responsive images and corresponding srcset attributes, you can use a helpful website like https://responsivebreakpoints.com/.

That’s it! You now have a better understanding of the HTML img tag and how to make images responsive using the srcset attribute. Happy coding!

Tags: HTML, image tag, responsive images