As one of the most widely used HTML elements, the img tag is essential for displaying images on the web. While the src, alt, width, and height attributes are commonly used, there are several other attributes that are less well-known but can provide additional functionality and performance optimizations.

1. loading Attribute

The loading attribute was introduced in HTML5 and allows developers to control how images are loaded. By default, images are loaded as soon as they appear in the HTML document, which can cause slow page rendering and poor user experience, especially on mobile devices with slower connections. The loading attribute can be used to defer the loading of images until the user scrolls to the image’s location or otherwise interacts with the image.

There are two possible values for the loading attribute: lazy and eager. The lazy value instructs the browser to defer loading the image until it’s necessary, while the eager value instructs the browser to load the image immediately, regardless of its position in the document.

<img src="image.jpg" alt="Image" loading="lazy">

In this example, the loading attribute is set to lazy, indicating that the browser should defer loading the image until the user scrolls to it.

2. decoding Attribute

The decoding attribute was also introduced in HTML5 and allows developers to specify how the browser should decode the image data. When an image is loaded, the browser decodes its binary data into pixels that can be displayed on the screen. The decoding attribute can be used to optimize this process by telling the browser to decode the image asynchronously, which can improve page loading performance.

There are two possible values for the decoding attribute: async and sync. The async value instructs the browser to decode the image in the background, while the rest of the page continues to load. The sync value instructs the browser to decode the image synchronously, which means that the page loading will be blocked until the image is fully decoded.

<img src="image.jpg" alt="Image" decoding="async">

In this example, the decoding attribute is set to async, indicating that the browser should decode the image in the background to improve page loading performance.

3. sizes Attribute

The sizes attribute allows developers to specify the size of the image for different viewport widths. This is useful for responsive images that need to be displayed differently on different devices or screen sizes. The sizes attribute is used in conjunction with the srcset attribute to provide multiple image sources for different resolutions and devices.

The sizes attribute takes a list of media queries and sizes that correspond to each query. The sizes are specified as a string that represents the width of the image at a particular breakpoint. For example, (min-width: 800px) 50vw, 100vw means that the image should be displayed at 50% of the viewport width when the viewport is at least 800 pixels wide, and at 100% of the viewport width otherwise.

<img srcset="image-400.jpg 400w, image-800.jpg 800w, image-1200.jpg 1200w" sizes="(min-width: 800px) 50vw, 100vw" src="image-400.jpg" alt="Image">

In this example, the srcset attribute provides three image sources with different widths. The

sizes attribute specifies that the image should be displayed at 50% of the viewport width when the viewport is at least 800 pixels wide, and at 100% of the viewport width otherwise. The src attribute provides a fallback image for browsers that do not support the srcset and sizes attributes.

4. crossorigin Attribute

The crossorigin attribute is used to indicate if the image element can be loaded from a different origin than the HTML document. This is useful for security purposes and to prevent cross-site scripting attacks. When an image is loaded from a different origin, the browser will automatically include an Origin header in the request, which can be used by the server to determine if the request is allowed.

There are three possible values for the crossorigin attribute: anonymous, use-credentials, and an empty string. The anonymous value indicates that the image can be loaded from a different origin, but the response must not include any credentials such as cookies or authentication tokens. The use-credentials value indicates that the image can be loaded from a different origin, and the response can include credentials. The empty string value indicates that the image should be loaded from the same origin as the HTML document.

<img src="https://example.com/image.jpg" alt="Image" crossorigin="anonymous">

In this example, the crossorigin attribute is set to anonymous, indicating that the image can be loaded from a different origin, but the response must not include any credentials.

5. referrerpolicy Attribute

The referrerpolicy attribute is used to specify the referrer information that should be sent when the image is loaded. The referrer information is sent by the browser to the server and indicates the URL of the page that the request originated from. This information can be used by the server to determine how the image should be served and to track user behavior.

There are four possible values for the referrerpolicy attribute: no-referrer, no-referrer-when-downgrade, same-origin, and origin. The no-referrer value indicates that no referrer information should be sent. The no-referrer-when-downgrade value indicates that no referrer information should be sent when navigating from a secure site to a non-secure site. The same-origin value indicates that referrer information should be sent only when the origin of the page and the image are the same. The origin value indicates that only the origin of the page should be sent as referrer information.

<img src="https://example.com/image.jpg" alt="Image" referrerpolicy="no-referrer">

In this example, the referrerpolicy attribute is set to no-referrer, indicating that no referrer information should be sent when the image is loaded.

The img tag is an essential element for displaying images on the web, and these less popular and new attributes can provide additional functionality and performance optimizations. The loading and decoding attributes can be used to control how images are loaded and decoded, while the sizes attribute can be used to provide different image sources for different viewport widths. The crossorigin and referrerpolicy attributes can be used to improve security and privacy on the web. By using these attributes, developers can create more responsive, secure, and performant web applications.