Images

Images turn a text page into a visual one — and they come with responsibilities.

The img element

<img src="images/cat.jpg" alt="A sleepy orange cat curled on a windowsill" />

<img> is an empty element — no closing tag. Two attributes matter from day one:

• src — where the image file lives (relative or absolute URL)
• alt — a description of the image for people (and robots) that cannot see it

Alt text is not optional

Alt text is how a screen reader says your image out loud, and what shows if the file fails to load:

<!-- Good: describes the content and purpose -->
<img src="chart.png" alt="Downloads grew from 100 to 900 in six months" />

<!-- Bad: repeats the filename, adds nothing -->
<img src="chart.png" alt="chart.png" />

<!-- Decorative only: empty alt is correct -->
<img src="divider.png" alt="" />

If an image is purely decorative, alt="" is the right answer — screen readers will skip it.

Size and layout

<img src="cat.jpg" alt="A sleepy orange cat" width="640" height="480" />

Set width and height so the browser reserves space before the file arrives — text stops jumping around while images load. CSS (later phases) will take over final sizing.

Where images come from

• Your own files, referenced relatively: src="images/cat.jpg"
• Other sites, referenced absolutely: src="https://..." — works, but makes your page depend on someone else's server

What you learned

• <img> is empty and needs src plus alt
• Alt text describes content; alt="" marks decorative images
• Width/height attributes prevent layout shift
• Prefer images you control over hotlinking strangers' servers