Suggestions need additional clarity for "Serves images with low resolution"

[benmccann]

The logo image on https://c3.ventures is provided at 262 x 68 pixels. This matches the style="width: 262px; height: 68px" as well as width="262" and height="68" attributes on the image.

It's saying the expected size is 393 x 102, but there's no explanation as to why. The computed dimensions in the inspector are 262 x 68. I'm guessing this is due to a device pixel ratio of 1.5 being used by the test browser or something like that, but there's no information to indicate whether that might be the case. I don't know what DPRs are being tested with or should be supported as a best practice and when I click the link I don't see DPR mentioned at all, so if this is why the image is being flagged on the audit it seems like there's an opportunity for additional documentation.

[adamraine]

I'm guessing this is due to a device pixel ratio of 1.5 being used by the test browser or something like that, but there's no information to indicate whether that might be the case.

Lighthouse will use a device scale factor of 1.75 by default when testing a mobile page. I do think our docs could be more clear on this matter.

[benmccann]

Thank you. That's helpful. Though I'm still a bit confused why it'd be expecting an image of width 393 in that case since that's 1.5x the width defined in the page

[adamraine]

Good question, actually took some digging for me to find out why. The justification is hidden in a jsdoc comment:

lighthouse/core/audits/image-size-responsive.js

Lines 283 to 329 in 540f55e

	/**
	* Return a quantized version of the DPR.
	*
	* This is to relax the required size of the image.
	* There's strong evidence that 3 DPR images are not perceived to be significantly better to mobile users than
	* 2 DPR images. The additional high byte cost (3x images are ~225% the file size of 2x images) makes this practice
	* difficult to recommend.
	*
	* Human minimum visual acuity angle = 0.016 degrees (see Sun Microsystems paper)
	* Typical phone operating distance from eye = 12 in
	*
	* A
	* _
	* \ | B
	* \|
	* θ
	* A = minimum observable pixel size = ?
	* B = viewing distance = 12 in
	* θ = human minimum visual acuity angle = 0.016 degrees
	*
	* tan θ = A / B ---- Solve for A
	* A = tan (0.016 degrees) * B = 0.00335 in
	*
	* Moto G4 display width = 2.7 in
	* Moto G4 horizontal 2x resolution = 720 pixels
	* Moto G4 horizontal 3x resolution = 1080 pixels
	*
	* Moto G4 1x pixel size = 2.7 / 360 = 0.0075 in
	* Moto G4 2x pixel size = 2.7 / 720 = 0.00375 in
	* Moto G4 3x pixel size = 2.7 / 1080 = 0.0025 in
	*
	* Wasted additional pixels in 3x image = (.00335 - .0025) / (.00375 - .0025) = 68% waste
	*
	*
	* @see https://www.swift.ac.uk/about/files/vision.pdf
	* @param {number} dpr
	* @return {number}
	*/
	function quantizeDpr(dpr) {
	if (dpr >= 2) {
	return 2;
	}
	if (dpr >= 1.5) {
	return 1.5;
	}
	return 1.0;
	}

We should definitely write our own audit docs for this.

[benmccann]

Aha! Thank you so much for tracking that down.