Lesson 5: HTML Images

Learning goals: By the end, you'll know how to add images to a page, write good alt text, control image size, and choose the right file format.

Adding an image
Images use the <img> element. It's a void element, so it has no closing tag.

htmlCopy<img src="cat.jpg" alt="A grey cat sleeping on a sofa">  
Try:Agent|Desktop

• src (source) is the path or URL of the image file.
• alt (alternative text) describes the image in words.

Image paths
Image paths work just like link paths (Lesson 4).

htmlCopy<img src="cat.jpg" alt="A cat">                          <!-- same folder -->  
<img src="images/cat.jpg" alt="A cat">                   <!-- subfolder -->  
<img src="../images/cat.jpg" alt="A cat">                <!-- one folder up -->  
<img src="https://example.com/cat.jpg" alt="A cat">      <!-- another website -->  
Try:Agent|Desktop

Tip: keep your images in an images folder and use lowercase file names with no spaces (grey-cat.jpg).

Why alt text matters
The alt text is:

• read aloud by screen readers
• shown if the image fails to load
• used by search engines

Rules of thumb:

• Describe what matters about the image, in context.
• Don't start with "Image of..." since screen readers already say it's an image.
• For purely decorative images, use an empty alt: alt="".

Controlling size

htmlCopy<img src="cat.jpg" alt="A grey cat" width="300" height="200">  
Try:Agent|Desktop

• width and height are in pixels.
• Setting both lets the browser reserve space before the image loads, which stops the page jumping around.
• Keep the original proportions (aspect ratio) or the image will look stretched.

Later, CSS will do most of the resizing. A common rule is:

cssCopyimg { max-width: 100%; height: auto; }  
Try:Agent|Desktop

Image file formats

Keep files small. Huge images slow down your page, so resize them before uploading.

Figures and captions
Use <figure> and <figcaption> when an image needs a caption.

htmlCopy<figure>  
  <img src="images/beach.jpg" alt="Waves rolling onto an empty beach at sunset">  
  <figcaption>Sunset at Brighton Beach, July 2025.</figcaption>  
</figure>  
Try:Agent|Desktop

Lazy loading
For images further down the page, add loading="lazy". The browser then loads them only when needed.

htmlCopy<img src="images/gallery1.jpg" alt="Mountain lake" loading="lazy">  
Try:Agent|Desktop

Common mistakes

• Leaving out alt
• Wrong file path or capitalisation (Cat.JPG vs cat.jpg)
• Setting only a fixed width and height that distort the image
• Using huge photos straight from a camera
• Using spaces in file names

Key takeaways

• <img src="..." alt="..."> adds an image.
• Always write meaningful alt text, or alt="" for decorative images.
• Set width and height to prevent layout jumps.
• Use JPEG for photos, PNG for transparency, SVG for icons.
• <figure> and <figcaption> add captions.

Exercises

1. Identify. In <img src="images/dog.png" alt="A brown dog" width="200">, which attribute is the file path, and where is the file stored?
   Answer: src. It's in the images subfolder, next to your HTML file.
2. Fix the errors.

   htmlCopy<img src=dog.png>  
   <img src="my dog.jpg" alt="image of image">  
   <img src="dog.jpg" alt="A dog"></img>  
   Try:Agent|Desktop

   
   Hints: quote src and add alt, remove the space in the file name and write useful alt text, and remove the unneeded </img>.
3. Build it. Create images.html and an images folder. Add:
   • a photo with meaningful alt text and set width and height
   • a <figure> with a <figcaption>
   • a clickable image that links to another page (use Lesson 4)
4. Challenge. Make a mini gallery of three images with loading="lazy". Then break one src on purpose and see how the alt text appears.

Lesson 5 checkpoint

• I can add an image with src and alt.
• I can write helpful alt text.
• I can pick the right file format.
• I can add a caption with <figure>.