What you will learn
You will embed media that loads fast on Ghana data - and still looks pro.
Images that don't chop data
<img src="bread-small.jpg" alt="Sugar bread close-up" width="100%">
<p><small>Photo: Ama's Bakery, Klagon - 7am batch</small></p>
Tips:
- Use width="100%" for mobile-friendly, not fixed 800px.
- Keep file <200KB: compress on phone with Photo Compress app.
- 3 images max per page for slow networks.
Figure + caption (pro way):
<figure>
<img src="shop.jpg" alt="Klagon Community Bakery front" width="100%">
<figcaption>Our shop near Sakumono junction</figcaption>
</figure>
Audio + Video (no YouTube needed)
<video src="baking.mp4" controls width="100%"></video>
<audio src="jingle.mp3" controls></audio>
- Always
controlsor users can't play. - Add text fallback:
<p>Video: how we bake at 5am</p>
YouTube embed (needs data):
<iframe width="100%" height="215" src="https://www.youtube.com/embed/VIDEO_ID" title="Bakery video"></iframe>
Exercise
- Add 1 figure + figcaption to your Bakery page.
- Add 1 video OR audio with controls + description.
- Test on phone data: does page load in <10 sec? If not, remove 1 image.
Why it works (theory in 3 lines): figure groups image + caption as one unit for readers. controls hands play to user, no autoplay data theft. width 100% scales to phone, fixed px overflows and chops.
Summary
- figure/figcaption = pro photo block
- controls required for audio/video
- Mobile-first: width 100%, small files
[+10 XP]