Chapter 12: Images & Media
Images & Media in HTML — one of the most exciting (and visual!) parts of building websites.
After all, the web is not just text — images, videos, audio, and graphics make pages come alive, tell stories faster, and keep users engaged longer. But if not handled properly, they can also slow down your site, break accessibility, or look bad on mobile.
1. Why Images & Media Matter So Much
- Images = 50–70% of most web page weight (biggest performance killer if not optimized)
- Good media → higher engagement, better storytelling
- Bad media → slow loading, accessibility issues (blind users can’t “see” images), SEO penalty
- Modern goal: Fast + beautiful + accessible + responsive on every device
2. Core HTML Elements for Images & Media
A. The <img> Tag – The Most Important One
This is how you add almost every static image.
Basic (but incomplete) syntax:
HTML
|
0 1 2 3 4 5 6 |
<img src="photo.jpg" alt="Description of the photo"> |
Mandatory attributes (never skip these!):
- src = source URL or path (relative or absolute)
- alt = alternative text (accessibility + SEO + shows if image fails to load)
Good alt examples:
- Good: alt=”Young developer smiling while coding in VS Code in Hyderabad cafe”
- Bad: alt=”img1.jpg” or alt=”” (unless purely decorative)
Decorative images (logos, icons, backgrounds that add no meaning):
HTML
|
0 1 2 3 4 5 6 |
<img src="decorative-line.png" alt=""> |
B. Modern Responsive Images (2026 Must-Know)
We don’t serve the same huge image to phone and 4K monitor — that wastes data.
Two powerful techniques:
- srcset + sizes (most common)
HTML
|
0 1 2 3 4 5 6 7 8 9 10 11 |
<img src="small.jpg" srcset="small.jpg 480w, medium.jpg 768w, large.jpg 1200w, xlarge.jpg 2000w" sizes="(max-width: 480px) 100vw, (max-width: 768px) 80vw, 1200px" alt="Responsive city skyline at sunset" > |
- srcset = list of images with width descriptors (w)
- sizes = tells browser which image to pick based on viewport width
- <picture> element (art direction / format switching)
HTML
|
0 1 2 3 4 5 6 7 8 9 10 11 |
<picture> <!-- Serve WebP to browsers that support it --> <source srcset="photo.webp" type="image/webp"> <!-- Fallback to JPEG for older browsers --> <img src="photo.jpg" alt="Developer drinking Irani chai"> </picture> |
WebP/AVIF = smaller files, same quality → use them in 2026!
C. <figure> + <figcaption> – Semantic Image + Caption
Wrap images that need explanation (like diagrams, photos in articles).
HTML
|
0 1 2 3 4 5 6 7 8 9 |
<figure> <img src="code-screenshot.png" alt="HTML boilerplate code example"> <figcaption>Basic HTML5 document structure every page should start with</figcaption> </figure> |
This is semantic — screen readers announce “figure” + caption.
D. Audio – The <audio> Element
Simple embedded sound player.
HTML
|
0 1 2 3 4 5 6 7 8 9 |
<audio controls> <source src="chai-pour.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio> |
- controls = shows play/pause/volume bar
- Fallback text inside for old browsers
E. Video – The <video> Element
Similar to audio, but with bigger impact.
HTML
|
0 1 2 3 4 5 6 7 8 9 10 11 |
<video controls width="600" poster="thumbnail.jpg"> <source src="coding-time-lapse.mp4" type="video/mp4"> <source src="coding-time-lapse.webm" type="video/webm"> Your browser does not support the video tag. <p>Alternative: <a href="coding-time-lapse.mp4">Download the video</a></p> </video> |
- poster = thumbnail image before play
- Multiple <source> for format fallback (MP4 + WebM best combo)
- width/height or CSS control size
3. Complete Example – Images & Media Page
index.html (copy-paste & run with Live Server)
HTML
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Images & Media – Webliance Learning</title> <link rel="stylesheet" href="style.css"> </head> <body> <header> <h1>Images & Media in HTML</h1> <p>Hyderabad 2026 – Making pages visual & fast</p> </header> <main class="container"> <section> <h2>Basic Image with Proper Alt</h2> <img src="https://images.unsplash.com/photo-1516321310764-9f3c9619d7d7?w=800" alt="Person happily coding on a laptop in a bright room" width="500"> </section> <section> <h2>Responsive Image (srcset example)</h2> <img src="https://images.unsplash.com/photo-1498050108023-c5249f4df085?w=400" srcset="https://images.unsplash.com/photo-1498050108023-c5249f4df085?w=400 400w, https://images.unsplash.com/photo-1498050108023-c5249f4df085?w=800 800w, https://images.unsplash.com/photo-1498050108023-c5249f4df085?w=1200 1200w" sizes="(max-width: 600px) 100vw, 600px" alt="Beautiful colorful code on dark screen"> </section> <section> <h2>Figure with Caption</h2> <figure> <img src="https://images.unsplash.com/photo-1571934811356-5cc061b6821f?w=600" alt="Traditional Irani chai cup with biscuits on table"> <figcaption>Nothing beats chai + code at 4 PM in Hyderabad ☕</figcaption> </figure> </section> <section> <h2>Embedded Audio (Chai Pouring Sound? Imagine!)</h2> <audio controls> <source src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3" type="audio/mpeg"> Your browser doesn't support audio. </audio> </section> <section> <h2>Video Example</h2> <video controls width="600" poster="https://images.unsplash.com/photo-1516321310764-9f3c9619d7d7?w=600"> <source src="https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/mp4"> Your browser doesn't support video. </video> </section> </main> <footer> <p>© 2026 Webliance • Keep adding visuals wisely!</p> </footer> </body> </html> |
style.css (basic clean look)
CSS
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
* { margin:0; padding:0; box-sizing:border-box; } body { font-family:system-ui, sans-serif; line-height:1.6; background:#f8fafc; color:#1e293b; } .container { max-width:1000px; margin:0 auto; padding:20px; } header { text-align:center; padding:3rem 0; background:#1e40af; color:white; } h1 { font-size:2.8rem; } h2 { color:#1d4ed8; margin:2.5rem 0 1rem; } img, video { max-width:100%; height:auto; display:block; margin:1.5rem auto; border-radius:8px; box-shadow:0 4px 12px rgba(0,0,0,0.1); } figure { text-align:center; } figcaption { font-style:italic; color:#64748b; margin-top:0.8rem; } audio, video { margin:2rem auto; display:block; } footer { text-align:center; padding:2rem; color:#64748b; background:#0f172a; } |
Save → Open with Live Server → resize browser window → see how images adapt!
Quick Mastery Checklist (2026 Edition)
- Always include meaningful alt text
- Use srcset + sizes for responsive images
- Prefer WebP/AVIF with <picture> fallback
- Wrap meaningful images in <figure> + <figcaption>
- Add controls to <audio>/<video>
- Provide fallback content inside media tags
- Never stretch images (use height:auto or object-fit in CSS)
- Compress images before upload (tools: TinyPNG, Squoosh)
How does the page look/feel when you resize or on your phone? Images loading fast? Captions clear?
Next steps you might want (just say):
- “how to optimize images for speed”
- “add lazy loading to images”
- “create image gallery with CSS”
- “embed YouTube video properly”
- “background images vs <img> tag”
You’re making pages more alive now — awesome progress! Chai break? Then let’s keep going ☕🚀
