Art-Direct Responsive Images with Focal Point Cropping

Animation showing focal point cropping

As responsive design patterns continue to consolidate into best practices, it’s become easier for designers and developers to think beyond just resizing and cropping images, and address how to maximize the impact of each image. Responsive art direction, with each image cropped to keep focus on the key elements at each size, is now easier than ever. In addition to our automated methods of cropping to areas of interest, we've now added complete manual controls for true focal point cropping and zooming.


Why Art Direction Matters

Being able to crop and zoom into your image gives much greater flexibility than cropping alone, and being able to set the focal point to exactly where you want ensures that the focus of your final image is perfect. Let's take a quick look at what focal point cropping enables for art direction.

Here's a great editorial image from NASA of an astronaut floating in space:

Astronaut in space

Assuming this is the main image for an article, you might want to have several other sizes to fit in various layouts, both based on the devices your site supports and different ways of displaying articles. A common set of sizes might have extremes like this:

  • 2048×900 hero unit at the top of an article for large desktops
  • 100×100 thumbnail for search results or other lists of articles

The differences in size and aspect ratio introduce some challenges. The astronaut is roughly in the middle, so if you just crop for the larger size, you lose a lot of the image's power. The bit of earth you can see feels more like an afterthought:

Astronaut @ hero unit size

However, by setting the focal point manually with imgix's fp-x, fp-y and crop=focalpoint parameters, you can move the astronaut down and re-emphasize the isolation of space:

Astronaut @ hero unit size with focal point cropping

A similar issue exists for the thumbnail. Just shrinking the original image (which is already square) would make the astronaut impossible to see:

Bad astronaut thumbnail

To get a compelling image at such a small size, you’ll also need to zoom in, which you can do by adding the fp-z parameter (this example is zoomed in at 500%):

Good astronaut thumbnail

?w=100&h=100&fit=crop&crop=focalpoint&fp-z=5&fp-y=0.4

Locating Your Focal Point

Being able to change the focal point is great, but do so effectively, you need a way to see where it is—that's where our final focal point parameter, fp-debug=1, comes in. Add this to the URL string and you get a set of red crosshairs that allow you to adjust from the default center of the image (fp-x and fp-y of 0.5). Here's our original astronaut hero crop with this turned on:

Astronaut with fp-debug turned on

?w=2048&h=900&fit=crop&crop=focalpoint&fp-debug=1

The revised hero image changed the fp-y value to 0.4 to put the astronaut in the middle.

Astronaut with fp-debug turned on


Where to Go from Here

This is just a quick demonstration of the power of focal point cropping and how we’ve implemented it at imgix. For more detail, check out our focal point tutorial and the associated CodePen demo. (Note: This demo doesn't work well in Safari due to the way Safari implements srcset.)

For more about the ins and outs of implementing responsive design with imgix, check out our <picture> tutorial and the imgix.js frontend library, which can make generating comprehensive <picture> elements to handle all of your required image sizes much easier.

Stay up to date with our blog for the latest imgix news, features, and posts.