Building Your Learning Module...
Getting things ready for you!
Find videos you like?
Save to resource drawer for future reference!
The <img> tag has many attributes that control how images are loaded, displayed, and accessed. Understanding these attributes is crucial for web performance and accessibility.
Image source URL - path to the image file
<img src="path/to/image.jpg" />Alternative text for accessibility and broken images
<img alt="A beautiful sunset" />Image width in pixels - prevents layout shift
<img width="400" />Image height in pixels - reserve space before loading
<img height="300" />Lazy loading defers image loading until needed
<img loading="lazy" />Async decoding doesn't block rendering
<img decoding="async" />Resource loading priority hint
<img fetchpriority="high" />Network request priority
<img importance="high" />Tooltip text on hover - additional information
<img title="A sunset over the ocean" />Appears on mouse hover. Keep it short and helpful.
Semantic role for screen readers
<img role="presentation" />Use presentation for decorative images
Accessible name for screen readers
<img aria-label="Company logo" />For complex images without alt text
Long description element ID reference
<img aria-describedby="desc1" />Points to separate detailed description
CORS policy for cross-origin images
<img crossorigin="anonymous" />Referrer information control
<img referrerpolicy="no-referrer" />Image map reference
<img usemap="#map-name" />Server-side image map
<img ismap />Interactive examples of all image attributes
<h2>Image Attributes Demo</h2>
<!-- Basic Image with Dimensions -->
<div class="example">
<h3>1. Width & Height Attributes</h3>
<img
src="https://picsum.photos/400/300?image=20"
alt="A scenic landscape"
width="400"
height="300"
class="demo-img"
/>
<p class="info">✓ Dimensions set = no layout shift</p>
</div>
<!-- Alt Text Example -->
<div class="example">
<h3>2. Alt Text (Accessibility)</h3>
<img
src="https://picsum.photos/400/300?image=21"
alt="A colorful rainbow over mountains during sunset"
width="400"
height="300"
class="demo-img"
/>
<p class="info">✓ Shows if image fails to load</p>
</div>
<!-- Lazy Loading -->
<div class="example">
<h3>3. Lazy Loading</h3>
<img
src="https://picsum.photos/400/300?image=22"
alt="A lazy loaded nature image"
loading="lazy"
width="400"
height="300"
class="demo-img"
/>
<p class="info">✓ Loads only when needed</p>
</div>
<!-- Decoding Attribute -->
<div class="example">
<h3>4. Decoding Attribute</h3>
<img
src="https://picsum.photos/400/300?image=23"
alt="A high quality photo"
decoding="async"
width="400"
height="300"
class="demo-img"
/>
<p class="info">✓ Non-blocking image decode</p>
</div>
<!-- Title Attribute -->
<div class="example">
<h3>5. Title Attribute (Hover)</h3>
<img
src="https://picsum.photos/400/300?image=24"
alt="Hover over me to see tooltip"
title="Beautiful landscape with mountains and sunset"
width="400"
height="300"
class="demo-img"
/>
<p class="info">✓ Hover to see tooltip</p>
</div>Loading preview...
| Attribute | Purpose | Values |
|---|---|---|
| src | Image URL | Path to image file |
| alt | Alternative text | Descriptive text |
| width/height | Image dimensions | Pixels (e.g., 400, 300) |
| loading | Load timing | lazy | eager |
| decoding | Decode timing | sync | async | auto |
| fetchpriority | Resource priority | high | low | auto |
Experiment with different image attributes and see the effects!