HTML — Lesson 17
HTML Media Elements
Displaying images with modern formats and responsive techniques.
HTML Media Elements
Modern HTML provides powerful ways to display images with multiple formats, responsive sizing, and lazy loading for optimal performance.
Image Formats Comparison
| Format | Best For | Transparency | Animation | Size |
|---|---|---|---|---|
| JPEG | Photographs | No | No | Small |
| PNG | Graphics, screenshots | Yes | No | Medium |
| WebP | Everything (modern) | Yes | Yes | Smallest |
| SVG | Icons, logos, illustrations | Yes | Yes | Tiny |
| AVIF | Photographs (newest) | Yes | Yes | Tiny |
The picture Element (Art Direction)
Show different image versions based on screen size or format support.
<picture>
<source srcset="hero.avif" type="image/avif">
<source srcset="hero.webp" type="image/webp">
<img src="hero.jpg" alt="Hero banner" width="800" height="400">
</picture>
figure & figcaption
Semantically caption images, code blocks, or media.
<figure>
<img src="chart.png" alt="Sales chart 2026">
<figcaption>Figure 1: Quarterly sales growth</figcaption>
</figure>
Lazy Loading
Delay loading of off-screen images for faster initial page load.
<!-- Native lazy loading (no JS needed) -->
<img src="photo.webp" alt="Description" loading="lazy" width="400" height="300">
Responsive Images with srcset
<img
src="photo-800.jpg"
srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1200.jpg 1200w"
sizes="(max-width: 600px) 100vw, 50vw"
alt="Responsive photo"
>
Tip: Always serve images in modern formats (WebP) with a JPEG/PNG fallback using
<picture>. Always set width and height attributes to prevent layout shifts.
Practice what you learned in the Deoit Editor — a free, browser-based code editor.
Open Editor →