HTML Images

The tag in HTML images is used to insert images into web pages. There is no need for a closing tag because this tag closes on its own. The src (source) & alt (alternative text) properties are the most crucial ones as they regulate how an image is displayed among other characteristics.

This is the fundamental framework for inserting an image:

<img src="image-url.jpg" alt="Description of the image">

Common Attributes for <img> Tag

Src (Source):

Gives the picture file’s URL that you wish to display.

Description

Gives the location of the image file.

<img src="path-to-image.jpg">

Alt (Alternative Text):

Contains a backup text in case the image is not able to be viewed. It helps with accessibility and SEO as well.

Description

Describes the image with replacement text that is displayed in the event that the image cannot be loaded or is utilized by a screen reader for accessibility.

<img src="path-to-image.jpg" alt="A description of the image">

Width and Height:

Gives the image’s width and height as pixels or percentages.

Description

Indicates the image’s width (either in percentage terms or pixels) and
gives the image’s height (either in pixels or as a percentage).

<img src="path-to-image.jpg" width="500" height="300">

Title:

Gives more details about the image as the user mouses over it.

Description

Gives more details about the picture; these are usually displayed as a popup when the user moves their cursor over the picture.

<img src="path-to-image.jpg" alt="Image description" title="Image Title">

Loading:

Regulates the loading of photographs, especially for speed (lazy loading).

Description

Specifies the loading method for the image (e.g., sluggish loading).

Lazy:

Waits to load until the user moves the cursor close to it.

Lager:

Loads the picture right away by default.

<img src="path-to-image.jpg" loading="lazy">

Style:

It permits the use of CSS inside for styling, including margin, padding, and borders.

Description

A few CSS properties are directly specified on an HTML element by the style attribute. This makes it possible to quickly style an element by adjusting its margins, colors, and other attributes.

<img src="path-to-image.jpg" alt="Image description" style="border: 1px solid #ccc; padding: 10px;">

srcset (Source Set)

Enables you to designate distinct pictures (responsive images) for various screen resolutions or devices.

Description

Describes a collection of photos for responsive design that come in various sizes or resolutions. Based on the display size and pixel density, the browser chooses the optimal image.

<img src="small.jpg" srcset="large.jpg 1024w, medium.jpg 640w" sizes="(max-width: 600px) 100vw, 50vw">

Usemap

Connects the picture to a client-side image map so it can be clicked in many places.

Description

An image can be linked with a client-side images map, that defines clickable areas inside the image, using the usemap attribute. The usemap attribute’s value must coincide with the element’s name or id attribute, which holds the locations and clickable actions.

<img src="image.jpg" usemap="#imagemap">

crossorigin

specifies the appropriate way to retrieve the image in relation to Cross-Origin Resource Sharing, or CORS.

• Anonymous: Submits a request devoid of login information.
• Sends an inquiry with credentials when using use-credentials.

Description

regulates the image fetching process when handling requests from different origins

<img src="image.jpg" crossorigin="anonymous">

Sizes

Description

It specifies the portion of the window width that the picture should occupy when used in conjunction with srcset.

<img src="image.jpg" srcset="image-320.jpg 320w, image-640.jpg 640w" sizes="(max-width: 600px) 100vw, 50vw" />

Decoding

Specifies how the picture should be decoded by the browser.

Description

The browser receives instructions on how to break down the image via the decoding attribute. Performance may be impacted by how the web browser handles image decode and rendering for the page, which is helped to regulate by this.

• Synchronize: Quickly decodes the picture.
• Async: By default, the picture is decoded asynchronously.

Example of a Full <img> Tag

<img src="https://example.com/photo.jpg" alt="Beautiful landscape" width="600" height="400" title="Nature Landscape" loading="lazy">

With a given size, title, and slow loading to speed up page loads, this code will show a landscape image.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Example</title>
    <style>
        /* Simple styling for the image */
        .styled-img {
            border: 2px solid #333;
            border-radius: 10px;
            box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5);
            max-width: 100%;
            height: auto;
        }
    </style>
</head>
<body>

    <h1>Image in HTML Example</h1>

    <p>This is an example of an image embedded in HTML:</p>

    <!-- Applying the image -->
    <img src="https://via.placeholder.com/600x400" 
         alt="Placeholder Image" 
         width="600" 
         height="400" 
         title="This is a placeholder image" 
         loading="lazy" 
         class="styled-img">

    <p>This image has a border, shadow, and lazy loading enabled for performance optimization.</p>

</body>
</html>