Resize to view responsiveness. Current view:

# Set a custom Focal Point to Crop Photos

## Art direction & responsive images with imgix

Cropping for editorial generally requires multiple sizes and aspect ratios for each image, to support both multiple uses (hero unit, thumbnails) and responsive design requirements (square for mobile view, widescreen for desktop). Because all of these are coming from the same original, manually cropping and saving separate files is wasted effort.

Instead, with imgix you can generate every version on-demand to bring the most compelling and relevant parts of the image forward, and then plug those URLs into your responsive breakpoints. Let’s see how this works with some typical editorial-type photos. We’ll go step-by step for each of the crops here—check out the related CodePen to see the underlying responsive HTML and how we’re using imgix.js to generate a complete `srcset` to support any size we might choose in the future.

Resize this window to view how the images above crop and zoom to display the image best for each viewport size.

Learn More about imgix