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
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
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() ?>"
>
Not an image generate by the srcset()
method, but an image resized with one of the resizing methods (thumb(), resize(), crop()
)
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() ?>"
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()
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