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