Responsive Images

What are Responsive Images?

Responsive images automatically serve different image sizes based on the viewer's device and screen. A phone might receive a 400px wide image while a desktop gets 1200px – same photo, appropriate file size for each.

Without responsive images, mobile users download desktop-sized images they'll never see at full resolution. This wastes bandwidth and slows page loading.

Why Responsive Images Matter

Performance

Images typically account for 50% or more of page weight. Serving appropriately sized images can cut this dramatically.

Mobile Experience

Phone users often have slower connections and data limits. Smaller images load faster and use less data.

Core Web Vitals

Properly optimised images improve Largest Contentful Paint (LCP), directly impacting SEO.

How Responsive Images Work

srcset Attribute

HTML's srcset attribute lists multiple image sizes. The browser chooses the most appropriate one:

<img src="photo-800.jpg"
     srcset="photo-400.jpg 400w,
             photo-800.jpg 800w,
             photo-1200.jpg 1200w"
     sizes="(max-width: 600px) 400px, 800px">

Picture Element

For art direction – showing different crops on different screens:

<picture>
  <source media="(max-width: 600px)" srcset="photo-mobile.jpg">
  <source media="(min-width: 601px)" srcset="photo-desktop.jpg">
  
</picture>

Best Practices

• Generate multiple sizes of each image (e.g., 400px, 800px, 1200px, 2000px)
• Use modern formats like WebP alongside responsive sizing
• Let the browser decide – it knows the device better than you
• Don't forget retina displays – they need 2x pixel density
• Combine with lazy loading for images below the fold

Most modern CMS platforms and frameworks handle responsive images automatically.