← Back to the Images Reference
Lesson

Images on the Web

How images really work on the web — the <img> tag, alt text, choosing a format, keeping files fast, making them responsive, and fitting them into any box. Live demos throughout. (Demo photos load from picsum.photos.)

Step 1

The <img> tag

An image is added with a single self-closing <img> tag. It needs two things: src (where the file is) and alt (a text description).

<img src="cat.jpg"the file alt="A sleeping cat"description>

src can be a file in your project (images/cat.jpg) or a full URL (https://…). There's no closing </img> — it's a void element.

Random demo photo
Step 2

Alt text: the most important attribute

Alt text is read aloud by screen readers, shown if the image fails to load, and used by search engines. There are three cases:

CaseWhat to writeExample
Meaningful imageDescribe what it shows, brieflyalt="Students working at laptops"
Decorative imageEmpty alt — tells screen readers to skip italt=""
Image that's a link/buttonDescribe the destination or actionalt="Home"
The test: if every image vanished and only the alt text remained, would the page still make sense? If yes, your alt text is doing its job. Don't start with “Image of…” — screen readers already say “image.”
Step 3

Choosing the right format

The format decides quality, file size, and what's possible (transparency, animation). Pick by the kind of image.

FormatBest forNotes
JPG / JPEGPhotographsSmall files, no transparency. Lossy — don't re-save repeatedly.
PNGGraphics, logos, screenshots, transparencyLossless, larger files. Supports transparent backgrounds.
WebPAlmost everything (modern default)30–35% smaller than JPG/PNG at similar quality. Wide support.
AVIFPhotos where size matters mostEven smaller than WebP. Newer; check browser support.
SVGLogos, icons, simple illustrationsVector — infinitely scalable, tiny, crisp at any size.
GIFShort, simple animations onlyLarge & only 256 colors. For real video, use <video>.
Rule of thumb: photo → WebP (or JPG). Logo/icon → SVG. Needs transparency → PNG/WebP. Animation → a muted video, not GIF.
Step 4

Make them fast

Images are usually the heaviest thing on a page. A 4000×3000 photo straight from a phone can be 5 MB; the same photo sized and compressed for the web is often under 150 KB — visually identical, ~30× faster.

Three things to always do

<img src="hero.webp" alt="…"
     width="800" height="500"   reserve space (stops layout jump)
     loading="lazy">          load only when near the viewport
Always set width and height (or an aspect-ratio in CSS). It reserves the space before the image loads, so the page doesn't jump around — a metric called Cumulative Layout Shift.
Step 5

Responsive images

An image shouldn't overflow its container on a phone. The one CSS rule every image needs:

img { max-width: 100%; height: auto; }   never wider than its box; keep proportions

For real performance, serve different sizes to different screens with srcset — the browser picks the smallest file that looks sharp:

<img src="photo-800.jpg" alt="…"
     srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1200.jpg 1200w"
     sizes="(max-width: 600px) 100vw, 50vw">

Need a different crop on mobile (art direction)? Use <picture>:

<picture>
  <source media="(max-width: 600px)" srcset="square.jpg">
  <img src="wide.jpg" alt="…">   fallback / desktop
</picture>
Responsive demo — resize the window

↑ max-width:100% — drag your window narrower and this image scales down instead of overflowing.

Step 6

Fitting an image into a box: object-fit

When you give an image a fixed width and height, object-fit decides how it fills that box. Same photo, same box, three behaviors:

cover
cover
fills box, crops edges
contain
contain
fits inside, may letterbox
fill
fill
stretches, distorts
/* same width & height; object-fit decides how the photo fills it */
.frame img { width: 100%; height: 100%; }

.cover img   { object-fit: cover; }     fills box, crops edges
.contain img { object-fit: contain; }   fits inside, may letterbox
.fill img    { object-fit: fill; }      stretches, distorts
cover is the workhorse — it's how you get uniform thumbnails and hero images from photos of any shape, without squishing them. Avoid fill; it distorts people and products.
Step 7

<img> vs CSS background image

Two ways to put an image on a page — and they're for different jobs.

Use <img> when…
The image is content —
a photo, a product, a chart.
It needs alt text and should
appear if CSS fails.

<img src="product.jpg"
     alt="Blue running shoe">
Use CSS background when…
The image is decoration —
a hero backdrop, a texture,
a pattern behind text.

.hero {
  background-image: url(bg.jpg);
  background-size: cover;
}
Quick test: would the image belong in the page if you printed it as a document? If yes, it's content → <img>. If it's just visual atmosphere → CSS background.
Step 8

Captions: <figure> & <figcaption>

When an image needs a visible caption or credit, wrap it semantically so the caption is programmatically tied to the image.

A misty mountain range at dawn
Fig 1. Dawn over the ridge. Photo: picsum.photos.
<figure>
  <img src="ridge.jpg" alt="A misty mountain range at dawn">
  <figcaption>Dawn over the ridge.</figcaption>
</figure>
alt vs caption: the alt describes the image for people who can't see it; the <figcaption> is a visible note for everyone. They serve different jobs — don't just duplicate one into the other.
Step 9

Common mistakes

Don't
<img src="DSC_4821.JPG">          no alt, 5MB
<img src="logo.jpg">              logo as JPG (blurry)
<img ... > with no width/height   page jumps
object-fit: fill                  squished people
a 3000px image in a 300px box     wasted bytes
Do
<img src="team.webp" alt="Our team"
     width="600" height="400" loading="lazy">
<img src="logo.svg" alt="Acme">   crisp vector
object-fit: cover                  clean thumbnails
resize + compress before upload
Step 10

Image checklist

Where next

Keep going