Responsive images - not resizing at expected points

Kirby 3 Solved ✅
1

I think I’ve followed the instructions on responsive images

My portfolio images are 100% wide, inside a wrapper with a max-width of 2112px. Up to a viewport width of 2112px they fill the viewport (give or take a little padding).

Example here:

I’ve set up breakpoints at:
600px 900px 1500px 2112px.

My images do resize, but not at the viewport widths I expect.

For example, at viewport width 1501px I’d expect the image to be 2112px wide. Then at viewport 1500px width I’d expect the image to be 1500px wide.

But in browser developer tools my 1500px wide image is not kicking in until the viewport is 890px wide.

I’m using a bog-standard monitor, with a Device Pixel Ratio of 1. (Although it is plugged in to a MacBook with a high DPR – but I can’t imagine that would make any difference when not using the built in screen).

What’s going on?

<picture>
	<source
		srcset="<?= $file->srcset('webp') ?>"
		sizes="(max-width: 2112px) 100vw, 2112px"
		type="image/webp"
	>
	
	<img
		alt="<?= $file->alt() ?>"
		class="<?= $file->border() ?>"
		src="<?= $file->url() ?>"
		srcset="<?= $file->srcset() ?>"
		sizes="(max-width: 2112px) 100vw, 2112px"
		width="<?= $file->width() ?>"
		height="<?= $file->height() ?>"
	>
</picture>

Config.php file

<?php

return [
	'debug'  => false,


	'thumbs' => [
		'srcsets' => [
			'default' => [
				'600w'  => ['width' => 600],
				'900w'  => ['width' => 900],
				'1500w'  => ['width' => 1500],
				'2112w' => ['width' => 2112],
				'2700w' => ['width' => 2700]
			],
			'webp' => [
				'600w'  => ['width' => 600, 'format' => 'webp'],
				'900w'  => ['width' => 900, 'format' => 'webp'],
				'1500w'  => ['width' => 1500, 'format' => 'webp'],
				'2112w' => ['width' => 2112, 'format' => 'webp'],
				'2700w' => ['width' => 2700, 'format' => 'webp']
			]
		]
	]
];
2

Your best bet is to test this in controlled settings, using developer tools in responsive mood, with caching enabled. Then try different screen widths and DPI, reload the page with network tab open

Screenshot 2023-08-09 at 19.25.22
Screenshot 2023-08-09 at 19.25.222942×1164 384 KB

And Lighthouse doesn’t complain about the images on that page (only about missing width and height on some images and render blocking resources, so there is room for improvement), but image-wise, you are fine.

3

Hi Mark,

I’ve just tested the page/image in question in Firefox on my Mac and do see the behaviour you expect.

For example, If I set browser viewport (DPR:1) to 1500px and open the first image within a new tab, the image displayed is ‘culture-crisis-logo-1500x.webp’. If I increase the viewport to 1501px the image displayed is ‘culture-crisis-logo-2112x.webp’.

1 Like
4

My bad.

I was testing my site in Chrome dev tools, in responsive mode. (Bizarrely) this automatically sets the DPR to 2. And the DPR is hidden in a drop down.

So now having found where the DPR value is and changed it to 1, I can see the images are resizing at the expected points.

Thank you

1 Like