Reference · Beginner
The img element
Embed an image with a purposeful text alternative, intrinsic dimensions, responsive source behavior, and controlled loading.
- Author
- Editorial team
- Reviewer
- Publication review pending
- Review tier
- 180-day
Definition
The img element embeds an image. Its text alternative communicates the image’s
purpose when the image is unavailable or not perceived visually.
Syntax
<img
src="team-workshop.webp"
width="1200"
height="800"
alt="Three learners comparing their page layouts"
loading="lazy"
/>Key attributes
src selects a resource. alt provides the text alternative. width and
height reserve aspect ratio. srcset and sizes can select responsive
resources. Avoid lazy-loading the likely largest above-the-fold image.
Accessibility
Write alt for the image’s purpose in context. Use alt="" for a genuinely
decorative image so it can be skipped. Complex charts need a fuller nearby
equivalent.
Common misuse
Do not put important text only in an image, repeat adjacent captions, or use unbounded high-resolution files for small displays.