Responsive image - same size, different resolution

Kirby 3 Solved ✅
1

I’m using srcset to create responsive images. Here’s my code:

<img
	alt="<?= $file->alt() ?>"
	class="<?= $file->border() ?>"
	src="<?= $file->url() ?>"

	srcset="<?= $file->srcset('casestudyimages') ?>"

	sizes="(max-width: 2112px) 100vw,
		  2112px"

	width="<?= $file->width() ?>"
	height="<?= $file->height() ?>"
>

	'thumbs' => [
		'srcsets' => [
			'casestudyimages' => [
				'400w'  => ['width' => 400],
				'800w'  => ['width' => 800],
				'1200w'  => ['width' => 1200],
				'1600w'  => ['width' => 1600],
				'2112w' => ['width' => 2112]
			]
		]
	]

It’s all working on screens with a pixel density of 1.

My images have a max-width of 2112px. On large 27" screens with pixel density of 1 the 2112px width size image is used. But on large screens with a pixel density of 2, how would I get a larger image (say a width of 3000px) to be used?

I think this works??

	'thumbs' => [
		'srcsets' => [
			'casestudyimages' => [
				'400w'  => ['width' => 400],
				'800w'  => ['width' => 800],
				'1200w'  => ['width' => 1200],
				'1600w'  => ['width' => 1600],
				'2112w' => ['width' => 2112],
				'3000w' => ['width' => 3000]
			]
		]
	]

I’ve simply added another line:
'3000w' => ['width' => 3000]

But would this mean a very big 30" display, and a viewport of over 3000px, but only pixel density of 1, would display this image? That’s obviously not what I want.

2

Without a sizes attribute, that would happen. With a sizes attribute that communicates the max width to the browser, it will not.

1 Like
3

Cool, so what I’ve got will work (I’ve set the sizes attribute)

sizes="(max-width: 2112px) 100vw,
		  2112px"

Thanks