Images
Images make pages come alive — but a careless image can make a page slow, jumpy and inaccessible. Here is how to add them properly.
On this page · 5 min · Beginner
On this page
- Learning objectives
- Explanation
- Syntax
- Code example
- Step by step
- Real-world use
- Common mistakes
- Best practices
- Remember this
- Practice exercise
- Mini quiz
- Related topics
- My notes
- Reading time
- 5 min
- Difficulty
- Beginner
- Updated
- Oct 28, 2026
Learning objectives#
- Add images with <img src alt>
- Write useful alt text
- Prevent layout shift with width and height
- Load images lazily and responsively
- Caption images with <figure>
Explanation#
<img> is a void element with two required attributes: src (which file) and alt (what it shows, in words).
alt text is read aloud by screen readers and shown if the image fails to load. Describe the purpose of the image. If it is purely decorative, use alt="" so it is skipped.
Always set width and height. The browser then reserves the right space before the file arrives, so the text does not jump down.
loading="lazy" delays images below the fold until the user scrolls near them. srcset lets the browser pick a smaller file for small screens.
Formats: JPG/WebP/AVIF for photos, PNG for screenshots with sharp edges, SVG for logos and icons that must stay crisp at any size.
Syntax#
<img src="photo.webp" alt="What the photo shows" width="800" height="600" loading="lazy">
Code example: A captioned, responsive image#
<style> img { max-width: 100%; height: auto; } </style>
<figure>
<img
src="https://picsum.photos/id/1015/600/400"
srcset="https://picsum.photos/id/1015/300/200 300w,
https://picsum.photos/id/1015/600/400 600w"
sizes="(max-width: 600px) 300px, 600px"
alt="A river winding through a green valley between mountains"
width="600" height="400" loading="lazy">
<figcaption>The valley we hiked through on day two.</figcaption>
</figure>
A landscape photo that scales down on small screens, with a caption underneath.
Step-by-step explanation#
- max-width: 100% stops the image overflowing small screens; height: auto keeps the proportions.
- srcset lists two versions of the same picture with their widths (300w, 600w).
- sizes tells the browser how wide the image will be displayed, so it can choose the smallest file that looks sharp.
- alt describes what is in the photo.
- width and height prevent layout shift.
- <figure> and <figcaption> group the image with its visible caption.
Real-world use case#
An e-commerce product grid uses lazy-loaded, responsive images so the page loads fast on mobile data, with alt text like “Blue cotton kurta, front view”.
Common mistakes#
This tells the user nothing. Describe what matters: alt="Ravi receiving the award on stage".
Huge files waste data and slow the page. Resize and compress images, and use srcset for multiple sizes.
The first image people see should load immediately. Use loading="lazy" only for images further down the page.
Best practices#
- Always write alt (empty for decorative images)
- Always set width and height
- Use WebP or AVIF for photos and SVG for icons
- Lazy-load below-the-fold images only
- Compress every image before uploading
Remember this#
alt = “what would I say if I described this picture on the phone?”
width + height = a reserved parking spot — nothing jumps.
Photos → WebP/JPG. Logos & icons → SVG. Screenshots → PNG.
Practice exercise#
Your task: Add an image of a cat (use https://placecats.com/300/200) with good alt text, fixed dimensions, lazy loading and a caption.
Need a hint?
Show solution
<figure>
<img src="https://placecats.com/300/200" alt="A grey cat sleeping on a windowsill"
width="300" height="200" loading="lazy">
<figcaption>Our cat Mithu on a lazy afternoon.</figcaption>
</figure>
Mini quiz#
What alt text should a purely decorative border image have?
Want more? Practise all HTML MCQs · HTML interview questions
My notes#
Saved in this browser.