20 min read
Images
The img element, src and alt, width and height, figures with captions, lazy loading — and relative paths to your images folder.
The img Element
Adding a photoHTML
<img src="images/cakes/love-cake.webp" alt="A tray of golden love cake" width="300" height="300">What the browser shows
| img attributes | |
|---|---|
Paths to Images
Kasun's photos live in images/ with a sub-folder for each gallery category. From any page at the top of the site folder, the paths are:
images/logo.svgimages/teas/cup-of-tea.webpimages/cakes/kokis.webpimages/room/cafe-interior.webp
Figures with Captions
figure and figcaptionHTML
<figure> <img src="images/teas/tea-picking.webp" alt="A tea plucker picking leaves on a hillside estate" width="320"> <figcaption>Our tea is hand-picked on hill-country estates.</figcaption></figure>What the browser shows
<figure> groups an image with its <figcaption>. It is ideal for the gallery, where each photo needs a caption (and, if needed, a credit).
Size and Quality
The width and height attributes only change how big the image looks — the browser still downloads the whole file. Resize and compress photos before you add them (see Choosing and Optimising Images in the Planning course). Never set a width and height that change the picture's shape, or it will look stretched.
index.html
What the browser shows
Practice
More lessons in HTML · Next: Links Between Pages · Previous: Lists