Responsive Images

Checks if images use responsive techniques like srcset.

What is this check?

Responsive images are techniques (like the `srcset` attribute) that allow you to provide multiple versions of an image for the browser to choose from, depending on the user's screen size and resolution.

Why is it important?

It prevents a small mobile device from having to download a massive desktop-sized image. This dramatically improves page load speed on mobile, saves user data, and improves user experience.

What is the impact?

Not using responsive images can make your site very slow on mobile devices, which is a major negative ranking factor and a cause of high bounce rates.

Example Implementation

<img src="small.jpg"
     srcset="medium.jpg 1000w, large.jpg 2000w"
     sizes="(max-width: 600px) 480px, 800px"
     alt="A responsive image">