uses-responsive-images only cares about savings not about correct use of responsive images

The uses-responsive-images check only checks whether a too large image is used. This means that it only catches cases in which the used image is way bigger than the actual display size. This typically happens when developers just shove a @2x or larger version of the image without using a srcset.

The part that is missing is when the image is too small compared to the display size. I.e, no @2x version is in use.

Basically I’m suggesting to add something along the lines:

const DPR = artifacts.ViewportDimensions.devicePixelRatio;
const TOLERANCE = 0.9; // This is to not produce that many violations, I'd like it to be set to 1.
const bigEnough = image.displayedHeight <= image.naturalHeight / (DPR * TOLERANCE) && image.displayedWidth <= image.naturalWidth / (DPR * TOLERANCE);

I understand, that doing in that way may change the scope of the audit, as it is currently part of the byte efficiency category. So feel free to recategorize this as a feature request.

[sk-]

@patrickhulce below is the new audit proposal questionnaire, let me know if you need something else.

Provide a basic description of the audit

The audit, called for now ImagesHaveRightSize, will enforce that source images in a website are at least larger to how they are displayed. This is necessary to ensure that images look crisp to the user.

Note that for technical reasons, similar to the ones given in the audit UsesResponsiveImages, the audit will not consider css images.

How would the audit appear in the report?

The audit would appear in the Best Practices category.

For a failing test the results would be similar to those of UsesResponsiveImages.

It would be a tabular data showing the offending images, with a thumbnail, the image’s original size and the dispalyed size.

How is this audit different from existing ones?

This is a complement to UsesResponsiveImages, which only checks whether the images are small enough. This check will also enforce that the images are not too small. Effectively requiring the users to use responsive images to pass the audit. This also complements the audit ImeageAspectRatio.

What % of developers/pages will this impact?

I’d say that more than 90% of sites will be impacted by ths audit. I executed the POC (shown at the end), and all of the top 10 Alexa sites were affected, although some use techniques to replace the images with a higher density version after scrolling them into view.

Tht number is also supported by some work I did while at Google, in which I developed an extension to detect incorrectly sized images. From what I remember at the time, all the Google sites I tried were affected by it. Note though, that that check was considering css images as well.

How is the new audit making a better web for end users?

This would make a better web for users as nowadays most devices have a high density display, the so called Retina displays. For example on Android, more than 90% of the devices have a pixel density greater than one. See https://developer.android.com/about/dashboards. On iOS and MacOs, all of their devices have a high density. Even Chromebooks have retina displays. And now with the adoption of 4k or even 8k monitors, more and more users have access to a high resolution display. This audit would also prevent

“the rendered image may look distorted, possibly creating an unpleasant user experience” (Source: https://web.dev/image-aspect-ratio/)

What is the resourcing situation?

The audit is quite similar to UsesResponsiveImages, so I could volunteer an initial PR with the change. Regarding the documentation, it probably should be a merge between the articles https://web.dev/image-aspect-ratio/ and https://web.dev/uses-responsive-images/, but I have no idea how to edit or contribute to that site. Regarding the audit’s maintainance, I’d imagin thate someone from the Lighthouse team needs to champion it.

Any other links or documentation that we should check out?

A proof of concept that can be used to test a website via the JS console is attached.

const DPR = window.devicePixelRatio;
const TOLERANCE = 0.7;
function isValidImage(img) {
  if (img.srcset !== '' || img.width <= 1 || img.height <= 1 || img.naturalWidth === 0 || img.naturalHeight === 0 || img.src.endsWith('.svg') || img.src.startsWith('data:image/svg')) {
    return true;
  }
  const widthRatio = img.naturalWidth / img.width;
  const heightRatio = img.naturalHeight / img.height;
  if (img.height <= 64 && img.width <= 64) {
    return widthRatio >= DPR && heightRatio >= DPR;
  }
  return widthRatio >= DPR * TOLERANCE && heightRatio >= DPR * TOLERANCE;
}
Array.from(document.querySelectorAll('img')).filter(img => !isValidImage(img));

[hugues-koolsol]

Page adapted 😃 I have put an svg image instead of the png image, I feel better now ! I hope the image will look better on your mac book pro. As it is a pwa you may have to load 2 new games before seeing the change.

There is only the “learn more” link to fix.

Thank you for your work and your help.