🖼️ HTML Foundations

Images

⏱ 1 hr2 topicsLive playground
🎯 By the end: You can place an image with the right src and alt, understand why alt text matters, and keep images from overflowing or slowing the page.

A page without images feels bare — but images done badly are also the number-one cause of slow, broken-looking websites. The <img> element is simple, and getting two attributes right (src and alt) puts you ahead of a surprising number of real sites.

1The img element

<img> is a void element — no closing tag. Instead of content, you point it at a file with src and describe it with alt:

<img src="logo.png" alt="Vidaara logo">
  • src — the image file. It can be a relative path (images/logo.png), an absolute URL, or a data URI.
  • alt — a short text description. This is not optional in practice: screen readers read it aloud, search engines index it, and it shows if the image fails to load.
Never leave out alt on a content image. Write what the image shows ("Students planting trees"), not "image of…". For purely decorative images, use an empty alt="" so screen readers skip them.
Place an image
HTML
CSS
Live preview
What's happening: The src here is a tiny inline image so it always loads. If you delete the src value, the browser shows the alt text instead — proving why alt matters.
Key points
  • <img> is a void element — no closing tag.
  • src points to the image file; alt describes it.
  • Always write meaningful alt for content images; use alt="" for purely decorative ones.

2Fast, responsive images

Two habits keep images from hurting your page:

Don't let images overflow

A big image can blow out your layout on a phone. The standard fix (you'll meet it again in the CSS track) is one CSS rule: img { max-width: 100%; height: auto; }. This lets an image shrink to fit its container while keeping its proportions.

Help the browser and save data

  • Add width and height attributes so the browser reserves space and the page doesn't jump around as images load.
  • Add loading="lazy" so off-screen images only download when the user scrolls near them — a real saving on slow connections.
  • Choose a sensibly sized file. A 4000-pixel photo for a small thumbnail wastes your visitor's data, especially on mobile.
<img src="team.jpg" alt="Our volunteers"
     width="800" height="500" loading="lazy">
Key points
  • img { max-width: 100%; height: auto; } stops images overflowing on small screens.
  • Set width and height so the page doesn't jump as images load.
  • loading="lazy" defers off-screen images, saving data on slow connections.

★ Practical: a captioned, accessible image

In any playground, add an image with:

  1. An <img> with a meaningful alt describing what it shows.
  2. A <p> caption underneath it.
  3. Add loading="lazy" to the image.
  4. Empty the src value once to confirm the alt text appears in its place.

Ready to test yourself?

Take the short quiz. Score 60% or more to mark this lesson complete.

Start the quiz →

💡 Log in to save your progress and earn the certificate.

← Previous
Links
Next →
Tables