Non-Responsive Images

What This Means

Non-responsive images are images that don't adapt to different screen sizes and display densities. They either appear too large (requiring horizontal scrolling), too small (pixelated), or waste bandwidth by serving desktop-sized images to mobile devices.

The Problem

Desktop Images on Mobile:

• A 2400x1600px image (500KB) displayed at 375px width on mobile
• User downloads 500KB but only needs 75KB
• Wastes bandwidth, slows page load, increases costs

Impact on Different Devices:

• Mobile phones: Oversized images slow loading dramatically
• Tablets: Need medium-resolution images, not desktop sizes
• Retina displays: Need 2x images for sharpness
• Standard displays: 2x images waste bandwidth unnecessarily

Impact on Your Business

Performance:

• Oversized images are the #1 cause of slow mobile load times
• Poor mobile Core Web Vitals scores (LCP)
• Increased bounce rates from slow loading
• Higher hosting and bandwidth costs

User Experience:

• Images overflow viewport requiring horizontal scrolling
• Slow image loading delays content visibility
• Excessive data usage frustrates mobile users
• Poor experience on slower connections

Search Rankings:

• Poor mobile performance hurts rankings
• Slow LCP from large images
• Mobile-first indexing penalizes slow mobile sites

Common Causes

Fixed Image Widths

<!-- Wrong: Fixed pixel width -->
<img src="large-image.jpg" width="1200" height="800">

No Srcset or Picture Elements

<!-- Wrong: Same image for all devices -->
<img src="desktop-image-2400w.jpg" alt="Product">

CSS Issues

/* Wrong: Fixed width doesn't scale */
img {
  width: 1200px;
}

/* Wrong: Not constraining to container */
img {
  /* No max-width */
}

Missing Responsive CSS

/* Missing responsive image CSS */
img {
  /* Should have max-width: 100% */
}

How to Diagnose

Method 1: PageSpeed Insights

1. Visit PageSpeed Insights
2. Enter your URL
3. Click "Analyze"
4. Look for these opportunities:
   • "Properly size images"
   • "Serve images in next-gen formats"
   • "Efficiently encode images"

What to Look For:

• Estimated savings in KB
• List of oversized images
• Recommended dimensions for each device

Method 2: Chrome DevTools Network Panel

1. Open DevTools (F12)
2. Go to Network tab
3. Filter by "Img"
4. Enable device toolbar (Ctrl+Shift+M)
5. Select mobile device
6. Reload page
7. Check image file sizes

What to Look For:

• Images larger than 200KB on mobile
• Natural size vs. displayed size mismatch
• Same large images on all devices

Method 3: Lighthouse Audit

1. Open DevTools (F12)
2. Go to Lighthouse tab
3. Select "Mobile" device
4. Run audit
5. Check "Performance" section

What to Look For:

• "Properly size images" failing
• Specific images that need optimization
• Potential savings listed

Method 4: Visual Inspection

1. Enable device toolbar in Chrome
2. Set viewport to 375px width (mobile)
3. Inspect images
4. Check for:
   • Horizontal scrolling
   • Blurry or pixelated images
   • Images larger than viewport

Method 5: Compare Image Dimensions

Using DevTools:

1. Right-click image → Inspect
2. Note "Rendered Size" in tooltip
3. Click image URL to view in Network tab
4. Note actual file dimensions
5. Compare: Is actual image much larger than rendered?

Red Flags:

• 2400px image rendered at 375px (6.4x larger)
• 1200px image rendered at 300px (4x larger)
• Same image dimensions on mobile and desktop

General Fixes

Fix 1: Add Responsive Image CSS

Make all images responsive by default:

/* Basic responsive images */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Prevent layout shift */
img {
  max-width: 100%;
  height: auto;
  width: 100%; /* or specific width */
  aspect-ratio: 16 / 9; /* maintains ratio */
}

Fix 2: Use Srcset for Different Sizes

Provide multiple image sizes for different viewports:

<img
  src="image-800w.jpg"
  srcset="
    image-400w.jpg 400w,
    image-800w.jpg 800w,
    image-1200w.jpg 1200w,
    image-1600w.jpg 1600w
  "
  sizes="(max-width: 600px) 400px,
         (max-width: 1000px) 800px,
         1200px"
  alt="Responsive image"
  width="1200"
  height="800"
>

Explanation:

• srcset: List of available image sizes
• sizes: Tells browser which size to use for each viewport
• 400w, 800w: Image width in pixels
• Browser automatically selects best image

Fix 3: Use Picture Element for Art Direction

Different images for different layouts:

<picture>
  <!-- Mobile: Cropped square image -->
  <source
    media="(max-width: 600px)"
    srcset="
      mobile-400w.jpg 400w,
      mobile-800w.jpg 800w
    "
    sizes="100vw"
  >

  <!-- Tablet: Medium crop -->
  <source
    media="(max-width: 1200px)"
    srcset="
      tablet-800w.jpg 800w,
      tablet-1200w.jpg 1200w
    "
    sizes="100vw"
  >

  <!-- Desktop: Full wide image -->
  <img
    src="desktop-1600w.jpg"
    srcset="
      desktop-1200w.jpg 1200w,
      desktop-1600w.jpg 1600w,
      desktop-2400w.jpg 2400w
    "
    sizes="100vw"
    alt="Responsive image with art direction"
    width="1600"
    height="900"
  >
</picture>

Fix 4: Optimize for Retina/High-DPI Displays

Serve 2x images only to high-DPI screens:

<img
  src="image-800w.jpg"
  srcset="
    image-400w.jpg 400w,
    image-800w.jpg 800w,
    image-800w@2x.jpg 1600w
  "
  sizes="(max-width: 600px) 400px, 800px"
  alt="Image"
>

Or using picture:

<picture>
  <source
    srcset="image-1x.jpg 1x, image-2x.jpg 2x"
    media="(min-width: 800px)"
  >
  <img src="image-1x.jpg" alt="Image">
</picture>

Fix 5: Use Modern Image Formats with Fallbacks

WebP with JPEG fallback:

<picture>
  <!-- WebP for modern browsers -->
  <source
    type="image/webp"
    srcset="
      image-400w.webp 400w,
      image-800w.webp 800w,
      image-1200w.webp 1200w
    "
    sizes="(max-width: 600px) 400px, 800px"
  >

  <!-- JPEG fallback -->
  <img
    src="image-800w.jpg"
    srcset="
      image-400w.jpg 400w,
      image-800w.jpg 800w,
      image-1200w.jpg 1200w
    "
    sizes="(max-width: 600px) 400px, 800px"
    alt="Image with modern format"
    width="800"
    height="600"
  >
</picture>

Fix 6: Lazy Load Below-Fold Images

Load images only when needed:

<!-- Above-fold: Load immediately -->
<img
  src="hero.jpg"
  srcset="hero-800w.jpg 800w, hero-1200w.jpg 1200w"
  sizes="100vw"
  loading="eager"
  fetchpriority="high"
  alt="Hero image"
>

<!-- Below-fold: Lazy load -->
<img
  src="product.jpg"
  srcset="product-400w.jpg 400w, product-800w.jpg 800w"
  sizes="(max-width: 600px) 400px, 800px"
  loading="lazy"
  alt="Product image"
  width="800"
  height="600"
>

Fix 7: Set Explicit Dimensions

Prevent layout shift:

<!-- Always include width and height -->
<img
  src="image.jpg"
  width="800"
  height="600"
  alt="Image"
  style="max-width: 100%; height: auto;"
>

<!-- Or use aspect-ratio -->
<img
  src="image.jpg"
  alt="Image"
  style="width: 100%; aspect-ratio: 4/3;"
>

Platform-Specific Guides

Platform-specific guidance:

Testing & Validation

After implementing responsive images:

Step 1: PageSpeed Insights

1. Run test on PageSpeed Insights
2. Verify "Properly size images" is no longer flagged
3. Check estimated time savings
4. Verify LCP improvement

Step 2: Test Multiple Viewports

Using Chrome DevTools:

1. Enable device toolbar
2. Test these viewports:
   • 375px (mobile)
   • 768px (tablet)
   • 1024px (small desktop)
   • 1920px (large desktop)
3. For each viewport:
   • Check no horizontal scroll
   • Verify images look sharp
   • Confirm appropriate file size loaded

Step 3: Network Analysis

1. Open Network tab in DevTools
2. Filter to Images
3. Test different viewports
4. Verify smaller images load on mobile
5. Check total image payload:
   • Mobile: < 500KB ideal
   • Desktop: < 1MB ideal

Step 4: Real Device Testing

1. Test on actual mobile devices
2. Use slow connection (3G throttling)
3. Verify images load quickly
4. Check image quality is acceptable
5. Confirm no horizontal scrolling

Step 5: Automated Testing

// Test image responsiveness
const images = document.querySelectorAll('img');
images.forEach(img => {
  const naturalWidth = img.naturalWidth;
  const renderedWidth = img.offsetWidth;
  const ratio = naturalWidth / renderedWidth;

  if (ratio > 2) {
    console.warn(`Image oversized: ${img.src}`, {
      natural: naturalWidth,
      rendered: renderedWidth,
      wastage: `${Math.round((ratio - 1) * 100)}%`
    });
  }
});

Common Mistakes

1. Using CSS width instead of HTML attributes - Causes layout shift
2. Lazy loading above-fold images - Delays LCP
3. Not providing fallback src - Breaks in older browsers
4. Same srcset for all images - Not optimizing per image
5. Forgetting width/height attributes - Causes CLS
6. Not testing on real devices - Desktop DevTools not always accurate
7. Over-optimizing quality - Images too blurry
8. Under-optimizing quality - Files too large
9. Not using WebP - Missing 30% file size savings

Further Reading

• Responsive Images - MDN
• Native Lazy Loading
• Image Optimization Guide
• Image Performance
• LCP Optimization