Images
The <img> element embeds pictures — photos, diagrams, logos, illustrations. Getting the attributes right matters more than it seems: they affect accessibility, page speed and how much the layout jumps while loading.
A basic image
<img> is a void element (no closing tag). src gives the image's URL — absolute, or relative like images/photo.jpg.
alt text
The alt attribute describes the image for people who can't see it: screen-reader users, people on slow connections where images fail to load, and search engines. It's required.
The second image fails to load, so the browser shows its alt text instead. Guidelines for good alt text:
- Describe what matters about the image in context, briefly. A chart's alt should state its conclusion.
- Don't start with "image of" or "picture of" — screen readers already announce it's an image.
- If an image is a link, describe where the link goes:
alt="CodeAtlas home"for a logo link. - For purely decorative images, use an empty alt (
alt="") so screen readers skip it. Never omit the attribute entirely.
width and height
Setting width and height (in pixels, without units) tells the browser the image's proportions before it downloads. It reserves the right amount of space, so text doesn't jump around as images load — a problem called layout shift. CSS can still resize the image; the browser uses the attributes to compute the aspect ratio.
The max-width: 100%; height: auto CSS pattern makes an image shrink to fit small screens while keeping its proportions — use it on almost every image.
Image formats
| Format | Best for |
|---|---|
| JPEG | Photos; small files, no transparency |
| PNG | Screenshots and graphics needing sharp edges or transparency |
| WebP / AVIF | Modern formats: much smaller files for photos and graphics, with transparency. Supported in all current browsers |
| SVG | Logos, icons and diagrams — vector graphics that stay sharp at any size |
| GIF | Simple animations (a short video is usually much smaller) |
Lazy loading
<img src="gallery-12.jpg" alt="Market stall full of oranges" width="600" height="400" loading="lazy">
loading="lazy" delays loading images until the user scrolls near them, saving bandwidth and speeding up the initial page. Don't lazy-load the main image at the top of the page — it should load immediately (lesson 45).
Images as links
Background images vs content images
Use <img> when the image is content — part of what the page communicates. Use a CSS background-image when it's purely decoration, like a texture or a hero backdrop behind text. Background images can't have alt text, so they should never carry meaning.
Common problems
- Broken image icon: check the path and file name — they're case-sensitive on most servers (
Photo.JPG≠photo.jpg). - Huge slow images: don't upload a 5000-pixel photo to display at 400 pixels. Resize and compress first, or serve several sizes (next lesson).
- Stretched images: setting both width and height in CSS to values with different proportions distorts them; use
object-fit: coverto crop instead.