What is focal crop transform?

Focal crop transform returns an image that is cropped from a user-specified focal point. Focal crop differs from regular crop in that crop resizes from the center of the image while focal crop allows you to set the point from which cropping is focused so you aren't losing the most important of the image when cropping.

Click here to learn how to resize without cropping

It is recommended to crop to smaller dimensions. Requesting a larger size than the original will result in compromised image quality.

How to use focal crop transform

ITS changes images by appending a decorator to the end of your original url string:

Resize decorator format
https://image.pbs.org/path/to/file.jpg?crop=WWxHHxXXxYY

Where:

  • crop -- indicates that ITS should perform a crop
  • WW -- a numerical pixel value representing the desired width of the output image
  • HH -- a numerical pixel value representing the desired height of the output image
  • XX -- the x axis of the focal point, represented as a percentage value of the width of the original picture
  • YY -- the y axis of the focal point, represented as a percentage value of the height of the original picture

How does ITS determine where to crop my image?

 
When using focal crop, you must assign two parameters to the URL (in red below):
  1. The final width and height you want the image to be (http://image-staging.pbs.org/video-assets/mezzanine_960.jpg.focalcrop.500x400.50.100.jpeg)
  2. The point from which you want the image cropped (http://image-staging.pbs.org/video-assets/mezzanine_960.jpg.focalcrop.500x400.50.100.jpeg) 

The point from where you want the image cropped is determined by the start point which is located in the very upper left corner of your image (Figure 1).

 

Figure 1
 
As an example:

Width and height of the bounding box and two focal point variables are required to use this feature.

Figure 2

 

Live examples

Original image: https://image.pbs.org/test/GmtpBa4-asset-mezzanine-16x9-Uu2CpNc.png

A Key Lime Pie

Resize by:Example URLDimensions returnedImage result
1000 x 400

https://image.pbs.org/test/GmtpBa4-asset-mezzanine-16x9-Uu2CpNc.png?crop=500x400x90x10

 

500x400x90x10

A cropped Key Lime pie

1000 x 400https://image.pbs.org/test/GmtpBa4-asset-mezzanine-16x9-Uu2CpNc.png?crop=900x500x100x10900x500x100x10