Common Image Attributes
HTML images can have multiple attributes that define their source, size, behavior, and accessibility. Here’s a detailed breakdown:
| Attribute | Purpose | Example & Explanation |
|---|---|---|
src | Specifies the image source (local file or URL). | <img src="photo.jpg" alt="Photo"> – Loads an image named “photo.jpg”. |
alt | Provides alternative text when the image cannot load; important for screen readers and SEO. | <img alt="Company Logo"> – Describes the image for accessibility and search engines. |
width/height | Sets the dimensions of the image in pixels or percentage. | <img width="400" height="300"> – Displays the image at 400x300 pixels. |
title | Shows tooltip text when hovering over the image. | <img title="Beautiful Landscape"> – Tooltip appears on mouse hover. |
loading | Controls image loading behavior. - lazy: loads when the image is visible- eager: loads immediately | <img loading="lazy"> – Improves page performance by delaying offscreen images. |
crossorigin | Handles cross-origin image requests (from another domain). | <img crossorigin="anonymous"> – Fetches the image without sending user credentials. |
longdesc | Provides a link to a detailed description of the image. | <img longdesc="diagram-details.html"> – Useful for complex diagrams. |
referrerpolicy | Controls what referrer information is sent when fetching the image. | <img referrerpolicy="no-referrer"> – Hides the referring page URL. |
srcset | Allows multiple image sources for responsive design. | <img srcset="small.jpg 480w, large.jpg 1200w"> – Browser picks appropriate image based on screen width. |
sizes | Defines display sizes for different devices. | <img sizes="(max-width:600px) 480px, 800px"> – Chooses width based on screen size. |
usemap | Connects an image to an image map. | <img usemap="#map1"> – Makes parts of the image clickable via <map> and <area>. |
Responsive Images (srcset, <picture>)
Sometimes different devices need different image sizes or formats for better performance. HTML provides:
a) srcset (already shown later in attributes)
It allows browsers to choose the right image depending on screen size.
b) <picture> element
Provides full control for responsive and modern images (like using WebP for supported browsers).
Example:
<picture>
<source srcset="nature.webp" type="image/webp">
<source srcset="nature.jpg" type="image/jpeg">
<img src="nature.jpg" alt="Beautiful Nature Image" style="max-width:100%; height:auto;">
</picture>Clickable Images (Image Links)
You can make an image clickable by wrapping it inside an <a> tag.
<a href="<https://www.example.com>">
<img src="logo.png" alt="Company Logo" width="150">
</a>Figure and Figcaption in HTML5
To add a caption under an image, use <figure> and <figcaption>.
<figure>
<img src="sunset.jpg" alt="Beautiful Sunset">
<figcaption>Beautiful Sunset View</figcaption>
</figure>Complete HTML example focusing on Image Attributes & Responsiveness :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Attributes & Responsiveness</title>
<style>
body {
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 20px;
}
h2 {
color: #2c3e50;
margin-top: 30px;
}
img {
margin: 10px 0;
max-width: 100%;
height: auto;
}
.clickable {
border: 2px solid #3498db;
padding: 5px;
display: inline-block;
}
</style>
</head>
<body>
<h1>Image Attributes & Responsiveness in HTML</h1>
<!-- 1. Common Image Attributes -->
<h2>1. Common Image Attributes</h2>
<p>Images can have multiple attributes to control their source, size, and behavior:</p>
<img src="images/logo.png" alt="Company Logo" width="150" height="150" title="Logo Image" loading="lazy" crossorigin="anonymous">
<p>Explanation:</p>
<ul>
<li><strong>src:</strong> Image source path or URL.</li>
<li><strong>alt:</strong> Alternative text for accessibility and SEO.</li>
<li><strong>width/height:</strong> Define the size of the image.</li>
<li><strong>title:</strong> Tooltip text on hover.</li>
<li><strong>loading:</strong> Lazy loads images for better performance.</li>
<li><strong>crossorigin:</strong> Handles cross-origin requests.</li>
</ul>
<!-- 2. Responsive Images using srcset -->
<h2>2. Responsive Images using <code>srcset</code></h2>
<p>The browser automatically selects the most appropriate image based on screen size:</p>
<img src="images/small.jpg"
srcset="images/medium.jpg 768w, images/large.jpg 1200w"
sizes="(max-width:600px) 480px, 800px"
alt="Responsive Image">
<!-- 3. Responsive Images using <picture> -->
<h2>3. Responsive Images using <code><picture></code></h2>
<p>You can define different images for different screen widths or resolutions:</p>
<picture>
<source srcset="images/large.jpg" media="(min-width:800px)">
<source srcset="images/small.jpg" media="(max-width:799px)">
<img src="images/default.jpg" alt="Picture Element Example">
</picture>
<!-- 4. Clickable Images -->
<h2>4. Clickable Images</h2>
<p>Wrap an image inside an <code><a></code> tag to make it clickable:</p>
<a href="https://example.com" class="clickable">
<img src="images/logo.png" alt="Clickable Image" width="150">
</a>
</body>
</html>