Images
🏠The everyday picture
A photo in a newspaper has a caption underneath. If the photo fails to print, the caption still tells you what it showed.
📘What it really is
<img src="images/me.jpg" alt="Asha standing outside the Patna High Court">srcis the image's path (keep images in animagesfolder);alt(alternative text) describes the image for people who can't see it: screen-reader users, people on slow connections where the image fails, and search engines.-
Writing good
alt: describe what matters in the image for this page, briefly. Purely decorative images get an emptyalt=""so screen readers skip them. -
File formats:
.jpgfor photos;.pngfor graphics with sharp edges or transparency;.webp, a modern format, smaller than both;-
.svgfor logos and icons, which stay sharp at any size. -
Size matters: a photo straight from a phone can be 5 MB. Resize it to the size it's shown at (often 1,200 pixels wide or less) and compress it (squoosh.app does both). Remember Module 7: every visitor downloads it.
-
Add
widthandheightattributes so the page doesn't jump about while images load. - Only use images you have the right to use.
🖱️Try it
Put a photo in my-first-site/images/, resize and compress it with squoosh.app, and add it to your introduction
page with a meaningful alt. Check its file size in your file manager before and after.
✅Quick check
What alt would you write for a decorative line between two sections?
Show the answer
An empty one, alt="", so screen readers skip it.
Your homepage takes 10 seconds to load on a phone. What's the first thing to check?
Show the answer
Image sizes. Large, uncompressed photos are the most common cause of slow pages.