Responsive Image Checker

What are responsive images?

A responsive image is one the browser can fetch at a size that suits the screen. With srcset you list the same picture at several widths, and with sizes you say how wide it will be displayed. A phone then downloads the 480 pixel file and a large monitor the 1600 pixel one. The <picture> element goes further and lets you offer different formats or crops.

Without this, every device receives the largest version. A phone downloading a 2000 pixel photo to show it 360 pixels wide wastes most of those bytes, and that is the most common reason for a slow mobile page.

What this tool checks and why

It starts with the viewport meta tag, because without width=device-width a phone renders the page at desktop width and nothing is responsive. It then counts how many images carry srcset or sit inside <picture>. SVG images are left out, since vectors scale on their own.

The width and height attributes matter even in a fluid layout. They give the browser the image's proportions, so it can reserve space before the file arrives and avoid layout shift. Modern formats matter for weight: WebP and AVIF are typically 25 to 50% smaller than JPEG at the same quality. Combine this with the Lazy Loading Images Checker for the full picture.

How to use the Responsive Image Checker

1. Enter the address of the page you want to check. You can leave out https://.
2. Press Check images. The page is fetched from our servers, the way a search engine crawler would fetch it.
3. Read the findings from top to bottom: problems first, then warnings. Each one says what to change.

Common problems and how to fix them