HTML Reference
<img> — The Image Element
Embeds an image into a page. A void element with one required attribute and one ethical rule: alt text.
Last updated: October 2026
Definition: The <img> element embeds an image into the document. It is a void element — it has no closing tag. The src attribute is required and points to the image file. The alt attribute provides fallback text for accessibility.
🎬 Live Example
Every img needs three things: src, alt, and width/height.
💡 The alt text describes the image for screen readers and search engines. The width and height prevent layout shift.
Basic Syntax
<img src="photo.jpg" alt="A description">Two attributes are essential: src (the image URL) and alt (the fallback description).
⚙️ Attributes Reference
| Attribute | Value | Purpose |
|---|---|---|
src | URL | Image source. Required. |
alt | text | Description for accessibility. Required. |
width | pixels | Reserves horizontal space. Prevents layout shift. |
height | pixels | Reserves vertical space. Prevents layout shift. |
loading | lazy / eager | Defer loading until near viewport. |
srcset | comma-separated list | Multiple image sizes for responsive display. |
sizes | media conditions | Tells the browser which srcset size to pick. |
decoding | async / sync / auto | Hint for the browser's decoding strategy. |
fetchpriority | high / low / auto | Priority hint for loading. Use high for hero images. |
ismap / usemap | — | Legacy image map attributes. Rarely used. |
Basic Image
The minimum viable img element — src, alt, and dimensions.
<img
src="/images/team.jpg"
alt="Our engineering team at the 2026 conference"
width="800"
height="600"
>Setting width and height as attributes (not CSS) tells the browser the aspect ratio before the image loads, preventing layout shift.
Lazy Loading
Load images only when they're about to enter the viewport.
<!-- Hero image: load immediately -->
<img src="hero.jpg" alt="Hero" loading="eager" fetchpriority="high">
<!-- Everything below the fold: lazy load -->
<img src="product.jpg" alt="Product" loading="lazy">💡 Rule: The first image on the page (or the hero) should use loading="eager". Everything below the fold should use loading="lazy". Lazy loading hero images hurts LCP.
Responsive Images with srcset
Serve different image sizes based on the viewport width.
<img
src="photo-800.jpg"
srcset="
photo-400.jpg 400w,
photo-800.jpg 800w,
photo-1200.jpg 1200w,
photo-1600.jpg 1600w
"
sizes="(max-width: 600px) 100vw,
(max-width: 1200px) 50vw,
800px"
alt="Mountain landscape at sunset"
width="800"
height="600"
loading="lazy"
>The browser picks the best size for the current viewport. Mobile phones download the 400px version; desktops pick 800px or larger.
Modern Image Formats
Serve WebP or AVIF with a fallback for older browsers using <picture>.
<picture>
<source srcset="photo.avif" type="image/avif">
<source srcset="photo.webp" type="image/webp">
<img src="photo.jpg" alt="Description" width="800" height="600">
</picture>AVIF is 50% smaller than JPEG. WebP is 25% smaller. Modern browsers pick the best format they support; older browsers fall back to JPG.
Clickable Image
Wrap an image in an anchor to make it a link.
<a href="/products/widget">
<img
src="/images/widget.jpg"
alt="The Widget — click to view product details"
width="300"
height="300"
>
</a>Important: The alt text should describe the destination, not just the image. "Click to view product details" is better than "Widget image."
🎯 Writing Good Alt Text
| Image type | Alt text strategy |
|---|---|
| Informative photo | Describe what's happening: "Two developers pair-programming at a whiteboard." |
| Product image | Name the product: "Blue cotton t-shirt, front view." |
| Chart or graph | Summarize the key insight: "Bar chart showing revenue growth from 2020 to 2026." |
| Logo in a link | Name the destination: "MAK UI Studio homepage." |
| Decorative image | Use empty alt: alt="" — tells screen readers to skip. |
| Purely functional icon | Describe the action: "Search", "Close menu", "Next page." |
💡 Test: Read the alt text out loud. If it doesn't make sense as a standalone description of the image's role, rewrite it.
⚠️ Common Mistakes
- Missing alt text. This is the #1 accessibility failure on the web. Every image needs an alt attribute (even if empty for decorative images).
- Filling alt with keywords. "Best laptop cheap laptop sale" is spam. Describe the image accurately.
- Forgetting width and height. Without them, images cause layout shift (CLS) as they load, which hurts Core Web Vitals.
- Using lazy loading on hero images. This delays the LCP (Largest Contentful Paint) and hurts your Lighthouse score. Use
loading="eager"instead. - Serving full-resolution images. A 4000×3000 photo shrunk to 300px wastes 90% of bandwidth. Use
srcsetor pre-resize the image. - Not compressing images. A single uncompressed JPG can be 5MB. Use WebP, AVIF, or a compression tool to bring it under 200KB.
- Using images for text. If the text matters (menu items, buttons), use real HTML text, not an image. Screen readers, search engines, and translators all need real text.
♿ Accessibility Notes
- Alt text is required. Screen readers announce alt text. Without it, they either skip the image or read the filename.
- Decorative images use empty alt:
alt="". This tells screen readers to skip the image entirely. - Alt text should be concise. Under 125 characters is a good rule. Longer descriptions belong in surrounding text or a linked page.
- Do not start with "image of" or "picture of." Screen readers already announce that it's an image.
- For complex images (charts, infographics), use
aria-describedbyto link to a longer textual description. - Do not use background images for content. CSS background images are invisible to screen readers. Use
<img>for meaningful images.
❓ Frequently Asked Questions
What is the HTML <img> tag?
The <img> tag embeds an image into a web page. It is a void element — it has no closing tag. The src attribute points to the image file, and the alt attribute provides text for screen readers and when the image fails to load.
Why is the alt attribute important?
The alt attribute describes the image for screen readers, search engines, and users when images fail to load. It is required for accessibility. Empty alt (alt="") is correct for purely decorative images.
What is the difference between img and picture?
<img> displays a single image. <picture> lets you provide multiple sources for responsive images — different images at different viewport sizes or formats (like WebP or AVIF). Use <img> inside <picture> for the fallback.
Should I set width and height on images?
Yes. Setting width and height attributes prevents layout shift (CLS) because the browser reserves space before the image loads. It's one of the highest-impact performance optimizations for pages with images.
What does loading="lazy" do?
loading="lazy" tells the browser to defer loading the image until it's about to enter the viewport. This improves initial page load speed. Use it for images below the fold. Do not use it for hero images.