Responsive images and retina screens

1

I’m following the responsive image cookbook

It’s all working fine so far. I have a column of images, with a max-width of 2112px. I have ‘responsive images’ at various sizes, and a maximum srcset size of 2112px. So that on fullscreen, large desktop monitors, the image will be the same width as the column.

Here’s my config file

<?php

return [
	'debug'  => false,


	'thumbs' => [
		'srcsets' => [
			'default' => [
				'600w'  => ['width' => 600],
				'1100w'  => ['width' => 1100],
				'1600w'  => ['width' => 1600],
				'2112w' => ['width' => 2112]
			],
			'webp' => [
				'600w'  => ['width' => 600, 'format' => 'webp'],
				'1100w'  => ['width' => 1100, 'format' => 'webp'],
				'1600w'  => ['width' => 1600, 'format' => 'webp'],
				'2112w' => ['width' => 2112, 'format' => 'webp']
			]
		]
	]
];

<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>

Now I want to cater for large high res screens, such as a 4k or 5k screen, with double the Device Pixel Ratio (DPR).

Will the following work? So that normal large monitors will use the 2112px images (and not the larger images) and large high res screens will use the 3000px or 4224px images.

<?php

return [
	'debug'  => false,


	'thumbs' => [
		'srcsets' => [
			'default' => [
				'600w'  => ['width' => 600],
				'1100w'  => ['width' => 1100],
				'1600w'  => ['width' => 1600],
				'2112w' => ['width' => 2112],
				'3000w' => ['width' => 3000],
				'4224w' => ['width' => 4224]
			],
			'webp' => [
				'600w'  => ['width' => 600, 'format' => 'webp'],
				'1100w'  => ['width' => 1100, 'format' => 'webp'],
				'1600w'  => ['width' => 1600, 'format' => 'webp'],
				'2112w' => ['width' => 2112, 'format' => 'webp'],
				'3000w' => ['width' => 3000, 'format' => 'webp'],
				'4224w' => ['width' => 4224, 'format' => 'webp']
			]
		]
	]
];

It’s hard to tell without a 4k or 5k monitor!

Thank you

2

After testing on a 27 inch monitor, with a Device Pixel Ratio (DPR) of 1, I can confirm that large non-retina monitors will not use images larger than defined in the <source> sizes. But displays with DPR greater than 1, will use larger images if available.

I believe the sizes is key.

<source
	srcset="<?= $file->srcset('webp') ?>"
	sizes="(max-width: 2112px) 100vw, 2112px"
	type="image/webp"
>

It tells the browser that over a defined viewport size, what the size of the image should be. And browsers seem smart enough to know that displays with DPR of 1 should stick to this, and displays with high DPR should use larger images if available.