Cropping and optimisation of images with imgix

We use the excellent Imgix image optimising cdn to help improve image download performance, reduce costs and generally improve the performance of your Standfirst website. We also use this on many of our non-Standfirst custom builds.

There are a few older Standfirst sites running legacy code that may not fully support imgix controls. If you can't see the controls shown below, please contact your account manager or [email protected] to find out about what steps need to be taken to implement on your site.

You can easily access the Imgix controls by going to Media in the left hand menu of your dashboard then selecting an image. These controls are also available when you add media in the post editor.

Cropping

The idea with imgix is to not have to worry about manually cropping images in Standfirst. You can simply upload (within our size limits) an image and then since our Summer 2023 and Spring 2024 updates, imgix will intelligently crop it. And in the event that imgix doesn't crop exactly as you'd like it to, you can take over by hand.

Here's an example of a photo that can be a tricky crop to automate:

As you can see - the image is tall and slim, and if you auto-crop for a landscape shaped space in the centre, you'd end up with something like this:

That is absolutely not a good look! You can see the top of Gordon Brown's head has been trimmed, and the person behind has been removed entirely.

So what can we do instead? Well, by default, Standfirst goes looking for faces and tries to crop appropriately, so you get the following thumbnails generated for the different aspect ratios used on your website:

However, there are times when you want to take control. Let's assume we need a bit more focus on Wangari Maathai in the landscape version of the image so that her chin isn't cropped off, and that the person behind isn't so important.

What you can see to the right is that there is something called Crop Type near the bottom, under your other image property settings, most of which are best left as the defaults. These allow you to control how imgix handles your image by default, rather than being automatic. This can be useful where you have prepared graphics that need to be handled just so - for example logos. imgix will generally work things out anyway, but it's nice to have control. In the image above, auto-cropping puts some importance on the gentleman in the background, but the important people here are Gordon Brown and Wangari Maathai - so we need to adjust the crop.

Focal point setting

We have a few crop types - for images like the one we're discussing, we can use the focal point to easily define exactly what's the most interesting element that we need to keep in frame when presenting images. Below we'll cover some of the other crop types.

Click on Set Focal point, then click somewhere nice and central to the most important part of the image - this is then highlighted in red:

Once you've set that, you can refresh the previews and you'll see the key image aspect ratios used on your site and the crop should be a bit nicer:

When you set a focal point, the previews showing the different styles of crops will show you if you've got things just right. If you have, press the "Save Focal Point" button and we're done!

Let's see how the landscape format looks on the front-end of our test site:

I think you'll agree that's better!

Positional crops

You can also automatically pick a position for cropping using the Crop Type dropdown. Let's take a look at this image from Unsplash, by Anton Volnuhin, where the primary interest could be said to be the cow.