HTML Images

HTML images are used to add visual content to your webpages. The <img> tag is used to embed images in HTML documents. The most important attributes of the <img> tag are src and alt.

Basic Image

A basic HTML image is created using the <img> tag with the src attribute to specify the image source and the alt attribute to provide alternative text.

Example
Try yourself 
        
            <img src="https://via.placeholder.com/150" alt="Placeholder Image">

In this example, the src attribute specifies the path to the image, and the alt attribute provides alternative text for screen readers and when the image cannot be displayed.

Image Sizes

You can control the size of an image using the width and height attributes. These attributes can be set in pixels or percentage values.

Example
Try yourself 
        
            <img src="https://via.placeholder.com/150" alt="Placeholder Image" width="200" height="200">

In this example, the image's width and height are set to 200 pixels.

Responsive Images

To create responsive images that scale well on different devices, you can use CSS to set the width to 100% and the height to auto.

Example
Try yourself 
        
            img {
    max-width: 100%;
    height: auto;
}

This example shows how to make an image responsive using CSS.

Image with Link

You can also use an image as a link by wrapping the <img> tag inside an <a> tag.

Example
Try yourself 
        
            <a href="https://www.lets-coding.com">
    <img src="https://via.placeholder.com/150" alt="Placeholder Image">
</a>

In this example, clicking the image will navigate to "https://www.example.com".

Image Map

An image map allows you to define clickable areas within an image, linking each area to different destinations.

Example
Try yourself 
        
            <img src="https://via.placeholder.com/400x200" alt="Image Map" usemap="#image-map">
<map name="image-map">
    <area shape="rect" coords="34,44,270,350" alt="Link 1" href="https://www.example.com/1">
    <area shape="circle" coords="337,300,44" alt="Link 2" href="https://www.example.com/2">
</map>

In this example, specific areas of the image are mapped to different links.

Lazy Loading

Lazy loading is a technique that delays the loading of images until they are needed, improving page load times. The loading attribute with the value lazy can be used to implement lazy loading.

Example
Try yourself 
        
            <img src="https://via.placeholder.com/150" alt="Placeholder Image" loading="lazy">

This example shows how to use the loading attribute to enable lazy loading for an image.

Important Notes

Here are some important notes and best practices when using images in HTML: