HTML Image Attributes

HTML image attributes provide additional information and control over how images are loaded, displayed, described, and used on a webpage.

---

1. Introduction

The <img> element supports several attributes that control image behavior and provide useful information.

<img src="image.jpg"
     alt="Sample Image"
     width="400"
     height="250">

Common image attributes include: src, alt, width, height, title, loading, srcset, sizes, and usemap.

2. src Attribute

The src attribute specifies the location of the image. It can contain a relative path or an absolute URL.

<img src="images/logo.png" alt="Website Logo">

Relative Path

<img src="images/logo.png" alt="Logo">

Absolute URL

<img src="https://example.com/images/logo.png"
     alt="Example Logo">

3. alt Attribute

The alt attribute specifies alternative text for an image. It is useful when an image cannot be displayed and for accessibility.

<img src="student.jpg"
     alt="Student learning HTML">

4. width Attribute

The width attribute specifies the width of an image.

<img src="photo.jpg"
     alt="Photo"
     width="400">

5. height Attribute

The height attribute specifies the height of an image.

<img src="photo.jpg"
     alt="Photo"
     height="250">

6. width and height Together

Both dimensions can be specified together.

<img src="nature.jpg"
     alt="Nature"
     width="500"
     height="300">

7. title Attribute

The title attribute provides additional information about the image. Browsers may display it as a tooltip.

<img src="logo.png"
     alt="Company Logo"
     title="Company Logo">

8. loading Attribute

The loading attribute provides a hint to the browser about when an image should be loaded.

Value	Description
eager	The image can be loaded immediately.
lazy	The image can be loaded when it is near the visible area.

Example

<img src="images/banner.jpg"
     alt="Website Banner"
     loading="eager">

<img src="images/product.jpg"
     alt="Product Image"
     loading="lazy">

9. style Attribute

The style attribute can be used to apply inline CSS directly to an image.

<img src="photo.jpg"
     alt="Photo"
     style="width:300px; border-radius:10px;">

Common Styling Examples

<img src="photo.jpg"
     alt="Photo"
     style="width:300px; height:auto;">

<img src="photo.jpg"
     alt="Photo"
     style="border-radius:50%;">

<img src="photo.jpg"
     alt="Photo"
     style="border:2px solid black;">

10. class Attribute

The class attribute allows an image to be styled using CSS classes.

<style>
    .profile-image {
        width: 200px;
        height: 200px;
        border-radius: 50%;
    }
</style>

<img src="profile.jpg"
     alt="Profile Photo"
     class="profile-image">

11. id Attribute

The id attribute gives an image a unique identifier. It can be used by CSS or JavaScript.

<img id="mainLogo"
     src="logo.png"
     alt="Main Logo">

12. srcset Attribute

The srcset attribute allows you to provide multiple image sources for different display sizes or resolutions.

<img src="small.jpg"
     srcset="small.jpg 480w,
             medium.jpg 800w,
             large.jpg 1200w"
     alt="Responsive Landscape">

The browser can select an appropriate image from the available sources.

13. sizes Attribute

The sizes attribute can be used together with srcset to describe the expected display size of the image.

<img src="large.jpg"
     srcset="small.jpg 480w,
             medium.jpg 800w,
             large.jpg 1200w"
     sizes="(max-width: 600px) 480px,
            (max-width: 900px) 800px,
            1200px"
     alt="Responsive Landscape">

14. Responsive Image Example

<img src="large.jpg"
     srcset="small.jpg 480w,
             medium.jpg 800w,
             large.jpg 1200w"
     sizes="100vw"
     alt="Responsive Image"
     style="max-width:100%; height:auto;">

15. decoding Attribute

The decoding attribute provides a hint about how the browser should decode the image.

Value	Meaning
auto	The browser decides the decoding strategy.
sync	The image can be decoded synchronously.
async	The image can be decoded asynchronously.

<img src="photo.jpg"
     alt="Photo"
     decoding="async">

16. draggable Attribute

The draggable attribute can indicate whether an element can be dragged by the user.

<img src="logo.png"
     alt="Logo"
     draggable="false">

17. usemap Attribute

The usemap attribute associates an image with an image map.

<img src="office.png"
     alt="Office Layout"
     usemap="#officeMap">

An image map allows different areas of an image to act as links.

18. Image Map Example

<img src="office.png"
     alt="Office Layout"
     usemap="#officeMap">

<map name="officeMap">

    <area shape="rect"
          coords="0,0,200,150"
          href="reception.html"
          alt="Reception">

    <area shape="rect"
          coords="200,0,400,150"
          href="training.html"
          alt="Training Room">

</map>

19. Common Image Attributes

Attribute	Purpose	Example
src	Specifies the image location.	src="photo.jpg"
alt	Provides alternative text.	alt="Nature Photo"
width	Sets image width.	width="400"
height	Sets image height.	height="300"
title	Provides additional information.	title="Logo"
loading	Provides a loading hint.	loading="lazy"
srcset	Provides multiple image sources.	srcset="small.jpg 480w"
sizes	Describes expected image display size.	sizes="100vw"
class	Associates the image with CSS classes.	class="profile-image"
id	Provides a unique identifier.	id="mainLogo"

20. Accessibility Example

A descriptive alt value helps communicate the purpose of an informative image.

<img src="student.jpg"
     alt="Student writing HTML code on a laptop">

For a decorative image that does not add meaningful information, an empty alt attribute can be used.

<img src="decorative-line.png" alt="">

21. Common Mistakes

• Using an incorrect src path.
• Leaving out the alt attribute.
• Using incorrect width and height values.
• Distorting the image by changing only one dimension incorrectly.
• Using very large images without optimization.
• Using unclear alternative text.
• Using unnecessarily complex image attributes.

22. Practice Task

23. Complete Practice Example

<!DOCTYPE html>
<html>
<head>

    <title>Image Attributes Example</title>

    <style>
        .course-image {
            max-width: 100%;
            height: auto;
            border-radius: 10px;
        }
    </style>

</head>

<body>

    <h1>HTML Course</h1>

    <img
        id="courseImage"
        class="course-image"
        src="images/html-course.jpg"
        srcset="images/html-small.jpg 480w,
                images/html-medium.jpg 800w,
                images/html-large.jpg 1200w"
        sizes="100vw"
        alt="HTML programming course"
        title="HTML Course"
        loading="lazy">

</body>
</html>