Help understanding the 'Responsive images' cookbook

Kirby 4 Solved ✔️
1

I’m attempting to create a snippet that I can reuse for images that’s heavily inspired by the ‘Responsive images’ cookbook. Here’s what I have:

<?php
$breakpoints = "(min-width: 75em)".$sizes[2].",
                (min-width: 60em)".$sizes[1].",
                (min-width: 44em)".$sizes[0].",
                100vw";

if($image): ?>
    <picture>
        <source
            srcset="<?= $image->srcset('webp') ?>"
            sizes="<?= $breakpoints ?>"
            type="image/webp"
        >
        <img
            alt="<?= $image->alt() ?>"
            src="<?= $image->resize(400)->url() ?>"
            srcset="<?= $image->srcset() ?>"
            sizes="<?= $breakpoints ?>"
            width="<?= $image->resize(1920)->width() ?>"
            height="<?= $image->resize(1920)->height() ?>"
        >
    </picture>
<?php endif ?>

<?php snippet('image', ['image' => $image, 'sizes' => ['50vw','33vw','33vw']]); ?>

One thing I don’t quite understand are the resizes on the src and width and height attributes from the cookbook. The resize on src is just a fallback for browsers that don’t support srcset? If so, should this size be whatever the largest version needs to be? Also, the width and height, how are these relevant when using sizes, or are the also a fallback?

2

Right.

I usually use something rather small to medium size, after all, it’s just a fallback.

The width and height are not relevant for the sizes, but for the browser to know the ratio of the images and to prevent layout shifts. So the actualy width and height are not important (can be that of the smallest image, as long as the ratio is correct)

I’d avoid multiple calls to resize, store the thumb in a variable, then call url(), width() and height() on this variable.

1 Like
3

That’s great, thank you! I hope I’m not being too ambitious by thinking I can create a snippet-to-end-all-snippets for images, but I’ll give it a shot and share anything if I find it useful.