HTML Image Tag: Embedding Images with Responsive Options

Table of Contents

HTML `<img>` Tag

The <img> tag is used to embed images into an HTML document. It is an inline element, meaning it does not create a line break before or after itself. The <img> tag is a void element, meaning it does not have a closing tag; instead, it uses attributes to define the image source and other properties.

Syntax

<img src="url" alt="alternative text" width="pixels" height="pixels" srcset="image-set" sizes="sizes-query">

Attributes

Attribute	Value	Description
`src`	URL	Specifies the path to the image file. This is a required attribute.
`alt`	text	Provides alternative text for the image, used when the image cannot be displayed, for screen readers, and for SEO. This is also a required attribute.
`width`	pixels	Sets the width of the image in pixels.
`height`	pixels	Sets the height of the image in pixels.
`srcset`	URLs with width descriptors or density descriptors	Specifies a list of image files that can be used depending on the screen width or pixel density. This is crucial for responsive images.
`sizes`	media queries with sizes	Specifies the size of the image relative to the viewport for different screen sizes. Used with `srcset` for responsive images.
`loading`	`eager`, `lazy`	Specifies whether the browser should load the image immediately or delay loading until it's closer to the viewport.
`decoding`	`sync`, `async`, `auto`	Specifies a hint to the browser how the decoding of the image can be done for better performance.
`ismap`	`ismap`	Specifies that the image is part of a server-side image map. When the user clicks on the image, the click location coordinates are sent to the server.
`usemap`	`#mapname`	Specifies that the image is part of a client-side image map, and references the map id.
`crossorigin`	`anonymous`, `use-credentials`	Specifies if cross origin images should be fetched with credentials.
`referrerpolicy`	`no-referrer`, `no-referrer-when-downgrade`, `origin`, `origin-when-cross-origin`, `same-origin`, `strict-origin`, `strict-origin-when-cross-origin`, `unsafe-url`	Specifies the referrer policy for the image when it is fetched.

Example

<img src="images/example.jpg" alt="A beautiful landscape" width="500" height="300">

This basic example displays the example.jpg image, set to a width of 500 pixels and height of 300 pixels, and provides alternative text for accessibility and SEO purposes.

More Examples

Responsive Images Using `srcset` and `sizes`

<img
  srcset="images/small.jpg 320w,
          images/medium.jpg 640w,
          images/large.jpg 1024w"
  sizes="(max-width: 320px) 280px,
         (max-width: 768px) 600px,
         1000px"
  src="images/default.jpg"
  alt="A responsive image"
>

In this example:

srcset provides different image sources based on screen width. 320w, 640w, and 1024w denote the width of the respective images.
sizes defines the display size based on media queries.
- If the viewport is 320px or less, the image will occupy 280px.
- If the viewport is 768px or less, the image will occupy 600px.
- Otherwise, it will occupy 1000px.
src is used as a fallback in case srcset isn't supported.

Using `loading="lazy"` for Performance

<img src="images/large-image.jpg" alt="A large image" loading="lazy">

This example utilizes the loading="lazy" attribute to delay loading the image until it's near the viewport, which improves initial page load time, especially for pages with many images.

Using `decoding` for Better Performance

<img src="images/example.jpg" alt="Example Image" decoding="async">

This example uses decoding="async" to allow the browser to decode the image asynchronously so other content can be displayed first, resulting in better perceived load times.

Using `ismap` and `usemap` for Image maps

<img src="image-map.jpg" alt="Image map example" ismap>
<map name="imagemap">
  <area shape="rect" coords="0,0,100,100" href="area1.html" alt="area 1">
</map>
<img src="client-side-map.jpg" alt="Client side image map" usemap="#imagemap">

In this example, the first image is a server-side image map and when user clicks on that image the coordinates are sent to the server. The second image is an example of a client side image map, where we have areas defined that are interactable, we use the usemap attribute and link it to the map with id #imagemap.

Using `crossorigin` and `referrerpolicy`

<img src="https://example.com/image.jpg" alt="Cross-origin image" crossorigin="anonymous" referrerpolicy="no-referrer">

This example shows how to include cross-origin images and specify the referrer policy which provides added security.

Browser Support

The <img> tag is supported in all major browsers, including:

Chrome
Edge
Firefox
Safari
Opera

The srcset and sizes attributes are widely supported for responsive images. The loading="lazy" attribute also enjoys broad support, with browsers that don't support it gracefully falling back to immediate loading. The decoding, ismap, usemap, crossorigin and referrerpolicy attributes also have very good support on modern browsers.

Notes and Tips

Always provide an alt attribute to describe the image for accessibility and SEO.
Use responsive image techniques (srcset and sizes) for various devices and screen sizes.
Consider using loading="lazy" to improve initial page load performance, especially for below-the-fold images.
If you are using the ismap attribute, make sure you have an appropriate server side process to handle click coordinates.
When using usemap, make sure you define the interactive areas in the map and link it with the #mapname correctly.
Use appropriate crossorigin and referrerpolicy for security when fetching images from cross-origin sources.
Always optimize your images for the web to reduce file size and improve page load time.
Image formats such as WebP offer better compression and quality than JPEG and PNG; use it where possible and provide a JPEG/PNG fallback.