Images make pages come alive. In HTML you add them with the <img> element. It's a void element, so it has no closing tag, and it needs two attributes every time: src and alt.
Images are also the heaviest part of most web pages. A single photo straight from a phone camera can be larger than all the HTML, CSS and JavaScript on the page combined. Knowing how to describe images well and load them efficiently makes your pages more accessible and noticeably faster.
The src and alt attributes
<img src="puppy.jpg" alt="A golden retriever puppy chewing a shoe">src(source) is the address of the image file. It can be a file name, a folder path or a full URL.alt(alternative text) describes the picture in words. Screen readers read it aloud, browsers show it if the image fails to load, and search engines use it to understand the picture.
If the file name or path in src is wrong, the browser shows a broken-image icon with the alt text. Check spelling and capital letters first, because Puppy.jpg and puppy.jpg are different files on most web servers.
How to write good alt text
Briefly describe what matters in the picture in this context:
- Bad:
alt="image"oralt="photo123.jpg"tells the reader nothing. - Good:
alt="Chocolate cake with three candles"gives a clear picture in words. - If an image is purely decorative, such as a swirl or background pattern, use an empty alt:
alt="". Screen readers will skip it. - Don't start with "Image of…". Screen readers already announce that it's an image.
The same photo can need different alt text on different pages. On a bakery's menu, "Chocolate cake" is enough. On a birthday party page, "Maya blowing out the candles on her cake" tells the real story.
Width, height and lazy loading
- Set
widthandheight(in pixels, without "px") to the image's real size. The browser reserves the space before the image loads, so the text doesn't jump around as the page loads. - Add
loading="lazy"to images further down the page. They only download when the visitor scrolls near them, which means faster pages and less mobile data used.
Don't lazy-load the main image at the top of the page. It should start loading straight away.
Choosing an image format
| Format | Best for |
|---|---|
| JPG | Photos |
| PNG | Graphics with transparency, screenshots |
| WebP / AVIF | Modern, smaller replacements for both |
| SVG | Logos and icons that stay sharp at any size |
| GIF | Simple animations (a short video file is usually smaller) |
Before you upload a photo, resize it to roughly the largest size it will be displayed at. A 4000-pixel-wide photo shown in a 600-pixel column wastes bandwidth for every visitor.
HTML Images Syntax
Image syntax
<img src="path/to/image.jpg" alt="Description" width="600" height="400" loading="lazy">HTML Images Summary
- Add images with the void
<img>element. - Every image needs a
srcfor the file and analtdescription. - Use
alt=""for decorative images so screen readers skip them. - Set
widthandheightto stop the page jumping, and lazy-load images further down. - Pick the right format and resize large photos before using them.
HTML Images Examples
Each example runs in the page. Edit the code and press Run to see what changes.
A basic image
Change the alt text, then change the src to something broken like nope.jpg and run. You'll see the alt text appear instead.
<h2>Our office dog</h2>
<img src="https://picsum.photos/id/237/400/260" alt="Black labrador puppy looking up at the camera" width="400" height="260">
<p>Meet Pixel. Head of Morale.</p>Line-by-line explanation
- Line 2
srcis a full URL here.altdescribes the photo.widthandheightstop the layout jumping while it loads.
Figure with a caption
<figure>
<img src="https://picsum.photos/id/1080/400/260" alt="A bowl of fresh strawberries" width="400" height="260" loading="lazy">
<figcaption>Fig. 1: Strawberries picked this morning at Green Lane Farm.</figcaption>
</figure>Line-by-line explanation
- Line 1
<figure>groups the image with its caption. - Line 2
loading="lazy"delays loading until the image is close to the screen. - Line 3
<figcaption>is the visible caption. It doesn't replacealt.
Decorative vs meaningful
The divider is decoration, so its alt is empty. The chart carries information, so its alt explains it.
<img src="https://picsum.photos/id/1060/400/20" alt="" width="400" height="20">
<h3>Sales in 2026</h3>
<img src="https://picsum.photos/id/180/400/200" alt="Bar chart: sales doubled from 200 in January to 400 in June" width="400" height="200">Line-by-line explanation
- Line 1
alt=""tells screen readers to skip it entirely. - Line 3For charts and diagrams, put the key information in the alt text.
Common HTML Images Mistakes
Missing alt
<img src="team.jpg"><img src="team.jpg" alt="Our five-person team smiling outside the office">Without alt, screen readers may read out the file name, such as "team dot jpg", which helps nobody. Missing alt text is the most common accessibility error on the web.
Wrong path
<img src="C:\Users\Sam\Desktop\cat.jpg" alt="Cat"><img src="images/cat.jpg" alt="Cat">A path from your own computer won't exist on anyone else's. Put images in your project folder and use relative paths.
Giant images shrunk with width
<!-- a 6000×4000 photo, 8MB -->
<img src="huge-photo.jpg" alt="Beach" width="300"><!-- resized to 600×400, 80KB -->
<img src="beach-600.jpg" alt="Beach" width="300" height="200">width only changes how big the image looks; visitors still download the whole file. Resize images before uploading.
HTML Images in Real Projects
Images and page speed
Images are usually the heaviest part of a web page. Online shops and news sites compress images, use WebP, set dimensions and lazy-load everything below the fold. Google measures this (it's part of "Core Web Vitals"), so it affects search ranking too. For screen-size-specific images, see Responsive Images.
HTML Images Exercises
Answer each one and check it instantly. If you get stuck, open the hint before the answer.
Complete the image tag.
<img ="logo.svg" ="Sprout Bakery logo" width="120" height="40">src points to the file and alt describes it.What's the best alt text for a photo of a red bicycle leaning on a wall, on a bike shop page?
Why should you set width and height on images?
This image has three problems: no alt text, a closing tag it doesn't need, and it should load lazily. Fix them.
<img src="https://picsum.photos/id/1025/300/200" width="300" height="200"></img>- Image has meaningful alt text
- Image loads lazily
- Still has width and height
alt and loading="lazy", and remove </img>.<img> is a void element.HTML Images Quiz
4 questions to check what you learned.
Does
<img>have a closing tag?- Yes,
</img> - No, it's a void element
- Only when it has a caption
- Only in HTML5
- Yes,
When should alt be empty (
alt="")?- When the image is purely decorative
- When you're in a hurry
- Never
- When the image has a caption
What does
loading="lazy"do?- Loads a low-quality version
- Slows the page on purpose
- Hides the image
- Waits to download the image until it's near the screen
Which format is best for a logo that must stay sharp at every size?
- JPG
- GIF
- SVG
- BMP
HTML Images Challenge
Make a captioned photo
Create a <figure> with:
- An image with
src="https://picsum.photos/id/1015/400/250", meaningfulalt,width="400"andheight="250" loading="lazy"- A
<figcaption>describing where the photo was taken
- A figure contains the image
- Image has meaningful alt
- Width 400 and height 250
- Lazy loading is on
- There's a non-empty figcaption
<figure><img …><figcaption>…</figcaption></figure>