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:
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:
However, by setting the focal point manually with imgix's
crop=focalpoint parameters, you can move the astronaut down and re-emphasize the isolation of space:
A similar issue exists for the thumbnail. Just shrinking the original image (which is already square) would make the astronaut impossible to see:
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%):
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 (
0.5). Here's our original astronaut hero crop with this turned on:
The revised hero image changed the
fp-y value to
0.4 to put the astronaut in the middle.
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
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.