Session 5 — Images

You will put pictures on the page with the img element — an empty, inline element whose file is named by src. The three disciplines: write a real alt description (or alt="" for decoration), pick the right format (JPEG for photos, PNG for graphics, SVG for logos), and keep files a sensible size. You will also wrap images with figure/figcaption for captioned picture-and-text units.

Plan: ideas → worked images → bridge → short drills → reveal.

Time: about 50–60 minutes if you write the alt text and format choice for every image before reading the reveal.

Session 5 — Images

The one-paragraph story

Images make a site feel alive, and the img element puts them on the page: <img src="images/logo.png" alt="Harbor Café logo">. It is an empty inline element — no closing tag — whose content is an external file named by src. Two habits matter more than anything else: always provide an alt text (what the image says when it cannot be seen), and choose the right format for the job (JPEG for photos, PNG for graphics with flat areas, SVG for logos and icons). You will also meet figure and figcaption, which attach a caption to an image as a unit. This session illustrates the Harbor Café site and learns the three-attribute discipline that keeps images accessible and fast.

---

The img element

<img src="images/storefront.jpg" alt="The café storefront by the pier">

Three facts about img:

1. It is empty — no content, no closing tag. Everything about the image lives in attributes.
2. src names the file. The value is a URL using the same path grammar as links: relative for your own images (images/logo.png), absolute for images hosted elsewhere.
3. alt describes the image in text. It is shown when the file fails to load, and read aloud by screen readers. An image without alt is, to a screen reader, nothing.

The alt discipline: describe what the image shows when that matters, keep it short, and use an empty alt="" only for purely decorative images (a decorative divider) that add nothing to the content.

---

Width and height

The browser reserves space for an image once it knows its dimensions. You can set them explicitly:

<img src="images/storefront.jpg" alt="The café storefront" width="400" height="300">

If you set only width, the browser keeps the aspect ratio automatically. Setting both risks distorting the picture if the values disagree with the file's real shape. In later sessions, CSS takes over sizing — the attributes are the simple, self-contained way.

---

Image formats: which one when

Three formats cover almost every case:

• JPEG — best for photographs. It compresses smooth colour gradients well and supports millions of colours. It is lossy, so fine text and sharp edges can blur at high compression.
• PNG — best for graphics with flat areas of colour: logos, icons, diagrams, screenshots. It is lossless and supports transparency.
• SVG — a vector format: the image is described with shapes, not pixels. It scales to any size without blurring, which makes it ideal for logos and icons, and it can be styled with CSS. (GIF, the old animation format, survives mostly for small animations.)

The rule of thumb: photo → JPEG, graphic → PNG, logo/icon → SVG. A photo saved as PNG is huge; a logo saved as JPEG gets a muddy halo. Choosing the format is choosing file size, sharpness, and transparency at the same time.

---

figure and figcaption: image plus caption

A photograph usually wants a caption, and figure wraps the pair as one unit:

<figure>
  <img src="images/roastery.jpg" alt="The roastery on the pier">
  <figcaption>Our twelve-origin roastery, rebuilt in 2024.</figcaption>
</figure>

figure is a block container; img sits inside it, and figcaption is its caption. The pair moves together — the caption cannot float away from its image, and the whole unit can be repositioned as one thing in layout (Session 13).

---

Images inside links (a reminder)

From Session 4, an image can be a link's clickable content:

<a href="menu.html">
  <img src="images/menu-board.jpg" alt="The café menu board">
</a>

Here alt is doubly important: it describes the image, and it doubles as the link's accessible text.

---

Keeping pages fast: size and count

Every image is a download. A page full of 5 MB photos is slow on every device; on a phone connection it can take many seconds. Two cheap habits:

• Serve the right size. Don't ship a 2000-pixel photo when it will be displayed at 400 pixels wide.
• Compress sensibly. JPEG at a reasonable quality setting looks fine; PNG files with photos in them are a red flag.

The browser is not doing anything wrong when a page is slow — the page is downloading exactly what you shipped. Later sessions (15) cover responsive image sizing; the habit to build now is noticing image weight at all.

---

Pitfalls to watch for

• Missing alt makes the image invisible to screen readers and shows a broken placeholder to everyone when the file fails.
• img has no closing tag — writing <img>...</img> is an error.
• Wrong format for the job — photos as PNG bloat the page; logos as JPEG get a white or muddy background.
• Huge files — a 2000-pixel photo displayed at 400 pixels is four times the bytes it needs to be.

Session 5 — Worked examples

Example A — The logo and a photo

<header>
  <img src="images/logo.png" alt="Harbor Café">
</header>
<img src="images/storefront.jpg" alt="The café storefront by the pier" width="500">

Two images, two formats, two alt texts:

• The logo is a graphic with flat colour → PNG (or SVG in production); alt is the café's name because the logo is a picture of that name.
• The storefront is a photograph → JPEG; alt describes what the photo shows.

---

Example B — Alt text in the real situations

<!-- Informative image: describe it -->
<img src="images/menu-board.jpg" alt="Today's specials, written on the board">

<!-- Decorative image: empty alt -->
<img src="images/wave-divider.png" alt="">

<!-- Image that is the whole point of the sentence: alt carries the meaning -->
<img src="images/roastery-floor.png" alt="Floor plan of the roastery, with the roaster against the pier wall">

The decorative divider gets alt="" — describing it would add noise ("a picture of a wave"). The floor plan's alt must carry the information the drawing shows, because someone who cannot see the image still needs it.

---

Example C — figure with a caption

<figure>
  <img src="images/roastery.jpg" alt="The roastery on the pier">
  <figcaption>The roastery, rebuilt after the 2024 storm.</figcaption>
</figure>

The caption names the year and the event; the alt names what the picture shows. They are different jobs — alt describes the image, figcaption is visible text beside it.

---

Example D — Choosing a format by hand

The café needs three images:

1. A photo of the espresso machine → JPEG — smooth gradients, no transparency needed.
2. A map graphic with flat colours showing the pier → PNG — crisp edges, flat areas, possibly transparent background.
3. The café's logo (used on every page, at many sizes) → SVG — scales without blur, tiny file.

Quick checks: a photo exported as PNG would weigh several times more; a logo with white background as JPEG would show a faint square and blurry edge.

---

Example E — An image that is a link

<a href="gallery.html">
  <img src="images/thumb-coffee.jpg" alt="A pour-over being made">
</a>

Clicking the photo opens the gallery. The alt text is announced as the link's text by screen readers — "A pour-over being made" says where the click leads far better than a raw file name would.