Responsive images and src attribute

Kirby 3 Solved ✅
1

I understand that when using srcset and responsive images, we still need to use the src attribute (as a fall back for browsers that do not support srcset)

Should the src attribute point to the original source image? I presume if the browser does not support srcset then src can not use any of the responsive images generated by the srcset? Yet in the example on this page:

<img
    alt="A colorful flower of unknown type"
    src="flower-power-400.jpg"
    srcset="flower-power-400.jpg 400w,
            flower-power-800.jpg 800w,
            flower-power-1200.jpg 1200w"
>

The src is pointing to an image created by the srcset (flower-power-400.jpg rather than the original source image flower-power.jpg

So I’m unsure what to do

2

I personally use small to max. medium sized images as the fallback provided through src. The support for srcset is pretty good and IMO no need to provide a high-quality fallback for non-supporting browsers (assuming that these old non-supporting browsers also mean non-up-to-date computers/phones and probably also reduced network speed, where serving a high-quality image would be counter-productive/a waste of resources).

1 Like
3

So even though the browser does not support srcset I can still use an image generated by srcset like example-600.jpg rather than the original source file example.jpg which could be massive?

How would I do that in my img code?

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

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

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

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

Not an image generate by the srcset() method, but an image resized with one of the resizing methods (thumb(), resize(), crop())

5

Okay. So how can I get my src to point to say the 1000w thumbnail?

'thumbs' => [
	'srcsets' => [
		'casestudyimages' => [
			'500w'  => ['width' => 500],
			'1000w'  => ['width' => 1000],
			'1500w'  => ['width' => 1500],
			'2112w' => ['width' => 2112]
		]
	]
]

It is currently pointing to the original source image:
src="<?= $file->url() ?>"

6

You can’t with your srcset settings, just use

$file->resize(400)->url()

or something like that. Or create a thumb preset for that purpose: thumbs | Kirby CMS (but then you have to use the thumb() method instead of resize()

7

Okay, I think I understand. So my code would be:

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

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

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

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

And so my src image will be a 1000px resize of the original source image