HTML Responsive Images

HTML Responsive Images allow web pages to display different image sizes based on screen size, device resolution, and network conditions. Using attributes like srcset and sizes, images automatically adjust for mobile, tablet, and desktop screens, improving performance and user experience.

3 views

5 min read

What are Responsive Images?

Mobile phones shouldn't download huge desktop images. It's slow and wastes data.

The problem: A 2000px image on mobile phone is:

Slow to download (takes 5-10 seconds)
Wastes mobile data (2MB instead of 200KB)
Makes page slow and frustrating

The solution: Serve small image for mobile, large image for desktop.

Method 1: srcset + sizes

1<img srcset="image-small.jpg 480w,
2             image-medium.jpg 768w,
3             image-large.jpg 1200w"
4     sizes="(max-width: 600px) 480px,
5            (max-width: 1000px) 768px,
6            1200px"
7     src="image-large.jpg"
8     alt="Responsive mountain view">

How it works:

Browser checks screen width
Looks at sizes to know how wide image should be
Picks the best image from srcset

Breaking it down:

srcset = list of images and their widths (480w = 480 pixels wide)
sizes = at different screen sizes, how wide should the image be?
src = fallback for old browsers

Method 2: Picture tag (easier to understand)

1<picture>
2    <source media="(max-width: 600px)" srcset="image-small.jpg">
3    <source media="(max-width: 1000px)" srcset="image-medium.jpg">
4    <img src="image-large.jpg" alt="Mountain view">
5</picture>

How it works:

Browser checks each source from top to bottom
First matching media condition wins
If none match, uses the <img> fallback

Method 3: Art direction (different crops for different devices)

1<picture>
2    <!-- Mobile: portrait crop (taller) -->
3    <source media="(max-width: 600px)" srcset="portrait.jpg">
4    <!-- Desktop: landscape crop (wider) -->
5    <img src="landscape.jpg" alt="Same scene, different crop">
6</picture>

Why use responsive images?

Faster page load (2-5x faster)
Saves mobile data (up to 90% data saved)
Better user experience
Better SEO (Google ranks faster sites higher)