**`<img>`** requires **`src`** (the image URL) and should always include **`alt`** — descriptive text that screen readers announce in place of the image, that displays if the image fails to load, and that search engines use to understand the image's content (a real ranking factor for image search). Modern responsive images can also use **`srcset`** and **`sizes`** to let the browser pick the best-resolution file for the user's screen and connection, and **`loading="lazy"`** to defer loading offscreen images until they're about to scroll into view.
1Understanding <img>
`<img>` requires `src` (the image URL) and should always include `alt` — descriptive text that screen readers announce in place of the image, that displays if the image fails to load, and that search engines use to understand the image's content (a real ranking factor for image search). Modern responsive images can also use `srcset` and `sizes` to let the browser pick the best-resolution file for the user's screen and connection, and `loading="lazy"` to defer loading offscreen images until they're about to scroll into view.
For a purely decorative image with no informational content (like a background flourish), use alt="" (empty, but present) — this tells screen readers to skip it silently, rather than leaving it out entirely, which some tools may then announce using the filename instead.
<img src="/team-photo.jpg" alt="Our team of five developers at the 2026 offsite">2Practical Example
Here is a real-world application of <img> showing how it is used in production HTML.
<!-- Responsive image serving different resolutions -->
<img src="/photo-800.jpg"
srcset="/photo-400.jpg 400w, /photo-800.jpg 800w, /photo-1600.jpg 1600w"
sizes="(max-width: 600px) 100vw, 800px"
alt="Mountain landscape at sunset"
loading="lazy">3Best Practices
Follow these guidelines when working with <img>:
1. Always include a descriptive alt attribute — never omit it
2. Use alt="" specifically for purely decorative images so screen readers skip them
3. Use loading="lazy" on images below the fold to improve initial page load performance
Tip: For a purely decorative image with no informational content (like a background flourish), use alt="" (empty, but present) — this tells screen readers to skip it silently, rather than leaving it out entirely, which some tools may then announce using the filename instead.
<img src="/team-photo.jpg" alt="Our team of five developers at the 2026 offsite">