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.

Because the cow is at the bottom, although you could set it as the focal point, you can also select a Crop Type of bottom.

You can see the impact in the previews after pushing Refresh Previews.

Auto cropping will do its best to automatically find the best crop anyway, so let's see what we got:

Not bad! You can see the AI of imgix has worked out where the most interesting thing is! However, it's not always going to get it right. But let's say you want to ensure that the portrait crop is more centred and at the bottom. Here's where you can select a Bottom crop:

Let's see how that looks...

It's almost identical, but the top thumbnail is now centred (as Bottom = Bottom centre).

We recommend that you experiment with these features as image presentation makes a huge difference.

Other useful features

Enhance

We also offer the ability to use Imgix's enhance. Simply select the enhance checkbox in the media library against the image and your image's gamma, saturation and exposure will be automatically adjusted. Obviously, use this with care, especially with stock images where you may not have the rights to change the image presentation substantially.

You can see in these thumbnails that the image is a little brighter than before.

AI Tools (Enterprise accounts only)

Not only that, but Imgix supports AI enhancement of images, correcting grain or upscaling images. This can be very useful on sites with older images where quality might not be up to scratch, or where you have people supplying their own images. You will need your own Imgix Enterprise account plugged into your site for this and will need to contact your account manager for support on implementing these features.