<img>
An image.
Syntax
<img src="url" alt="description">Attributes
| Parameter | Type | Description |
|---|---|---|
| src | URL | The address of the image file. |
| alt | text | A description of the image: shown if it fails to load and read aloud by screen readers. |
| width, height | number | Optional. The size in pixels; reserves the space before the image loads. |
| loading | lazy | eager | Optional. `lazy` delays loading until the image is near the screen. |
Examples
An image with a description and a size:
<img src="/media/photo-200x200.jpg" alt="Coffee beans in a bowl" width="150" height="150">If the file is not found, the alt text is shown instead:
<img src="/no-such-file.png" alt="Product photo" width="120" height="60">A fluid image that never exceeds its container:
<style>
img { max-width: 100%; height: auto; }
</style>
<img src="/media/photo-800x500.jpg" alt="A coffee shop interior" width="800" height="500">Notes
The tag is single — it has no closing part. Decorative images get an empty alt="" so screen readers skip them. Set width and height: then the page does not jump while the image loads.
See also
- alt — The text alternative for an image: read by screen readers and shown if the image fails to load.
- src — The address of the embedded file for `<img>`, `<video>`, `<audio>`, `<script>`, `<iframe>`.
- <picture> — A container for several versions of an image: the browser picks a matching `<source>` or falls back to `<img>`.
- <figure> — A self-contained illustration — an image, a diagram, code or a quote — with a `<figcaption>` caption.
- srcset — Several files of one image in different sizes: the browser picks the one that fits the screen.
- fetchpriority — A hint about how urgent a resource is compared with others of the same kind — for example, to load the main banner before other images.
Related recipes
- How to add a caption to an image
- How to fit an image into a box without distortion
- How to lazy-load images
- How to make a round image
- How to make an image grayscale
- How to make an image responsive
- How to serve sharp images for Retina screens
- How to show different images on different screens
- How to use WebP and AVIF images with a fallback
In the tutorial
- Images — The img tag, the src and alt attributes, sizes, captions with figure and figcaption, image formats and lazy loading.