<img> embeds an image. It is void: no children or end tag. Supply an image URL through src or image candidates through srcset, and write a text alternative appropriate to the image’s purpose.
An image with dimensions
The inline SVG makes this document self-contained. Its dimensions reserve an aspect ratio, while CSS lets it shrink on a narrow screen.
HTML and CSS
HTML
<figure>
<img
src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22240%22%20height%3D%22120%22%20viewBox%3D%220%200%20240%20120%22%3E%3Crect%20width%3D%22240%22%20height%3D%22120%22%20fill%3D%22%23dbeafe%22%2F%3E%3Cpath%20d%3D%22M0%20120L75%2035L140%20100L190%2050L240%20120Z%22%20fill%3D%22%232563eb%22%2F%3E%3C%2Fsvg%3E"
alt="Two blue mountain peaks, with the taller peak on the left"
width="240"
height="120"
/>
<figcaption>A simple landscape illustration.</figcaption>
</figure>CSS
img {
max-width: 100%;
height: auto;
}Edit HTML or CSS to update the preview as you type. Copy code snippet copies the selected tab. Preview spacing and font defaults are not included.
Alternative text
For an informative image, alt replaces the information or purpose the image conveys. For a purely decorative image, use alt=""; do not omit the attribute and let a filename become the fallback. For an image-only link or button, describe the destination or action. A caption or title is not automatically a replacement for alt.
Dimensions and delivery
HTML width and height use integer pixel dimensions, not percentage strings. CSS handles responsive rendered size. Correct dimensions can reserve space before the image loads. loading="lazy" is useful for images beyond the initial view; avoid delaying a prominent image needed immediately. The loading values are lazy and eager.
srcset and sizes let the browser choose an image candidate. Use picture for format or art-direction choices. Keep the alt on img, and style object-fit on img when intentionally cropping.
Inspection exercise
Copy the document and inspect the image’s natural and rendered dimensions. Disable images to check whether the alt conveys the illustration’s content. Never make essential instructions available only through hovering over an image.
Sources and browser support
MDN: img describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.