Preprocessing Responsive Images

1

I wanted to improve performance by reducing file sizes of the images since I am not in control of the uploads.

As the images are used as blocks here is the snippet how I render my image block and how I create the srcset:

<?php

/** @var \Kirby\Cms\Block $block */

use Kirby\Toolkit\Html;
use Kirby\Toolkit\Str;

$alt   = $block->alt();
$ratio = $block->ratio()->or('auto');

if ($image = $block->image()->toFile()) {
    $srcset = $image->srcset(
        [
            '480w' => ['width' => 480, 'format' => 'webp', 'quality' => ''], 
            '850w' => ['width' => 850, 'format' => 'webp'], 
            '1280w' => ['width' => 1280, 'format' => 'webp'],
        ]
    );
    $sizes = '(max-width: 480px) 100vw, (max-width: 850px) 50vw, 33vw';
}

?>

<?php if ($image) : ?>
    <figure <?= Html::attr(['data-ratio' => $ratio]) ?>>
                <img src="<?= $image->thum(['width' => 1280, 'format' => 'webp'])->url() ?>"
                     srcset="<?= $srcset ?>"
                     alt="<?= $alt->esc() ?>">
    </figure>
<?php endif ?>



While it works as expected I drastically increased the page load speed. I guess because of a massive amount of preprocessing?!

I was wondering if I could create the files on upload with something like this:

return [
    'hooks' => [
        'file.create:after' => function ($file) {
            if ($file->type() === 'image') {
                $sizes = [
                    ['width' => 480, 'format' => 'webp'],
                    ['width' => 768, 'format' => 'webp'],
                    ['width' => 1280, 'format' => 'webp'],
                ];

                foreach ($sizes as $size) {
                    $file->thumb($size)->save();
                }
            }
        }
    ]
];

But then I have no clue how to call upon these saved files.

Am I on the right track or is there a better approach to reduce the page load?

2

Kirby 4 can down size the images on upload, see here File blueprint | Kirby CMS

If you are running Kirby 3, there is a plugin that can do this. GitHub - medienbaecker/kirby-autoresize: Automatically resize images on upload

From there you can generate your srcsets as normal using the scaled down image which should be faster than using the orginal, large unoptimised image file.

If you want to clean up exisiting images you can do that on the command line with mogrify (part of ImageMagick). Google is your freind here, but you can essentially get it to go through all the subfolders under the content folder recusively.

Lastly you can optimise them too, i usually use this Python cli tool for that optimize-images · PyPI

Delete the media folder after you do all that so that Kirby generates new thumbs based on the lighter weight source files.

3

If you just want to pregenerate the thumbs while preserving the original images in the content folder, you can use the Janitor plugin (GitHub - bnomei/kirby3-janitor: Kirby Plugin for running commands like cleaning the cache from within the Panel, PHP code, CLI or a cronjob), which has a job to do this.