Responsive Image Tester

Check whether images on any webpage are properly sized for their display containers. Spot oversized images wasting bandwidth and undersized images appearing blurry.

Why Responsive Image Sizing Matters

Responsive web design means images should match their display context. Serving a desktop-sized hero image to a mobile phone wastes data and slows load times. Conversely, a small image stretched beyond its natural size looks blurry and unprofessional.

ScenarioImpactFix
Natural 2x larger than renderedAcceptable for retina displaysUse srcset for density switching
Natural 3x+ larger than renderedWasting significant bandwidthResize to 2x rendered max
Natural smaller than renderedBlurry, pixelated displayUse a higher resolution source
Natural matches renderedOptimalConsider 2x for retina

What This Test Reveals

  • Size ratio: How each image's natural dimensions compare to its rendered area
  • Hidden images: Images loaded but not visible (zero rendered dimensions)
  • Background images: CSS images that DevTools don't easily surface
  • JS-loaded images: Images added by frameworks after initial HTML parsing

The srcset Solution

The HTML srcset attribute lets browsers choose the right image size automatically. After scanning your page, look for images where natural dimensions are 3x+ the rendered size — those are candidates for srcset optimization.

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

Related