Right, so Glide yeah?

We can see that the image is currently 271kB, not inherently bad, I've known clients to upload multiple images of several MB each on a single page (very very recently). There is a good argument that they shouldn't need to know or care about image sizes when updating the content on their site, and with Glide we can take care of that for them.

First off we need to edit config/statamic/assets.php and add some presets, Rob de Kort (behind the starter kit Peak) has an excellent page on this subject and several times before I have fallen back to the presets he uses on that page, but given all the main browser now support webp as an image type I'll use a cut down version of the presets here.

So in assets we want to add this, unsurprisingly in the presets array:

'presets' => [
            'xs-webp' => ['w' => 320, 'h' => 10000, 'q' => 85, 'fit' => 'contain', 'fm' => 'webp'],
            'sm-webp' => ['w' => 480, 'h' => 10000, 'q' => 85, 'fit' => 'contain', 'fm' => 'webp'],
            'md-webp' => ['w' => 768, 'h' => 10000, 'q' => 85, 'fit' => 'contain', 'fm' => 'webp'],
            'lg-webp' => ['w' => 1280, 'h' => 10000, 'q' => 85, 'fit' => 'contain', 'fm' => 'webp'],
            'xl-webp' => ['w' => 1440, 'h' => 10000, 'q' => 95, 'fit' => 'contain', 'fm' => 'webp'],
            '2xl-webp' => ['w' => 1680, 'h' => 10000, 'q' => 95, 'fit' => 'contain', 'fm' => 'webp'],
        ],

So with this we will create 6 versions of each image, if only enabling this on an existing site you want to run php please assets:generate-presets once you've added those presets, bear in mind this will not be a quick process if you have a lot of images on your site. At this point I have 14 on this blog, so not a long process.

We could see from the earlier image that we are rendering the image at 1000px wide, so we can get away with using the lg-webp preset for this, obviously this blog is very basic at this point so we just have the single image call on the src (hopefully do more on this at a later point and start using srcset etc.), so we can just change the image tag to look a bit like this <img class="rounded-xl" src="{{ glide:hero_image preset='lg-webp' }}" alt="{{ hero_image:alt }}">

In a very basic way that's all we need to do to generate the glide image, the size is now reduced to 145kB, still not tiny, but more than 100kB off of the original is going to make a hell of a difference on any site with more than a few images (chuck in some cloudflare caching or similar and the bandwidth savings will be even greater)

There are a couple of different ways of saving your cached Glide image, but that's a bit more than I want to into here, this page can tell you more on that front

The Statamic docs explain all of this better than I ever can as well, and if anything is unclear in that jump on the discord, someone will know or be able to help.

edit Yes I realise the image in this entry are not themselves trnasofrmed by Glide, they aren't big enough to be a problem, and without me changing the sets to give a choice of image size to use, I would be forcing all embedded images into a set size, not something I want to do at this point.