HTML <img> Tag Tutorial - Usage, Syntax, Attributes and Example

INTRODUCTION

The HTML <img> element is use to display image in webpage. Every image has its own dimensions known as intrinsic height and width. It is an inline element. Hence it takes as much space as its intrinsic width.

It is void element (means it does not have child node and it must not have end tag).

<img src="--path--" alt="--text--" />

ATTRIBUTES

The HTML img Tag has attributes which defines various functionalities. We will discuss all the attributes in detail. The attributes are listed below.

• src
• alt
• height
• width
• loading - lazy, eager
• crossorigin - anonymous, use-credentials
• decoding - async, sync, auto
• fetchpriority - high, low, auto
• sizes
• srcset
• ismap
• usemap

This attribute is used to specify path/URL to image. It can take relative path if image is hosted locally or absolute URL if image is taken from another website.

<img src="./images/computer.png" alt="" /> 

This attribute is text description of image. It is shown when image fails to load due to slow network speed or code error, so that user can know what image is about.

<img src="./images/computer.png" alt="An Computer"/>

Alt attribute also helps in:

• SEO: It informs search engines what image is about. (Image file name and its description are important for SEO. Hence it is useful to give meaningful name and accurate description to image. In this example computer.png is used instead of any random name like image11.png also the description accurately describes the image)
• Screen reader: This attribute is helpful for accessibility. Screen readers read the attribute value aloud to inform users about the image's meaning.

This attribute is used to specify the intrinsic Height of image. Intrinsic height means the original height of image. Its value Must be an integer without a unit.

<img src="./images/computer.png" alt="An Computer" height="500" /> 

This attribute is used to specify the intrinsic width of image. Intrinsic width means the original width of image. Its value Must be an integer without a unit.

<img src="./images/computer.png" alt="An Computer" width="400" /> 

Lazy loading is a technique that defers the loading of offscreen images until they are needed, improving page load speed and performance. The browser loads the image only when it is about to enter the viewport (become visible on the screen). This reduces initial page load time and saves bandwidth, especially for pages with many images. The Possible Values it can take are listed below:

It delays loading the image until it comes close to the viewport, based on the browser's calculated distance.

Image is loaded as soon as possible or immediately. It is default behaviour of browser.

<img src="./images/computer.png" loading="lazy" alt="An Computer" />

The crossorigin attribute provides support for CORS. Cross-Origin Resource Sharing(CORS) is a mechanism that allows server to specify any origins (meaning external server/website) other that itself from which browser is permitted to access resources. For security reasons Browsers restrict cross-origin requests

This attribute defines whether user credentials should be sent during CORS request. User Credentials are generally cookies, TLS client certificates or HTTP authentication header containing username and password. By default these credentials are not sent in Cross-Origin request which makes a site vulnerable to Cross-site Request Forgery. The possible values of this attribute are listed below.

• anonymous: Cross-Origin request is performed without user-credentials.
• use-credentials: Cross-Origin request is performed using user-credentials.
• If this attribute is not present the resource is fetched without CORS request.
• If the value of this attribute is invalid, then it resolves to anonymous.

<img src="--path--" alt="--text--" crossorigin="anonymous"/>

The decoding attribute tells the browser how to decode (process) the image before displaying it on the webpage. It helps optimize performance by controlling how images affect rendering. The Possible Values it can take are listed below:

The browser decodes the image asynchronously, meaning it doesn’t block page rendering. It is recommended for performance.

The browser decodes the image immediately, which might block rendering but ensures the image is displayed as soon as possible.

The browser decides the best decoding strategy based on the situation. This is the Default behavior.

This attribute is used to specify the relative priority when fetching the image. It helps optimize performance by prioritizing critical images and deprioritizing less important ones. The

<img src="./images/computer.png" fetchpriority="high" alt="desktop" /> 

The possible values of this attribute are listed below.

• high - It Loads the image with a higher priority compared to other images.
• low - It Loads the image with a lower priority compared to other images.
• auto - No specific fetch priority is assigned. This is the default behavior and applies when no value or an invalid value is provided.

The sizes attribute is used to specify the expected display size of the image under various conditions. These conditions are specified using media queries. The value of this attribute is a comma-separated list of media queries and image widths. Each condition consists of the following components.

• media query - It specifies properties of the viewport, not of the image
• space
• Width of Slot - It specifies the width of rendered image i.e. width of displayed image.

Don't worry if this doesnt make sense now. This attribute works in conjunction with srcset attribute which is discussed next. Both these attributes are explained in detail along with examples below.

The srcset attribute is used to specify Different versions of an image and what size each image is. Its value is a comma separated list of strings with each string specifying an image. Each strings contains the following information.

• An URL of the Image.
• An Optional whitespace followed by
  • width descriptor or
  • pixel density descriptor

The width descriptor is used to specify image's intrinsic width in pixels of each image version. It is denoted by a positive integer followed by a "w" as opposed to "px". One w is the width of one pixel.

The width descriptor is generally used to specify zoomed-in or zoomed out versions of same image to save bandwidth. On narrower screens like mobile showing a full scale image is of no use as user is not able to see image details and it takes take to load large image.

If the srcset attribute uses width descriptors, the sizes attribute must also be present, or the srcset itself will be ignored.

<img
 srcset="sports-car-320w.png 320w, sports-car-600w.png 600w sports-car-1200w.png 1200w"
 sizes="(max-width: 60rem) 33vw, (max-width: 80rem) 50vw, 100vw"
 src="sports-car.png"
 alt="A sports Car" />

In the above Example, three images are specified at different resolutions. The width of first image is 320px, width of second image is 600px and that of third image is 1200px. The src attribute acts as a fallback mechanism, it is used when srcset attribute is not supported by browser.

In the above Example, through the sizes attribute you are telling the browser that if the viewport is 60rem or smaller than the width of image should be 33vw.
For viewport width between 60rem and 80rem the width of image should be 50vw
For any other condition display the image at full width of screen (100vw).

With both these attributes in place, the browser will:

• Consider factors like screen size, pixel density, zoom level, screen orientation, and network speed.
• Determine which media query in the sizes list is the first to be evaluated as true.
• Identify the slot size assigned to that media query.
• Select the image from the srcset list that matches the slot size or, if an exact match isn't available, choose the next larger image.

The pixel density descriptor is used when you want to show same image on different screens with different resolutions. You can Enhance the user experience on high-resolution displays by delivering a higher-resolution version of the image.

A pixel density descriptor is a positive floating point number directly followed by x. It is written after the image URL. If no descriptor is specified, the image is assigned the default descriptor of 1x density. In case of pixel density descriptor, the sizes attribute is not used.

The density descriptor describes the pixel density of the image in relation to the image in the src attribute. The below example will make it clear.

<img
 srcset="sports-car-small.png 1x, sports-car-medium.png 2x, sports-car-large.png 3x"
 src="sports-car-small.png"
 alt="A sports Car" />

• Let's assume the image in src attribute have an of resolution of 100 x 50 pixels and it represents 1x image.
• The same image with 200 x 100 resolution will be represented as 2x image and this image will look clear on a display with twice the pixel density of standard display.
• Similarly, The same image with 300 x 150 resolution will be represented as 3x image and this image will look clear on a display with thrice the pixel density of standard display.

The srcset attribute is used to specify that image is part of a server-side map. In HTML Image map is used to define clickable areas in an image. These clickable areas are then associated with different links. It is a boolean attribute.

In HTML image-map is of two types - client-side and server-side. In Client-side Image map the processing is done by browser. In Server-side Image map the processing is done by Server. The browser only sends the coodinate of clicked location to server. The server then takes the desired action.

<img
 srcset="sports-car-small.png 1x, sports-car-medium.png 2x, sports-car-large.png 3x"
 src="sports-car-small.png"
 alt="A sports Car" />

The usemap attribute is used to associate the image with a client-side image map defined by a <map> element. Its value is the URL of <map> element.

This allows you to define multiple clickable areas (using <area> elements) on a single image. When a user clicks on one of these areas, they can be directed to different URLs or trigger different actions.

<map name="exampleMap">
 <area shape="rect" coords="34,44,270,350" href="page1.html" alt="Link to Page 1">
 <area shape="circle" coords="337,300,44" href="page2.html" alt="Link to Page 2">
 <area shape="poly" coords="290,172,333,250,300,330,250,250" href="page3.html" alt="Link to Page 3">
</map> 


<img src="example.jpg" alt="Example Image with Map" usemap="#exampleMap"/>

                
                

Frequently Asked Questions (FAQ)