HTML Images
Add pictures to your page with the img element.
Syntax
<img src="photo.jpg" alt="Description">Images are added with the <img> element. It is an empty element — it has no closing tag.
Required attributes
src— the path or URL of the image.alt— alternative text shown if the image cannot load.
The alt text is also read by screen readers, making your page accessible.
Example
Loading editor…
Press Run to see the result.
When to use it
- A product page displays a photo using <img src="product.jpg" alt="Red sneaker"> for both visual users and screen readers.
- A developer uses <picture> with multiple <source> elements to serve WebP to modern browsers and JPEG as fallback.
- A news site adds descriptive alt text to every article image for SEO and visually impaired readers.
More examples
Basic image with alt text
src points to the image file; alt describes it for screen readers and shows if the image fails to load.
<img src="dog.jpg" alt="Golden retriever playing fetch in a park">Image with width, height, and loading
Explicit width/height prevent layout shift; loading="lazy" defers off-screen image fetching.
<img
src="hero.jpg"
alt="Developer writing code at a desk"
width="800"
height="450"
loading="lazy"
>Picture element for format fallback
<picture> lets browsers pick the best-supported format; <img> is the universal fallback.
<picture>
<source srcset="logo.avif" type="image/avif">
<source srcset="logo.webp" type="image/webp">
<img src="logo.png" alt="SoundsCode logo" width="200" height="60">
</picture>
Discussion