Responsive Images & Polyfills

Responsive Images & Polyfills

Images are often the heaviest assets on a web page. Serving a 2000px wide desktop image to a 375px phone wastes bandwidth and slows loading. Let's learn how to serve the right image for every screen.

The Basic Responsive Image

The simplest responsive image technique is a CSS rule you should always include:

img {
    max-width: 100%;
    height: auto;
}

This ensures images never overflow their container. However, it still loads the full-size image — we're just shrinking it visually.

The srcset Attribute

The srcset attribute lets you provide multiple image files and let the browser choose the best one:

<img src="img/hero-800.jpg"
     srcset="img/hero-400.jpg 400w,
             img/hero-800.jpg 800w,
             img/hero-1200.jpg 1200w,
             img/hero-1600.jpg 1600w"
     sizes="100vw"
     alt="Hero image">

How srcset Works

1. You list available images with their actual widths (in w units)
2. The browser knows the viewport width and device pixel ratio
3. It picks the smallest image that will look sharp
4. On a 375px screen with 2× DPR, it needs a 750px wide image → downloads hero-800.jpg
5. On a 1440px desktop with 1× DPR → downloads hero-1600.jpg

The sizes Attribute

The sizes attribute tells the browser how wide the image will be displayed:

<img src="img/card-800.jpg"
     srcset="img/card-400.jpg 400w,
             img/card-800.jpg 800w,
             img/card-1200.jpg 1200w"
     sizes="(max-width: 480px) 100vw,
            (max-width: 768px) 50vw,
            33vw"
     alt="Service card">

This tells the browser:

• On mobile (≤480px): image is 100% of viewport width
• On tablet (≤768px): image is 50% of viewport width
• On desktop: image is 33% of viewport width

The browser uses this information to calculate which srcset image to download.

The <picture> Element

For art direction (showing a differently-cropped image at each size), use the <picture> element:

<picture>
    <source media="(max-width: 480px)" 
            srcset="img/hero-mobile.jpg">
    <source media="(max-width: 768px)" 
            srcset="img/hero-tablet.jpg">
    <img src="img/hero-desktop.jpg" 
         alt="Hero image">
</picture>

Format Switching with <picture>

Serve modern, smaller formats with fallbacks:

<picture>
    <source type="image/avif" srcset="img/photo.avif">
    <source type="image/webp" srcset="img/photo.webp">
    <img src="img/photo.jpg" alt="Photo">
</picture>

When to Use What

Technique	Use When
max-width: 100%	Basic fluid image — always include this
srcset + sizes	Same image at multiple resolutions
<picture> + media	Different crops/images per breakpoint (art direction)
<picture> + type	Serving modern formats (AVIF, WebP) with fallback

Modern Image Formats

Format	Size vs JPEG	Browser Support
JPEG	Baseline	Universal
WebP	25-35% smaller	All modern browsers
AVIF	40-50% smaller	Chrome, Firefox, Safari 16+

What Are Polyfills?

A polyfill is a JavaScript library that adds support for a feature that a browser doesn't natively support. For responsive images, the most important polyfill is Picturefill.

Picturefill — The Responsive Image Polyfill

Picturefill adds <picture>, srcset, and sizes support to older browsers (IE, old Android):

<!-- Add before closing </body> tag -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/picturefill/3.0.3/picturefill.min.js"></script>

With Picturefill loaded, your responsive image markup works everywhere — even in browsers that don't natively support it.

Do You Still Need Polyfills?

As of 2025, polyfills are rarely needed for responsive images:

Feature	Global Support	Polyfill Needed?
srcset	97%+	Not for modern projects
<picture>	97%+	Not for modern projects
WebP	96%+	No — use with JPEG fallback
AVIF	88%+	No — use with WebP/JPEG fallback

However, if your project targets older browsers or corporate environments, Picturefill is a lightweight safety net.

Other Useful Polyfills for Responsive Design

Polyfill	What It Adds
Picturefill	<picture>, srcset, sizes
Respond.js	Media query support for IE 6-8
css-vars-ponyfill	CSS custom properties for IE 11
flexibility	Flexbox support for IE 10

Lazy Loading Images

For additional performance, add native lazy loading:

<img src="img/photo.jpg"
     loading="lazy"
     alt="Lazy loaded photo">

The loading="lazy" attribute defers loading until the image is near the viewport — saving bandwidth on initial page load.

Key Takeaways

• Always include img { max-width: 100%; height: auto; } for basic fluid images
• Use srcset + sizes to serve resolution-appropriate images automatically
• Use <picture> for art direction (different crops) and format switching (WebP/AVIF)
• Picturefill polyfills responsive images for older browsers (rarely needed in 2025)
• Add loading="lazy" to images below the fold for better performance