PageSpeed "Properly size images" even though I added a new "XS" breakpoint

[michaelmannucci]

I am trying to solce Lighthouse PageSpeed flagging "Properly size images". I published responsive-images and added 'xs' => 300, to the breakpoints, but I still get the flag. Like, is a 300px breakpoint not small enough? Or is there something else I need to do in addition to this to get it to work?

[michaelmannucci]

Also, looking at the network tab on inspect, it looks like it's loading the same size image regardless of my screen size. Unless I am miunderstanding. Here is one of the image tags:

<picture>
   <source type="image/webp" media="" srcset="data:image/svg+xml;base64,PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHg9IjAiCiAgICAgeT0iMCIgdmlld0JveD0iMCAwIDMyIDE2Ij4KICAgIDxpbWFnZSB3aWR0aD0iMzIiIGhlaWdodD0iMTYiIHhsaW5rOmhyZWY9ImRhdGE6aW1hZ2UvanBlZztiYXNlNjQsLzlqLzRBQVFTa1pKUmdBQkFRRUFZQUJnQUFELy9nQTdRMUpGUVZSUFVqb2daMlF0YW5CbFp5QjJNUzR3SUNoMWMybHVaeUJKU2tjZ1NsQkZSeUIyT0RBcExDQnhkV0ZzYVhSNUlEMGdPVEFLLzlzQVF3QURBZ0lEQWdJREF3TURCQU1EQkFVSUJRVUVCQVVLQndjR0NBd0tEQXdMQ2dzTERRNFNFQTBPRVE0TEN4QVdFQkVURkJVVkZRd1BGeGdXRkJnU0ZCVVUvOXNBUXdFREJBUUZCQVVKQlFVSkZBMExEUlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVS84QUFFUWdBRUFBZ0F3RWlBQUlSQVFNUkFmL0VBQjhBQUFFRkFRRUJBUUVCQUFBQUFBQUFBQUFCQWdNRUJRWUhDQWtLQy8vRUFMVVFBQUlCQXdNQ0JBTUZCUVFFQUFBQmZRRUNBd0FFRVFVU0lURkJCaE5SWVFjaWNSUXlnWkdoQ0NOQ3NjRVZVdEh3SkROaWNvSUpDaFlYR0JrYUpTWW5LQ2txTkRVMk56ZzVPa05FUlVaSFNFbEtVMVJWVmxkWVdWcGpaR1ZtWjJocGFuTjBkWFozZUhsNmc0U0Zob2VJaVlxU2s1U1ZscGVZbVpxaW82U2xwcWVvcWFxeXM3UzF0cmU0dWJyQ3c4VEZ4c2ZJeWNyUzA5VFYxdGZZMmRyaDR1UGs1ZWJuNk9ucThmTHo5UFgyOS9qNSt2L0VBQjhCQUFNQkFRRUJBUUVCQVFFQUFBQUFBQUFCQWdNRUJRWUhDQWtLQy8vRUFMVVJBQUlCQWdRRUF3UUhCUVFFQUFFQ2R3QUJBZ01SQkFVaE1RWVNRVkVIWVhFVElqS0JDQlJDa2FHeHdRa2pNMUx3RldKeTBRb1dKRFRoSmZFWEdCa2FKaWNvS1NvMU5qYzRPVHBEUkVWR1IwaEpTbE5VVlZaWFdGbGFZMlJsWm1kb2FXcHpkSFYyZDNoNWVvS0RoSVdHaDRpSmlwS1RsSldXbDVpWm1xS2pwS1dtcDZpcHFyS3p0TFcydDdpNXVzTER4TVhHeDhqSnl0TFQxTlhXMTlqWjJ1TGo1T1htNStqcDZ2THo5UFgyOS9qNSt2L2FBQXdEQVFBQ0VRTVJBRDhBOTcrS245a2VNSVk1MnZZOEwzM0N2TzlOOEhlRzVyb1J5Nm5FbWY4QWFyd1BTNzNWcmZUR3RybS9rbEo3bHFqVlpwSjF6ZHlCdlhkWG8wZUphdENtcWRGNkhIL1l0UEV5YzZtNTlpZUV2QjNodlJwV2RMNktZTi90Q3J1cnk2SnAxNmtTenhvejlEdXI1QlFhekdRYlRVSlIvd0FDTlVQRlVuaVc2aVJvNytRektPRHVybHFaMUt2TG1rN3MzZVcrd2phQi85az0iIC8+Cjwvc3ZnPgo= 32w, /img/asset/aW1hZ2VzL3NhbXBsZS9oZXJvLmpwZw==?fm=webp&amp;q=80&amp;fit=crop-50-50&amp;w=200&amp;h=100&amp;s=4c40b9f5edd77ac54e5f02846678e851 200w, /img/asset/aW1hZ2VzL3NhbXBsZS9oZXJvLmpwZw==?fm=webp&amp;q=80&amp;fit=crop-50-50&amp;w=240&amp;h=120&amp;s=680b99b82f955a3b1f5e924b6d332e4d 240w, /img/asset/aW1hZ2VzL3NhbXBsZS9oZXJvLmpwZw==?fm=webp&amp;q=80&amp;fit=crop-50-50&amp;w=286&amp;h=143&amp;s=3553bf7c9cec468a6c0d072560e002b9 286w, /img/asset/aW1hZ2VzL3NhbXBsZS9oZXJvLmpwZw==?fm=webp&amp;q=80&amp;fit=crop-50-50&amp;w=342&amp;h=171&amp;s=0d8b35df79b274dd0456c6095b95ce30 342w, /img/asset/aW1hZ2VzL3NhbXBsZS9oZXJvLmpwZw==?fm=webp&amp;q=80&amp;fit=crop-50-50&amp;w=409&amp;h=204.5&amp;s=1828f8ac16f0e757c0d310393ace82f3 409w, /img/asset/aW1hZ2VzL3NhbXBsZS9oZXJvLmpwZw==?fm=webp&amp;q=80&amp;fit=crop-50-50&amp;w=489&amp;h=244.5&amp;s=77acc7bf617fb20f1afcb2e1bda5472f 489w, /img/asset/aW1hZ2VzL3NhbXBsZS9oZXJvLmpwZw==?fm=webp&amp;q=80&amp;fit=crop-50-50&amp;w=585&amp;h=292.5&amp;s=88b1a265e8cf8406d3001757b031ed47 585w, /img/asset/aW1hZ2VzL3NhbXBsZS9oZXJvLmpwZw==?fm=webp&amp;q=80&amp;fit=crop-50-50&amp;w=699&amp;h=349.5&amp;s=eb34169c8e8968c7233343f4f2de21de 699w, /img/asset/aW1hZ2VzL3NhbXBsZS9oZXJvLmpwZw==?fm=webp&amp;q=80&amp;fit=crop-50-50&amp;w=836&amp;h=418&amp;s=093672cadaec87abe2a38a591eaad71e 836w, /img/asset/aW1hZ2VzL3NhbXBsZS9oZXJvLmpwZw==?fm=webp&amp;q=80&amp;fit=crop-50-50&amp;w=1000&amp;h=500&amp;s=97e47db304f0de3637ea10ba38efb3dc 1000w" sizes="98vw">
   <source media="" srcset="data:image/svg+xml;base64,PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHg9IjAiCiAgICAgeT0iMCIgdmlld0JveD0iMCAwIDMyIDE2Ij4KICAgIDxpbWFnZSB3aWR0aD0iMzIiIGhlaWdodD0iMTYiIHhsaW5rOmhyZWY9ImRhdGE6aW1hZ2UvanBlZztiYXNlNjQsLzlqLzRBQVFTa1pKUmdBQkFRRUFZQUJnQUFELy9nQTdRMUpGUVZSUFVqb2daMlF0YW5CbFp5QjJNUzR3SUNoMWMybHVaeUJKU2tjZ1NsQkZSeUIyT0RBcExDQnhkV0ZzYVhSNUlEMGdPVEFLLzlzQVF3QURBZ0lEQWdJREF3TURCQU1EQkFVSUJRVUVCQVVLQndjR0NBd0tEQXdMQ2dzTERRNFNFQTBPRVE0TEN4QVdFQkVURkJVVkZRd1BGeGdXRkJnU0ZCVVUvOXNBUXdFREJBUUZCQVVKQlFVSkZBMExEUlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVS84QUFFUWdBRUFBZ0F3RWlBQUlSQVFNUkFmL0VBQjhBQUFFRkFRRUJBUUVCQUFBQUFBQUFBQUFCQWdNRUJRWUhDQWtLQy8vRUFMVVFBQUlCQXdNQ0JBTUZCUVFFQUFBQmZRRUNBd0FFRVFVU0lURkJCaE5SWVFjaWNSUXlnWkdoQ0NOQ3NjRVZVdEh3SkROaWNvSUpDaFlYR0JrYUpTWW5LQ2txTkRVMk56ZzVPa05FUlVaSFNFbEtVMVJWVmxkWVdWcGpaR1ZtWjJocGFuTjBkWFozZUhsNmc0U0Zob2VJaVlxU2s1U1ZscGVZbVpxaW82U2xwcWVvcWFxeXM3UzF0cmU0dWJyQ3c4VEZ4c2ZJeWNyUzA5VFYxdGZZMmRyaDR1UGs1ZWJuNk9ucThmTHo5UFgyOS9qNSt2L0VBQjhCQUFNQkFRRUJBUUVCQVFFQUFBQUFBQUFCQWdNRUJRWUhDQWtLQy8vRUFMVVJBQUlCQWdRRUF3UUhCUVFFQUFFQ2R3QUJBZ01SQkFVaE1RWVNRVkVIWVhFVElqS0JDQlJDa2FHeHdRa2pNMUx3RldKeTBRb1dKRFRoSmZFWEdCa2FKaWNvS1NvMU5qYzRPVHBEUkVWR1IwaEpTbE5VVlZaWFdGbGFZMlJsWm1kb2FXcHpkSFYyZDNoNWVvS0RoSVdHaDRpSmlwS1RsSldXbDVpWm1xS2pwS1dtcDZpcHFyS3p0TFcydDdpNXVzTER4TVhHeDhqSnl0TFQxTlhXMTlqWjJ1TGo1T1htNStqcDZ2THo5UFgyOS9qNSt2L2FBQXdEQVFBQ0VRTVJBRDhBOTcrS245a2VNSVk1MnZZOEwzM0N2TzlOOEhlRzVyb1J5Nm5FbWY4QWFyd1BTNzNWcmZUR3RybS9rbEo3bHFqVlpwSjF6ZHlCdlhkWG8wZUphdENtcWRGNkhIL1l0UEV5YzZtNTlpZUV2QjNodlJwV2RMNktZTi90Q3J1cnk2SnAxNmtTenhvejlEdXI1QlFhekdRYlRVSlIvd0FDTlVQRlVuaVc2aVJvNytRektPRHVybHFaMUt2TG1rN3MzZVcrd2phQi85az0iIC8+Cjwvc3ZnPgo= 32w, /img/asset/aW1hZ2VzL3NhbXBsZS9oZXJvLmpwZw==?q=80&amp;fit=crop-50-50&amp;w=200&amp;h=100&amp;s=53ce43bd4b15935b36970194fc417974 200w, /img/asset/aW1hZ2VzL3NhbXBsZS9oZXJvLmpwZw==?q=80&amp;fit=crop-50-50&amp;w=240&amp;h=120&amp;s=bc223e3cd7b3768076ddb505c0fffdfc 240w, /img/asset/aW1hZ2VzL3NhbXBsZS9oZXJvLmpwZw==?q=80&amp;fit=crop-50-50&amp;w=286&amp;h=143&amp;s=4d10763668aee357dd1e970b36290dbb 286w, /img/asset/aW1hZ2VzL3NhbXBsZS9oZXJvLmpwZw==?q=80&amp;fit=crop-50-50&amp;w=342&amp;h=171&amp;s=ad012e5a8deaa6673ffa52aff1ab5e25 342w, /img/asset/aW1hZ2VzL3NhbXBsZS9oZXJvLmpwZw==?q=80&amp;fit=crop-50-50&amp;w=409&amp;h=204.5&amp;s=292843432f74b178671164689c688e4e 409w, /img/asset/aW1hZ2VzL3NhbXBsZS9oZXJvLmpwZw==?q=80&amp;fit=crop-50-50&amp;w=489&amp;h=244.5&amp;s=22f3da49d4085b1fbb6d1eab54f1c6d1 489w, /img/asset/aW1hZ2VzL3NhbXBsZS9oZXJvLmpwZw==?q=80&amp;fit=crop-50-50&amp;w=585&amp;h=292.5&amp;s=4bf518453bf990f08b2154daeadb99df 585w, /img/asset/aW1hZ2VzL3NhbXBsZS9oZXJvLmpwZw==?q=80&amp;fit=crop-50-50&amp;w=699&amp;h=349.5&amp;s=a456962cc180e538af0d26242132324d 699w, /img/asset/aW1hZ2VzL3NhbXBsZS9oZXJvLmpwZw==?q=80&amp;fit=crop-50-50&amp;w=836&amp;h=418&amp;s=45aae0aae18998acc9268607a60cd27c 836w, /img/asset/aW1hZ2VzL3NhbXBsZS9oZXJvLmpwZw==?q=80&amp;fit=crop-50-50&amp;w=1000&amp;h=500&amp;s=f486abbe7bda0de5a198352d6ecb2443 1000w" sizes="98vw">
   <img alt="Church building" class="absolute inset-0 w-full h-full object-cover" style="object-position: 50% 50%" src="/assets/images/sample/hero.jpg" width="1000" height="500" data-statamic-responsive-images="">
</picture>

[ncla]

1. Which URL does the browser load from this example?
2. What are the dimensions of the element "boundary box" where the image appears when running PageSpeed test?

[michaelmannucci]

So if I click one of the images on PageSpeed, this is what it loads:

http://gathering.test/img/asset/aW1hZ2VzL3NhbXBsZS9ibG9nLzQucG5n?fm=webp&q=80&fit=crop-50-50&w=990&h=653.3648728563&s=48c0135a8061ff9c3cfc0508956cbb48

So, looks like 990px width and 653.3648728563px height.... which is pretty large.

Also, from the code I put above, it looks like the "media" tag is empty. Isn't there supposed to be breakpoints in there?

I'm not sure I understand your second question, I apologize.

[ncla]

About second question: boundary box is this thing you see in devtools, described here: https://www.codecademy.com/article/f1-devtools-box-model I am wondering what is the dimensions of this box where the image appears.

[michaelmannucci]

Gotcha. On that same image, here is what I see:

And the size changes as I resize the page... is this what you're looking for?

[ncla]

Yes. Are these dimensions that you are showing (242x192) now the ones when the 990px wide image loads? If they are not, please retest and provide me with new numbers.

[ncla]

Regarding the breakpoint not working: if you are not specifying a ratio for any breakpoint other than the default one, there won't be additional breakpoints with media query with min-width set. I am guessing this is the reason you are not seeing a media query.

[michaelmannucci]

Maybe I misunderstood this plugin. Isn't its purpose to automatically set the <picture> tag with different sized images optimized for the screen size?

[ncla]

Breakpoints are for art direction, they do not determine how many variants of images will be generated.