The <img> element
The <img> tag embeds an image into the page. It requires a src attribute pointing to the image file and an alt attribute describing the image for screen readers and for when the image fails to load — alt isn’t optional if you care about accessibility or SEO.
Last updated: October 3, 2026
Quick facts
| Category | Flow content, phrasing content, embedded content, palpable content |
| Content model | Empty — it’s a void element with no children |
| Tag omission | Void element — no end tag, ever |
| Permitted parents | Any element that accepts embedded content |
| DOM interface | HTMLImageElement |
Syntax
Live example
Edit the code below and watch the preview update instantly. This example uses an inline SVG data URI so it works with no external files.
Attributes
| Attribute | Description |
|---|---|
| src | Required. Path or URL to the image file |
| alt | Alternative text for accessibility and SEO; use alt="" only for purely decorative images |
| width / height | Intrinsic dimensions in pixels — set both to prevent layout shift while the image loads |
| loading | lazy defers loading until the image nears the viewport; eager loads immediately |
| srcset | A list of image candidates for different screen resolutions or widths |
Common examples
Make an image responsive
This one CSS rule stops images from overflowing small screens while keeping their shape.
Serve sharper images on high-resolution screens
With srcset, the browser picks the best file for the screen. For different crops or formats, use <picture>.
Use an image as a link
Wrap the image in an <a>. The alt text then describes where the link goes.
<img> vs CSS background images
An <img> is part of the page content: it has alt text, it is read by screen readers, and it can appear in Google Images. A CSS background-image is pure decoration: it has no alt text and is invisible to assistive technology and image search.
So the rule of thumb is: if the image would be missed when removed — a product photo, a chart, a portrait — use <img>. If it is only there to look nice, such as a texture or a hero background behind text, use CSS. When you need different crops or modern formats for one content image, wrap it in <picture>.
| <img> | CSS background-image | |
|---|---|---|
| Alt text / screen readers | Yes | No |
| Google Images | Can appear | Not indexed as content |
| Best for | Meaningful pictures | Decoration |
Common mistakes to avoid
- Missing or useless alt text. Leaving out
alt, or writing “image” or a file name, fails screen reader users and wastes an SEO opportunity. - No width and height. Without them the page jumps as images load (layout shift), which hurts the Core Web Vitals score Google uses for ranking.
- Huge files. A 5 MB photo shown at 600 pixels wide slows the page badly. Resize and compress images, and prefer WebP or AVIF.
- Lazy-loading the main image.
loading="lazy"is great below the fold, but on the first big image it delays the page’s main content.
Accessibility & SEO tips
- Write alt text that describes the image’s purpose in context. For purely decorative images, use an empty
alt=""so screen readers skip them. - Use descriptive file names such as
red-running-shoes.jpgrather thanIMG_0042.jpg; Google Images reads them. - Wrap images that need a visible caption in a <figure> with a
<figcaption>.
Browser support
Supported in every browser, including Chrome, Edge, Firefox, Safari and their mobile versions — it has been part of HTML since the very first versions. Newer formats such as AVIF and WebP work in all current browsers.
Tutorials: How to add a background image, How to add a link, How to add an image, How to center a div, How to make a responsive website