🧱 Days 1–5 – HTML Foundations · Day 04
Day 4: Images, Audio, Video & Embeds
⏱ 75 min📶 Beginner🎯 100% self-study
Day 4 / 15
✅ Today you will learn
- <img> with src, alt, width and height
- Image formats: JPG, PNG, WebP, SVG
- figure + figcaption and image links
- Responsive images: srcset, sizes, picture, lazy loading
- audio, video and iframe embeds (YouTube, Google Maps)
🏢 In the real world
People buy sweets with their eyes. The menu needs photos that load fast on a 4G phone, a short shop video, the shop bell sound for fun and a Google Map so customers can find Johari Bazaar.
The image tag
HTML
<img src="images/kaju-katli-400.webp" alt="Three pieces of kaju katli, ₹900 per kg" width="400" height="300">
| Attribute | Why it matters |
|---|---|
| src | Path of the image file |
| alt | Text for blind users, Google Images and when the image fails to load |
| width / height | Reserves space so the page does not jump while loading |
| loading="lazy" | Loads below-the-fold images only when needed – faster pages |
| decoding="async" | Lets the browser decode images without blocking |
Bad alt text
- alt="image"
- alt="IMG_2041.jpg"
- alt="sweet sweet sweet best sweet shop"
- missing alt
Good alt text
- alt="Kaju katli pieces on a silver plate"
- alt="" for purely decorative images
- Describe what matters in context
- Keep it under ~125 characters
Which image format?
📷
JPGPhotos. Small files, no transparency.🖼️
PNGLogos and screenshots with transparency. Bigger files.⚡
WebP / AVIFModern formats: 25–50% smaller than JPG. Best default today.✏️
SVGVector icons and logos – sharp at any size (Day 12).figure, captions and image links
HTML
<figure> <img src="images/rasmalai-400.webp" alt="Rasmalai in saffron milk" width="400" height="300"> <figcaption>Rasmalai – soft paneer discs in saffron milk, ₹40 each.</figcaption> </figure> <a href="menu.html"><img src="images/logo.png" alt="Sharma Sweets home" width="80" height="80"></a>
Responsive and fast images
HTML
<img src="images/ghewar-400.webp"
srcset="images/ghewar-400.webp 400w, images/ghewar.webp 800w"
sizes="(max-width: 600px) 100vw, 400px"
alt="Ghewar topped with malai" width="400" height="300"
loading="lazy" decoding="async">🧠 How srcset works
You list the same picture in several widths (400w, 800w) and tell the browser how wide it will be shown (sizes). A phone downloads the small file; a laptop with a sharp screen downloads the big one. Same HTML, less data.
HTML
<picture> <source srcset="images/ladoo.webp" type="image/webp"> <img src="images/ladoo-400.webp" alt="Besan ladoo" width="400" height="300"> </picture>
Audio and video
HTML
<audio controls src="images/bell.mp3">Your browser does not support audio.</audio> <video controls width="480" poster="images/shop-poster.jpg" preload="metadata" playsinline> <source src="images/shop.mp4" type="video/mp4"> Sorry, your browser cannot play this video. <a href="images/shop.mp4">Download it</a>. </video>
| Attribute | Effect |
|---|---|
| controls | Shows play/pause/volume |
| poster | Image shown before the video starts |
| autoplay muted | Autoplay works only when muted (browser rule) |
| loop | Repeats forever |
| preload="metadata" | Loads only duration and size – saves data |
| playsinline | Plays inside the page on iPhone instead of full screen |
Embedding YouTube and Google Maps
HTML – embed codes (copy from YouTube “Share → Embed” or Maps “Share → Embed a map”)
<!-- YouTube -->
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/VIDEO_ID"
title="How we make ghewar" loading="lazy"
allow="accelerometer; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<!-- Google Maps -->
<iframe src="https://www.google.com/maps?q=Johari+Bazaar+Jaipur&output=embed"
width="600" height="300" style="border:0" loading="lazy"
title="Map to Sharma Sweets, Johari Bazaar" referrerpolicy="no-referrer-when-downgrade"></iframe>💡 Speed tip
Embeds load a lot of extra code. Add loading="lazy", use youtube-nocookie.com for privacy, and never put five videos on one page.
Real example: the menu gallery
HTML
<h2>Our bestsellers</h2> <figure> <img src="images/kaju-katli-400.webp" alt="Kaju katli" width="200" height="150" loading="lazy"> <figcaption><strong>Kaju katli</strong> – ₹900/kg</figcaption> </figure> <figure> <img src="images/ghewar-400.webp" alt="Ghewar with malai" width="200" height="150" loading="lazy"> <figcaption><strong>Ghewar</strong> – ₹650/kg (Teej special)</figcaption> </figure> <figure> <img src="images/ladoo-400.webp" alt="Besan ladoo" width="200" height="150" loading="lazy"> <figcaption><strong>Besan ladoo</strong> – ₹500/kg</figcaption> </figure>
🏅 Job skills unlocked today
✔ Add images with meaningful alt text✔ Choose formats and serve responsive images✔ Add captions, audio and video✔ Embed maps and videos responsibly
Practice tasks
🏋️ Practice – do it yourself
Task 1: Add a figure with the rasmalai photo, a caption and a link around the image to
menu.html#milk.Show solution
HTML
<figure> <a href="menu.html#milk"><img src="/assets/img/tutorials/html/rasmalai-400.webp" alt="Rasmalai – see milk sweets" width="300" height="225"></a> <figcaption>Rasmalai – tap to see all milk sweets</figcaption> </figure>
Task 2: Write alt text for: (1) a photo of the shop front, (2) a decorative divider line, (3) a chart of Diwali sales.
Task 3: Embed the shop video so it autoplays silently in a loop as a background banner.
Show solution
HTML
<video autoplay muted loop playsinline width="480" poster="/assets/img/tutorials/html/shop-poster.jpg"> <source src="/assets/img/tutorials/html/shop.mp4" type="video/mp4"> </video>
Quick quiz
🧠 Quick Quiz – test yourself
1. Why give images width and height?
Better Core Web Vitals (CLS).
2. Best alt for a purely decorative image?
Empty alt tells screen readers to skip it.
3. Which format is usually smallest for photos?
Modern compression.
4. Autoplay video works in browsers when…
Browser policy.
5. srcset lets the browser…
Responsive images.
Interview corner
💼 Interview Corner
How do you optimise images for performance?
Use modern formats (WebP/AVIF), correct dimensions, srcset/sizes for responsive delivery, lazy-load below-the-fold images, set width/height to avoid layout shift, compress, and serve via CDN with caching.
What is the purpose of the alt attribute?
It provides a text alternative for screen-reader users, shows when the image fails to load and helps search engines understand the image.
Summary
- img needs src, alt, width and height; lazy-load lower images.
- WebP for photos, PNG for transparency, SVG for icons.
- figure/figcaption for captions; srcset/sizes/picture for responsive images.
- audio/video with controls and poster; iframes for YouTube and Maps.
➡️ Next
Day 5: lists and tables – build the price list and the bulk-order rate table.
Frequently Asked Questions
Can I use images from Google?
Only if you have permission or the licence allows it (e.g. Unsplash, Pexels free licences). Your own photos are best for a business.
Why is my image not showing?
Check the path and spelling (case-sensitive on servers), the file extension and that the file was uploaded. Open DevTools → Network to see a 404.
