HTML Images: Alt Text, Dimensions and Responsive Sources
Learn how to add HTML images with useful alt text, width and height, responsive srcset and picture sources.
Add an image
The <img> element embeds an image and is a void element, so it has no closing tag. Give informative images useful alternative text. Use an empty alt value when an image is decorative and adds no information.
<img src="garden.jpg" width="1200" height="800"
alt="Red flowers growing beside a garden path">Width and height help the browser reserve the image's aspect ratio while the file loads. Use CSS to let images fit their container.
Offer responsive image files
Use srcset and sizes when you have several resolutions of the same image. Use <picture> when you need art direction or format-specific sources, with an <img> fallback.
<picture>
<source media="(max-width: 600px)" srcset="garden-portrait.jpg">
<img src="garden-wide.jpg" width="1200" height="800"
alt="Red flowers growing beside a garden path">
</picture>Use CSS backgrounds for decoration
A CSS background-image is useful for decorative imagery. If an image communicates information, use an HTML image with appropriate alternative text instead.