Links, images, lists and tables
Images
Images with img: alternative text for people who cannot see them, dimensions that stop the page jumping, the right format, and lazy loading.
In this lesson you will
- Place an image with alt, width and height
- Choose the right format (JPEG, PNG, SVG, WebP, AVIF)
- Pair an image with its caption using figure and figcaption
<img src="/images/cat.webp" alt="An orange cat asleep on a book" width="640" height="427">- src is the image file’s address.
- alt describes the image for screen readers, for when the image fails to load, and for search engines. A purely decorative image gets an empty alt="" so screen readers skip it.
- width and height reserve the image’s space in advance so the page does not jump while it loads (what Google measures as CLS).
Which format?
- JPEG for photographs; PNG for images with a transparent background; SVG for logos and icons (vector, sharp at any size).
- WebP and AVIF are modern formats, much lighter at the same quality; today’s browsers read both.
<figure>
<img src="/images/yazd.webp" alt="The wind towers of Yazd at sunset" width="800" height="533" loading="lazy">
<figcaption>The wind towers of Yazd at sunset</figcaption>
</figure> Exercise
Show the Mashaal mark with a meaningful alt, width and height 128, inside a figure with a caption (figcaption). The image address: /images/brand/locked-20260920/mark-256.webp
Aim for:
- An image inside a figure
- A meaningful alt (a few letters at least)
- Width and height of 128
- A figcaption
Lesson quiz
3 questions — marked by Mashaal’s server, every answer explained.
1What is alt for?
2Why write width and height?
3Which format keeps a logo sharp at any size?