<img> Image
Displays an image; src and alt required.
<img> is a void element that displays a picture. src points to the file. alt is the text alternative: screen readers read it out, and browsers show it when the image fails to load.
In the alt, describe what the image is there to say. A purely decorative image gets an empty alt=""; leaving the attribute off is never correct. Set width and height so the page does not jump as images arrive, and add loading="lazy" to images far down the page. With srcset and sizes you can serve different sizes to different screens.
The img element in the WHATWG standard (opens in a new tab) contains a long run of alt text examples for different situations. Practise in the Images lesson.
Void element: it has no content and no closing tag.
Syntax
<img src="photo.jpg" alt="Description" width="400" height="300">When to use it
Ask yourself whether the page loses information when the picture is gone. If it does, the picture is content and belongs in an <img> with alt text. Product photos, a diagram in a tutorial, a portrait on an author page and a logo that links home all pass that test.
A texture behind a banner doesn't. Decoration like that sits better in a CSS background-image, out of the content. Reach for picture only for a different crop per screen or a newer format with a fallback, since plain srcset on img already handles different resolutions. Icons that should take the text color are easier as inline svg.
Don't put loading="lazy" on the main image at the top of the page, such as a hero photo. The browser holds the request until it knows the layout, and your most important image shows up late. Give that one fetchpriority="high" instead.
Attributes
| Attribute | What it does |
|---|---|
src | URL of the image (required). |
alt | Text alternative. Empty alt="" for decorative images. |
width | Intrinsic width in pixels, reserves space. |
height | Intrinsic height in pixels, reserves space. |
srcset | List of image files with widths (400w) or densities (2x). |
sizes | How wide the image will be shown, so the browser can pick from srcset. |
loading | lazy delays loading until the image is near the screen. |
decoding | async, sync or auto: hint for decoding. |
fetchpriority | high, low or auto: download priority. |
usemap | Name of an image map (#name). |
crossorigin | CORS mode for the request. |
Live example
Edit the code and watch the preview.
<img src="cat.svg" alt="A cartoon cat sitting down" width="400" height="300">
<img src="mountains.svg" alt="" width="400" height="200" loading="lazy">More examples
Resolution switching with srcset
The browser picks a file from srcset using the width in sizes and the screen density. On a real site both files would be one photo at two sizes. Here they are different pictures, so you can tell which one was chosen.
<img src="cat.svg"
srcset="cat.svg 400w, mountains.svg 800w"
sizes="(min-width: 600px) 400px, 100vw"
alt="Sample illustration" width="400" height="300">Logo that links home
If an image is all a link contains, its alt text becomes the link name. That is why this alt says where the link goes (the home page) and not what the logo looks like.
<header>
<a href="/"><img src="logo.svg" alt="HTMLSchools home" width="200" height="60"></a>
</header>Tip: Write alt every time. Set width and height too.
Browser support
img works in every browser. All current browsers understand srcset and sizes, and older ones fall back to src; the srcset and sizes support table (opens in a new tab) has the versions.
All current major browsers do native lazy loading too. A browser without it loads the image as usual. See lazy loading support (opens in a new tab).
Accessibility
Every img needs an alt attribute (WCAG 1.1.1). Informative images get a text alternative and decorative ones get alt="". Avoid images of text. If you are unsure what to write, the W3C alt decision tree (opens in a new tab) walks you through it.
Common mistakes
Wrong
<img src="team.jpg">Right
<img src="team.jpg" alt="Our five team members at the 2026 conference" width="800" height="500">alt is mandatory; width and height stop the layout from shifting.
Wrong
<img src="divider.png" alt="divider image">Right
<img src="divider.png" alt="">Give decorative images an empty alt and screen readers will skip them.
Frequently asked questions
How do I write good alt text for an image?
Say what the image tells the reader in this context, briefly, the way you would if you were reading the page aloud. Skip the image of opener. When the image is a link or button, describe where it goes or what it does. Decorative images get an empty alt="" so screen readers pass over them. Leaving out the alt attribute is never right. The Good Alt Text lesson gives you practice.
Why should I set width and height on images?
With width and height in place, the browser reserves the right space before the file arrives, so the content below does not jump (Cumulative Layout Shift, one of the Core Web Vitals). Add CSS img{max-width:100%;height:auto} and the image still scales responsively and keeps its aspect ratio. File names, alt text and sizes are covered in Google's image SEO best practices (opens in a new tab).
Practise it
- Attributes (Module 1: First Page)
- Images (Module 3: Links and Media)
- Figures and Captions (Module 3: Links and Media)
- Project: Travel Postcard (Module 3: Links and Media)
- Fix the Div Soup (Module 4: Structure and Semantics)
- Favicon and Social Previews (Module 7: Head and Metadata)