<img>
Embeds graphical images
Definition and Usage
The <img> tag is used to embed an image in an
HTML page.
Images are not technically inserted into a web page; images are
linked to web pages. The <img> tag creates a
holding space for the referenced image.
The <img> tag is a
void element (also called an empty element),
which means it has no closing tag.
<img> tag has two required attributes:
src- Specifies the path to the image-
alt- Specifies alternate text for the image (for accessibility)
width and
height of an image to prevent layout shifts while the
page loads.
Browser support and standards
Browser rendering and modern HTML conformance are different questions. Check the current element reference for the browsers and features your project needs; the older source version table is not a current compatibility guarantee.
Read the MDN element referenceAttributes
| Attribute | Value | Description |
|---|---|---|
| src | URL | Required. Specifies the path to the image |
| alt | text | Required. Specifies alternate text for the image (for accessibility) |
| width | pixels | Specifies the width of the image |
| height | pixels | Specifies the height of the image |
| loading | eager lazy |
Specifies whether the browser should load the image immediately or defer loading |
| srcset | URL-list | Specifies a list of image sources for different screen sizes/resolutions |
| sizes | media-query | Specifies image sizes for different page layouts (used with srcset) |
| crossorigin | anonymous use-credentials |
Specifies CORS settings for the image |
| decoding | sync async auto |
Specifies how the browser should decode the image |
| ismap | ismap | Specifies an image as a server-side image map |
| usemap | #mapname | Specifies an image as a client-side image map |
| referrerpolicy |
no-referrer no-referrer-when-downgrade origin origin-when-cross-origin unsafe-url |
Specifies which referrer information to send when fetching the image |
Examples
Basic Image
Display a simple image with alt text:
Example
Unavailable or blocked: image “image.jpg”. Provide inline styles and scripts, embedded images or the missing HTML context. External requests and browser dialogs stay blocked.
<img src="image.jpg" alt="Description of the image" width="400" height="300" />Responsive Image with srcset
Provide different images for different screen sizes:
Example
Unavailable or blocked: image “image-400.jpg”; image “image-800.jpg”; image “image-1200.jpg”. Provide inline styles and scripts, embedded images or the missing HTML context. External requests and browser dialogs stay blocked.
<img
src="image-400.jpg"
srcset="image-400.jpg 400w,
image-800.jpg 800w,
image-1200.jpg 1200w"
sizes="(max-width: 600px) 400px,
(max-width: 1000px) 800px,
1200px"
alt="Responsive image example"
/>Lazy Loading Image
Defer loading of images until they're near the viewport:
Example
Unavailable or blocked: image “image.jpg”. Provide inline styles and scripts, embedded images or the missing HTML context. External requests and browser dialogs stay blocked.
<img src="image.jpg" alt="Lazy loaded image" loading="lazy" width="600" height="400" />Image with Client-Side Image Map
Create clickable areas on an image:
Example
Unavailable or blocked: image “workplace.jpg”. Provide inline styles and scripts, embedded images or the missing HTML context. External requests and browser dialogs stay blocked.
<img src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379" />
<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.html" />
<area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.html" />
<area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.html" />
</map>Responsive Image with CSS
Make an image responsive using CSS:
Example
The snippet includes CSS inside its HTML. Unavailable or blocked: image “image.jpg”. Provide inline styles and scripts, embedded images or the missing HTML context. External requests and browser dialogs stay blocked.
<style>
.responsive-img {
max-width: 100%;
height: auto;
}
</style>
<img src="image.jpg" alt="Responsive image" class="responsive-img">Image with Fallback
Use the <picture> element for art direction and fallback:
Example
Unavailable or blocked: image “image.webp”; image “image.jpg”. Provide inline styles and scripts, embedded images or the missing HTML context. External requests and browser dialogs stay blocked.
<picture>
<source srcset="image.webp" type="image/webp" />
<source srcset="image.jpg" type="image/jpeg" />
<img src="image.jpg" alt="Image with fallback" />
</picture>Image with Different Aspect Ratios
Serve different images for different screen orientations:
Example
Unavailable or blocked: image “portrait.jpg”; image “landscape.jpg”. Provide inline styles and scripts, embedded images or the missing HTML context. External requests and browser dialogs stay blocked.
<picture>
<source media="(orientation: portrait)" srcset="portrait.jpg" />
<source media="(orientation: landscape)" srcset="landscape.jpg" />
<img src="landscape.jpg" alt="Orientation-aware image" />
</picture>Image Accessibility
Proper use of the alt attribute is crucial for web
accessibility:
Why Alt Text Matters
- Screen readers announce alt text to visually impaired users
- Alt text is displayed when the image fails to load
- Search engines use alt text to understand image content
- Alt text improves SEO and accessibility
Writing Good Alt Text
Example
Unavailable or blocked: image “photo.jpg”; image “golden-retriever.jpg”; image “decorative-line.png”; image “search-icon.png”. Provide inline styles and scripts, embedded images or the missing HTML context. External requests and browser dialogs stay blocked.
<!-- Bad: Too vague -->
<img src="photo.jpg" alt="photo" />
<!-- Good: Descriptive and meaningful -->
<img src="golden-retriever.jpg" alt="Golden retriever playing fetch in a park" />
<!-- Decorative images: Use empty alt -->
<img src="decorative-line.png" alt="" />
<!-- Functional images: Describe the function -->
<img src="search-icon.png" alt="Search" />alt="") so screen readers skip them.
Best Practices
- Always include alt text - Even if it's empty for decorative images
-
Specify dimensions - Use
widthandheightto prevent layout shifts -
Use lazy loading - Add
loading="lazy"for images below the fold - Optimize image size - Compress images to reduce file size and improve load times
- Use appropriate formats - WebP for photos, SVG for icons and logos, PNG for transparency
- Use srcset for responsive images - Serve different sizes based on screen resolution
- Consider aspect ratio - Maintain consistent aspect ratios to prevent layout issues
-
Use CSS for styling - Avoid using HTML
attributes like
border,align, etc. - Test with images disabled - Ensure alt text provides meaningful information
- Use HTTPS - Serve images over HTTPS to prevent security warnings
Image Formats Comparison
| Format | Best For | Pros | Cons |
|---|---|---|---|
| JPEG | Photos, complex images | Small file size, wide support | Lossy compression, no transparency |
| PNG | Graphics with transparency | Lossless, transparency support | Larger file size |
| WebP | Modern web images | Small file size, transparency | Limited browser support (older browsers) |
| SVG | Icons, logos, diagrams | Scalable, small file size | Not suitable for photos |
| GIF | Simple animations | Animation support | Limited colors, large file size |
Try it Yourself
Interactive Example
Below is a live example showing different image implementations:
Basic Image
Responsive Image (resize browser)
Default CSS Settings
Most browsers will display the <img> element
with the following default values:
Default CSS
Unavailable or blocked: markup context “Matching lesson markup is not supplied; this fragment uses a generic HTML scaffold.”. Provide inline styles and scripts, embedded images or the missing HTML context. External requests and browser dialogs stay blocked.
img {
display: inline-block;
}