Responsive Images: Serving the Right Size to Every Device

Introduction

A single image size doesn’t fit all screens. When you serve a 2000px wide image to a mobile phone with a 400px viewport, you’re wasting bandwidth and slowing down page load. Responsive images solve this by letting browsers choose the most appropriate image size for each device.

The UXR SEO Analyzer checks for responsive image implementation because oversized images are one of the most common causes of poor Core Web Vitals scores, especially on mobile devices.

What Are Responsive Images?

Responsive images are a set of HTML features that allow you to provide multiple versions of an image at different sizes, letting the browser select the best one based on the user’s device, viewport width, and screen density.

The key attributes are:

• srcset: Lists available image files with their widths or pixel densities
• sizes: Tells the browser how wide the image will be displayed at different viewport sizes

<img
  src="hero-800w.jpg"
  srcset="hero-400w.jpg 400w,
          hero-800w.jpg 800w,
          hero-1200w.jpg 1200w,
          hero-1600w.jpg 1600w"
  sizes="(max-width: 600px) 100vw,
         (max-width: 1200px) 50vw,
         800px"
  alt="Hero image description"
>

Why Responsive Images Matter

1. Dramatically Reduced Page Weight

Images typically account for 40-60% of a webpage’s total size. Serving appropriately sized images can reduce this significantly:

Image Size Impact by Device:
┌────────────────────────────────────────────────────────┐
│ Device         │ Viewport │ Optimal Size │ Savings    │
├────────────────┼──────────┼──────────────┼────────────┤
│ Mobile         │ 400px    │ 400w         │ ~75%       │
│ Tablet         │ 768px    │ 800w         │ ~50%       │
│ Desktop        │ 1920px   │ 1600w        │ Baseline   │
└────────────────────────────────────────────────────────┘

2. Faster Load Times

Smaller images load faster. On a 3G mobile connection:

• 2000px image (800KB): ~6 seconds
• 400px image (80KB): ~0.6 seconds

3. Better Core Web Vitals

Responsive images directly improve:

• LCP (Largest Contentful Paint): Hero images load faster
• Overall page speed: Less data to download
• Mobile experience: Critical for mobile-first indexing

4. Reduced Bandwidth Costs

Both for you (hosting/CDN costs) and your users (data plans). This is especially important for users on metered connections.

How srcset and sizes Work

The srcset Attribute

srcset provides a list of image sources with their intrinsic widths:

srcset="small.jpg 400w, medium.jpg 800w, large.jpg 1600w"

The w descriptor tells the browser the actual pixel width of each image file.

The sizes Attribute

sizes tells the browser how wide the image will display at different viewport sizes:

sizes="(max-width: 600px) 100vw,
       (max-width: 1200px) 50vw,
       800px"

This reads as:

1. If viewport is 600px or less → image displays at 100% viewport width
2. If viewport is 1200px or less → image displays at 50% viewport width
3. Otherwise → image displays at 800px

How the Browser Decides

The browser combines srcset and sizes to calculate which image to download:

1. Determines the display width from sizes
2. Considers the device pixel ratio (DPR)
3. Selects the smallest image from srcset that meets requirements

Example: On a mobile device (400px viewport, 2x DPR):

• Display width: 400px (100vw)
• Required pixels: 400 × 2 = 800px
• Selected image: medium.jpg 800w

The Picture Element

For more control, use the <picture> element for art direction—showing different crops or compositions on different devices:

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

This also works for serving modern formats with fallbacks:

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

How UXR SEO Analyzer Checks This

The analyzer evaluates your responsive image implementation by checking:

• Missing srcset attributes on large images
• Missing sizes attributes when srcset uses width descriptors
• Oversized images being served to small viewports
• Single-size images that could benefit from multiple versions

A good target is having responsive images for any image over 50KB.

Common Mistakes to Avoid

1. Forgetting the sizes Attribute

<!-- Missing sizes - browser can't optimize -->
<img srcset="small.jpg 400w, large.jpg 1600w" src="large.jpg">

<!-- Fixed -->
<img srcset="small.jpg 400w, large.jpg 1600w"
     sizes="(max-width: 600px) 100vw, 50vw"
     src="large.jpg">

2. Not Providing Enough Size Options

Provide images at meaningful breakpoints. A good starting set:

• 400w (mobile)
• 800w (tablet/small desktop)
• 1200w (desktop)
• 1600w (large desktop/retina)

3. Using CSS to Resize Large Images

CSS resizing doesn’t save bandwidth—the full image still downloads.

4. Ignoring Device Pixel Ratio

Modern phones have 2x or 3x pixel density. An image displayed at 400px needs 800-1200px of actual pixels to look sharp.

Quick Checklist

• [ ] Large images (>50KB) have srcset attribute
• [ ] srcset images use width descriptors (400w, 800w, etc.)
• [ ] sizes attribute matches your CSS layout
• [ ] At least 3-4 size options provided
• [ ] Fallback src points to a reasonable default
• [ ] Alt text is present on all images

Next Steps

For detailed implementation including automated generation, CDN integration, and advanced art direction techniques, read our comprehensive Responsive Images Implementation Guide.

---

Related Articles

• Image Optimization Explained - Complete overview of image optimization
• Modern Image Formats Explained - WebP and AVIF guide
• Images SEO Hub - All image optimization guides

---

References

1. MDN Web Docs - Responsive images
2. web.dev - Serve responsive images
3. Chrome Developers - Properly size images
4. Google Search Central - Google Images best practices