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

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.