The img element
<img src="https://picsum.photos/seed/chai/480/320"
alt="A glass of masala chai on a wooden table"
width="480" height="320">img is a void element, so it has no closing tag. It needs two attributes:
src: where the image file is. It follows the same path rules as links: a full URL, or a relative path such asimages/chai.jpg.alt: a text alternative describing the image.
Images are not technically inside your HTML file. The browser reads the img tag, then downloads the image separately. That is why images can appear after the text, and why a wrong path shows a broken-image icon instead of an error.
Writing good alt text
The alt text is read aloud by screen readers, shown when the image fails to load, and used by search engines to understand the picture. Good alt text answers one question: what would someone miss if they could not see this image?
| Image | Weak alt | Better alt |
|---|---|---|
| A product photo | alt="product" |
alt="Black steel water bottle, 750 ml, with a bamboo lid" |
| A chart | alt="chart" |
alt="Bar chart: sales doubled from 2024 to 2026" |
| A team photo on an About page | alt="image" |
alt="Our five-person team outside the Pune office" |
| A logo that links home | alt="logo" |
alt="Green Leaf Books home" |
A few guidelines:
- Do not start with "Image of" or "Picture of". Screen readers already announce that it is an image.
- Keep it to a sentence. If a chart needs a full explanation, put that explanation in the page text.
- Describe what matters in this context. The same photo of a person might be "Asha Rao, head of design" on a team page and "A woman presenting at a whiteboard" in an article about meetings.
Decorative images get empty alt text
Some images add nothing to the meaning: a background flourish, a divider, an icon right next to text that already says the same thing. Give them an empty alt attribute:
<img src="divider.svg" alt="">This tells screen readers to skip the image. Leaving alt out altogether is not the same: many screen readers then read the file name aloud, such as "divider dot S V G", which is noise.
Stop the page jumping
When an image has no size information, the browser does not know how much room to leave for it. The text appears first, then jumps down when the image arrives. This is called layout shift: it is annoying, makes people click the wrong thing, and is one of the measurements Google uses to judge page experience.
Setting width and height to the image's real pixel size fixes it. The browser reserves a box with the right proportions straight away. You can still resize the image with CSS later; with height: auto in CSS, the browser keeps the proportions from your attributes.
Lazy loading
<img src="gallery-12.jpg" alt="Sunset over the backwaters in Alleppey" width="800" height="533" loading="lazy">loading="lazy" tells the browser to wait until the reader scrolls near the image before downloading it. It saves data on long pages and speeds up the first view. Do not lazy-load the first big image at the top of the page; that one should load immediately.
Formats and file size
| Format | Best for |
|---|---|
| JPEG | Photographs |
| PNG | Screenshots, images that need sharp edges or transparency |
| WebP / AVIF | Modern formats: smaller files for both photos and graphics |
| SVG | Logos, icons and illustrations made of shapes; scales to any size |
Big images are the most common reason pages feel slow, especially on mobile data. Resize photos to roughly the size they are displayed at, and compress them. The free Image Compressor on this site does both in your browser, without uploading anything. To pull exact colours out of a photo for your design, use the Image Color Picker.
Only use images you have the right to use: your own, ones you have bought or licensed, or ones with a licence that allows reuse. Copying an image from a search result is usually not allowed.
Common mistakes
- Wrong path, often from a capital letter:
Photo.JPGandphoto.jpgare different files on most web servers. - Missing
alt, oraltthat just repeats the file name. - Uploading a 5 MB camera photo to show it 400 pixels wide.
- Text inside images, such as a banner with the sale details baked in. Search engines and screen readers cannot read it reliably; put important text in HTML.
Exercise
Create a small "My city" section with a heading, a paragraph and two images. Give the first image descriptive alt text, a width and a height. Make the second one a decorative divider with empty alt text and lazy loading. Use any image URLs you are allowed to use (for practice, https://picsum.photos/seed/anyword/600/400 gives a random photo).
Show one possible answer
<h2>My city: Jaipur</h2>
<p>Jaipur is known for its pink sandstone buildings and busy bazaars.</p>
<img src="https://picsum.photos/seed/jaipur/600/400"
alt="Pink sandstone palace facade with many small windows"
width="600" height="400">
<img src="https://picsum.photos/seed/divider/600/20" alt="" width="600" height="20" loading="lazy">Key points
- <img src="..." alt="..."> is a void element: src is the file, alt describes it.
- Good alt text says what the image shows in the context of the page; decorative images get alt="".
- Set width and height so the browser reserves space and the page does not jump while loading.
- loading="lazy" delays images further down the page until the reader scrolls near them.
- Keep image files small: right size, right format, compressed.