HTML Images
The <img> element embeds an image in the page. It's a void element, so no closing tag.
A live SVG figure
You can embed bitmap images (.jpg, .png, .webp) via <img>, or place vector graphics directly inline with <svg>. SVG scales to any size without losing sharpness:
Common <img> attributes
| Attribute | Purpose | Required? |
|---|---|---|
src | Path or URL of the image. | Yes |
alt | Text alternative for screen readers and broken images. | Yes (use alt="" for purely decorative images). |
width / height | Dimensions in pixels. Helps the browser reserve space. | Recommended |
loading | lazy defers off-screen images until the user scrolls near them. | Recommended for long pages |
srcset | Different image files for different screen densities. | Optional |
Accessibility: Every
<img> needs an alt attribute. Describe what the image conveys, not what it looks like.Tip: Use SVG for icons, logos, and diagrams. Use WebP/JPG for photographs. PNG only when you need transparency on a raster image.
Example
Example
<!DOCTYPE html> <html> <body> <h2>HTML Image</h2> <img src="https://placehold.co/300x150/04AA6D/FFF?text=iwantcoding.com" alt="Demo image" width="300" height="150"> </body> </html>Try it Yourself »
Exercise
Add the attribute that describes the image for screen readers.
<img src="cat.jpg"
="A cat sleeping in a sunbeam">
Three letters. Stands for "alternative text".
Discussion
Loading…