Cloudinary Blog

How to control the zoom level with automatic face detection based image cropping

Control the zoom level with automatic image cropping

Many websites now offer their users the ability to upload images and profile pictures, making it a challenge for web designers to maintain a certain graphic design and style when subsequently displaying these images. The profile pictures may need to be smartly cropped to focus on the faces, with some sites that prefer close-ups of faces and others that prefer including more background when displaying images of people.

Cloudinary's automatic Face Detection feature is an extremely useful method for identifying the face(s) in uploaded images and then making it a simple matter to intelligently crop, position and resize the picture accordingly. However, the resulting image is cropped at a default zoom level, so to be able to control how much of the original image surrounding the face to keep, Cloudinary has introduced the Zoom parameter that can be added to dynamic image delivery URLs with on-the-fly cloud-based manipulation.

The zoom parameter (z for URLs) accepts a decimal value that sets the new zoom level as a multiple of the default zoom setting: a value less than 1.0 zooms out and a value greater than 1.0 zooms in. For example, z_0.5 halves the default zoom to 50% and zooms out to include more of the background around the face, while z_2.0 doubles the default zoom to 200% and zooms in to include less of the background around the face. The zoom parameter works together with either the crop or thumb cropping modes while setting the gravity parameter to focus on either a single face (g_face), multiple faces (g_faces) or custom coordinates (g_custom) manually defined by the user when uploading the image. Here are a few examples to show how to use the zoom parameter:

Webinar
How to Optimize for Page Load Speed

Single face thumbnail

The following example demonstrates how the zoom parameter works together with the thumb cropping mode. This mode generates a thumbnail of an image with the exact given width and height dimensions, while identifying the face and making it the center of the image.

The original proportions are retained, but the image might be scaled to fit in the given dimensions. The zoom parameter will now determine how much to scale the face within the given width and height, with a zoom value less than 1.0 shrinking the face, and a zoom value greater than 1.0 enlarging the face within the image.

Original photo

The following URL dynamically generates a 200x200 thumbnail focusing on the face in the image shown above with the default zoom level.

Ruby:
Copy to clipboard
cl_image_tag("lady.jpg", :gravity=>"face", :width=>200, :height=>200, :crop=>"thumb")
PHP v1:
Copy to clipboard
cl_image_tag("lady.jpg", array("gravity"=>"face", "width"=>200, "height"=>200, "crop"=>"thumb"))
PHP v2:
Copy to clipboard
(new ImageTag('lady.jpg'))
  ->resize(Resize::thumbnail()->width(200)->height(200)
    ->gravity(Gravity::focusOn(FocusOn::face())));
Python:
Copy to clipboard
CloudinaryImage("lady.jpg").image(gravity="face", width=200, height=200, crop="thumb")
Node.js:
Copy to clipboard
cloudinary.image("lady.jpg", {gravity: "face", width: 200, height: 200, crop: "thumb"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().gravity("face").width(200).height(200).crop("thumb")).imageTag("lady.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('lady.jpg', {gravity: "face", width: 200, height: 200, crop: "thumb"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("lady.jpg", {gravity: "face", width: 200, height: 200, crop: "thumb"})
React:
Copy to clipboard
<Image publicId="lady.jpg" >
  <Transformation gravity="face" width="200" height="200" crop="thumb" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="lady.jpg" >
  <cld-transformation gravity="face" width="200" height="200" crop="thumb" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="lady.jpg" >
  <cl-transformation gravity="face" width="200" height="200" crop="thumb">
  </cl-transformation>
</cl-image>
.NET:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Gravity("face").Width(200).Height(200).Crop("thumb")).BuildImageTag("lady.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().gravity("face").width(200).height(200).crop("thumb")).generate("lady.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setGravity("face").setWidth(200).setHeight(200).setCrop("thumb")).generate("lady.jpg")!, cloudinary: cloudinary)
200x200 thumbnail with default zoom photo

To include more of the background around the face and decrease the relative size of the face within the image, we can decrease the zoom level to 70% of the default by setting the zoom parameter to 0.7:

Ruby:
Copy to clipboard
cl_image_tag("lady.jpg", :gravity=>"face", :zoom=>0.7, :width=>200, :height=>200, :crop=>"thumb")
PHP v1:
Copy to clipboard
cl_image_tag("lady.jpg", array("gravity"=>"face", "zoom"=>"0.7", "width"=>200, "height"=>200, "crop"=>"thumb"))
PHP v2:
Copy to clipboard
(new ImageTag('lady.jpg'))
  ->resize(Resize::thumbnail()->width(200)->height(200)->zoom(0.7)
    ->gravity(Gravity::focusOn(FocusOn::face())));
Python:
Copy to clipboard
CloudinaryImage("lady.jpg").image(gravity="face", zoom="0.7", width=200, height=200, crop="thumb")
Node.js:
Copy to clipboard
cloudinary.image("lady.jpg", {gravity: "face", zoom: "0.7", width: 200, height: 200, crop: "thumb"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().gravity("face").zoom(0.7).width(200).height(200).crop("thumb")).imageTag("lady.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('lady.jpg', {gravity: "face", zoom: "0.7", width: 200, height: 200, crop: "thumb"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("lady.jpg", {gravity: "face", zoom: "0.7", width: 200, height: 200, crop: "thumb"})
React:
Copy to clipboard
<Image publicId="lady.jpg" >
  <Transformation gravity="face" zoom="0.7" width="200" height="200" crop="thumb" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="lady.jpg" >
  <cld-transformation gravity="face" zoom="0.7" width="200" height="200" crop="thumb" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="lady.jpg" >
  <cl-transformation gravity="face" zoom="0.7" width="200" height="200" crop="thumb">
  </cl-transformation>
</cl-image>
.NET:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Gravity("face").Zoom(0.7).Width(200).Height(200).Crop("thumb")).BuildImageTag("lady.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().gravity("face").zoom(0.7).width(200).height(200).crop("thumb")).generate("lady.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setGravity("face").setZoom(0.7).setWidth(200).setHeight(200).setCrop("thumb")).generate("lady.jpg")!, cloudinary: cloudinary)
200x200 thumbnail with 70% zoom photo

To include less of the background around the face and increase the relative size of the face within the image, we can increase the zoom level to 130% of the default by setting the zoom parameter to 1.3:

Ruby:
Copy to clipboard
cl_image_tag("lady.jpg", :gravity=>"face", :zoom=>1.3, :width=>200, :height=>200, :crop=>"thumb")
PHP v1:
Copy to clipboard
cl_image_tag("lady.jpg", array("gravity"=>"face", "zoom"=>"1.3", "width"=>200, "height"=>200, "crop"=>"thumb"))
PHP v2:
Copy to clipboard
(new ImageTag('lady.jpg'))
  ->resize(Resize::thumbnail()->width(200)->height(200)->zoom(1.3)
    ->gravity(Gravity::focusOn(FocusOn::face())));
Python:
Copy to clipboard
CloudinaryImage("lady.jpg").image(gravity="face", zoom="1.3", width=200, height=200, crop="thumb")
Node.js:
Copy to clipboard
cloudinary.image("lady.jpg", {gravity: "face", zoom: "1.3", width: 200, height: 200, crop: "thumb"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().gravity("face").zoom(1.3).width(200).height(200).crop("thumb")).imageTag("lady.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('lady.jpg', {gravity: "face", zoom: "1.3", width: 200, height: 200, crop: "thumb"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("lady.jpg", {gravity: "face", zoom: "1.3", width: 200, height: 200, crop: "thumb"})
React:
Copy to clipboard
<Image publicId="lady.jpg" >
  <Transformation gravity="face" zoom="1.3" width="200" height="200" crop="thumb" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="lady.jpg" >
  <cld-transformation gravity="face" zoom="1.3" width="200" height="200" crop="thumb" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="lady.jpg" >
  <cl-transformation gravity="face" zoom="1.3" width="200" height="200" crop="thumb">
  </cl-transformation>
</cl-image>
.NET:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Gravity("face").Zoom(1.3).Width(200).Height(200).Crop("thumb")).BuildImageTag("lady.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().gravity("face").zoom(1.3).width(200).height(200).crop("thumb")).generate("lady.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setGravity("face").setZoom(1.3).setWidth(200).setHeight(200).setCrop("thumb")).generate("lady.jpg")!, cloudinary: cloudinary)
200x200 thumbnail with 130% zoom photo

Multiple faces cropping

The following example demonstrates how the zoom parameter works together with the crop mode. This mode is used to extract a section out of the original image, while retaining the size of the graphics, and together with the gravity parameter set to faces, cropping will center the derived image on the detected faces in the image. The zoom parameter will now determine the dimensions of the extracted image, resulting in a bigger image when the zoom value is less than 1.0, or a smaller image when the zoom value is greater than 1.0.

Original photo

The following URL dynamically crops the image shown above to only display the detected faces at the default zoom level:

Ruby:
Copy to clipboard
cl_image_tag("young_couple.jpg", :gravity=>"faces", :crop=>"crop")
PHP v1:
Copy to clipboard
cl_image_tag("young_couple.jpg", array("gravity"=>"faces", "crop"=>"crop"))
PHP v2:
Copy to clipboard
(new ImageTag('young_couple.jpg'))
  ->resize(Resize::crop()
    ->gravity(Gravity::focusOn(FocusOn::faces())));
Python:
Copy to clipboard
CloudinaryImage("young_couple.jpg").image(gravity="faces", crop="crop")
Node.js:
Copy to clipboard
cloudinary.image("young_couple.jpg", {gravity: "faces", crop: "crop"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().gravity("faces").crop("crop")).imageTag("young_couple.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('young_couple.jpg', {gravity: "faces", crop: "crop"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("young_couple.jpg", {gravity: "faces", crop: "crop"})
React:
Copy to clipboard
<Image publicId="young_couple.jpg" >
  <Transformation gravity="faces" crop="crop" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="young_couple.jpg" >
  <cld-transformation gravity="faces" crop="crop" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="young_couple.jpg" >
  <cl-transformation gravity="faces" crop="crop">
  </cl-transformation>
</cl-image>
.NET:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Gravity("faces").Crop("crop")).BuildImageTag("young_couple.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().gravity("faces").crop("crop")).generate("young_couple.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setGravity("faces").setCrop("crop")).generate("young_couple.jpg")!, cloudinary: cloudinary)
Cropped to detected faces with default zoom

To include more of the background around the faces and increase the size of the resulting image, we can decrease the zoom level to 75% of the default by setting the zoom parameter to 0.75:

Ruby:
Copy to clipboard
cl_image_tag("young_couple.jpg", :gravity=>"faces", :zoom=>0.75, :crop=>"crop")
PHP v1:
Copy to clipboard
cl_image_tag("young_couple.jpg", array("gravity"=>"faces", "zoom"=>"0.75", "crop"=>"crop"))
PHP v2:
Copy to clipboard
(new ImageTag('young_couple.jpg'))
  ->resize(Resize::crop()->zoom(0.75)
    ->gravity(Gravity::focusOn(FocusOn::faces())));
Python:
Copy to clipboard
CloudinaryImage("young_couple.jpg").image(gravity="faces", zoom="0.75", crop="crop")
Node.js:
Copy to clipboard
cloudinary.image("young_couple.jpg", {gravity: "faces", zoom: "0.75", crop: "crop"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().gravity("faces").zoom(0.75).crop("crop")).imageTag("young_couple.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('young_couple.jpg', {gravity: "faces", zoom: "0.75", crop: "crop"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("young_couple.jpg", {gravity: "faces", zoom: "0.75", crop: "crop"})
React:
Copy to clipboard
<Image publicId="young_couple.jpg" >
  <Transformation gravity="faces" zoom="0.75" crop="crop" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="young_couple.jpg" >
  <cld-transformation gravity="faces" zoom="0.75" crop="crop" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="young_couple.jpg" >
  <cl-transformation gravity="faces" zoom="0.75" crop="crop">
  </cl-transformation>
</cl-image>
.NET:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Gravity("faces").Zoom(0.75).Crop("crop")).BuildImageTag("young_couple.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().gravity("faces").zoom(0.75).crop("crop")).generate("young_couple.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setGravity("faces").setZoom(0.75).setCrop("crop")).generate("young_couple.jpg")!, cloudinary: cloudinary)
Cropped to detected faces with 75% zoom

To include less of the background around the faces and decrease the size of the resulting image, we can increase the zoom level to 150% of the default by setting the zoom parameter to 1.5:

Ruby:
Copy to clipboard
cl_image_tag("young_couple.jpg", :gravity=>"faces", :zoom=>1.5, :crop=>"crop")
PHP v1:
Copy to clipboard
cl_image_tag("young_couple.jpg", array("gravity"=>"faces", "zoom"=>"1.5", "crop"=>"crop"))
PHP v2:
Copy to clipboard
(new ImageTag('young_couple.jpg'))
  ->resize(Resize::crop()->zoom(1.5)
    ->gravity(Gravity::focusOn(FocusOn::faces())));
Python:
Copy to clipboard
CloudinaryImage("young_couple.jpg").image(gravity="faces", zoom="1.5", crop="crop")
Node.js:
Copy to clipboard
cloudinary.image("young_couple.jpg", {gravity: "faces", zoom: "1.5", crop: "crop"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().gravity("faces").zoom(1.5).crop("crop")).imageTag("young_couple.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('young_couple.jpg', {gravity: "faces", zoom: "1.5", crop: "crop"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("young_couple.jpg", {gravity: "faces", zoom: "1.5", crop: "crop"})
React:
Copy to clipboard
<Image publicId="young_couple.jpg" >
  <Transformation gravity="faces" zoom="1.5" crop="crop" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="young_couple.jpg" >
  <cld-transformation gravity="faces" zoom="1.5" crop="crop" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="young_couple.jpg" >
  <cl-transformation gravity="faces" zoom="1.5" crop="crop">
  </cl-transformation>
</cl-image>
.NET:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Gravity("faces").Zoom(1.5).Crop("crop")).BuildImageTag("young_couple.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().gravity("faces").zoom(1.5).crop("crop")).generate("young_couple.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setGravity("faces").setZoom(1.5).setCrop("crop")).generate("young_couple.jpg")!, cloudinary: cloudinary)
Cropped to detected faces with 150% zoom

Single face cropping with multiple face thumbnail overlay

The following URL dynamically crops the lady.jpg image to only display the face at a zoom level of 90% and with rounded corners, then overlays a circular 150x150 thumbnail of the young_couple.jpg image with a zoom level of 75%. The overlay is also adjusted to display 10 pixels away from the north east corner by using the fl_layer_apply parameter, which allows multiple transformations to be applied on the overlay (see the blog post on manipulating overlays for more info).

Ruby:
Copy to clipboard
cl_image_tag("lady.jpg", :transformation=>[
  {:gravity=>"face", :radius=>50, :zoom=>0.9, :crop=>"crop"},
  {:overlay=>"young_couple", :width=>150, :height=>150, :radius=>"max", :gravity=>"faces", :zoom=>0.75, :crop=>"thumb"},
  {:flags=>"layer_apply", :gravity=>"north_east", :y=>10, :x=>10}
  ])
PHP v1:
Copy to clipboard
cl_image_tag("lady.jpg", array("transformation"=>array(
  array("gravity"=>"face", "radius"=>50, "zoom"=>"0.9", "crop"=>"crop"),
  array("overlay"=>"young_couple", "width"=>150, "height"=>150, "radius"=>"max", "gravity"=>"faces", "zoom"=>"0.75", "crop"=>"thumb"),
  array("flags"=>"layer_apply", "gravity"=>"north_east", "y"=>10, "x"=>10)
  )))
PHP v2:
Copy to clipboard
(new ImageTag('lady.jpg'))
  ->resize(Resize::crop()->zoom(0.9)->gravity(Gravity::focusOn(FocusOn::face())))
  ->roundCorners(RoundCorners::byRadius(50))
  ->overlay(
      Overlay::source(Source::image('young_couple')
        ->transformation((new ImageTransformation())
          ->resize(Resize::thumbnail()->width(150)->height(150)
            ->zoom(0.75)->gravity(Gravity::focusOn(FocusOn::faces())))
          ->roundCorners(RoundCorners::max())))
      ->position((new Position())
        ->gravity(Gravity::compass(Compass::northEast()))
        ->offsetX(10)->offsetY(10)
  ));
Python:
Copy to clipboard
CloudinaryImage("lady.jpg").image(transformation=[
  {'gravity': "face", 'radius': 50, 'zoom': "0.9", 'crop': "crop"},
  {'overlay': "young_couple", 'width': 150, 'height': 150, 'radius': "max", 'gravity': "faces", 'zoom': "0.75", 'crop': "thumb"},
  {'flags': "layer_apply", 'gravity': "north_east", 'y': 10, 'x': 10}
  ])
Node.js:
Copy to clipboard
cloudinary.image("lady.jpg", {transformation: [
  {gravity: "face", radius: 50, zoom: "0.9", crop: "crop"},
  {overlay: "young_couple", width: 150, height: 150, radius: "max", gravity: "faces", zoom: "0.75", crop: "thumb"},
  {flags: "layer_apply", gravity: "north_east", y: 10, x: 10}
  ]})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation()
  .gravity("face").radius(50).zoom(0.9).crop("crop").chain()
  .overlay(new Layer().publicId("young_couple")).width(150).height(150).radius("max").gravity("faces").zoom(0.75).crop("thumb").chain()
  .flags("layer_apply").gravity("north_east").y(10).x(10)).imageTag("lady.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('lady.jpg', {transformation: [
  {gravity: "face", radius: 50, zoom: "0.9", crop: "crop"},
  {overlay: new cloudinary.Layer().publicId("young_couple"), width: 150, height: 150, radius: "max", gravity: "faces", zoom: "0.75", crop: "thumb"},
  {flags: "layer_apply", gravity: "north_east", y: 10, x: 10}
  ]}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("lady.jpg", {transformation: [
  {gravity: "face", radius: 50, zoom: "0.9", crop: "crop"},
  {overlay: new cloudinary.Layer().publicId("young_couple"), width: 150, height: 150, radius: "max", gravity: "faces", zoom: "0.75", crop: "thumb"},
  {flags: "layer_apply", gravity: "north_east", y: 10, x: 10}
  ]})
React:
Copy to clipboard
<Image publicId="lady.jpg" >
  <Transformation gravity="face" radius="50" zoom="0.9" crop="crop" />
  <Transformation overlay="young_couple" width="150" height="150" radius="max" gravity="faces" zoom="0.75" crop="thumb" />
  <Transformation flags="layer_apply" gravity="north_east" y="10" x="10" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="lady.jpg" >
  <cld-transformation gravity="face" radius="50" zoom="0.9" crop="crop" />
  <cld-transformation :overlay="young_couple" width="150" height="150" radius="max" gravity="faces" zoom="0.75" crop="thumb" />
  <cld-transformation flags="layer_apply" gravity="north_east" y="10" x="10" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="lady.jpg" >
  <cl-transformation gravity="face" radius="50" zoom="0.9" crop="crop">
  </cl-transformation>
  <cl-transformation overlay="young_couple" width="150" height="150" radius="max" gravity="faces" zoom="0.75" crop="thumb">
  </cl-transformation>
  <cl-transformation flags="layer_apply" gravity="north_east" y="10" x="10">
  </cl-transformation>
</cl-image>
.NET:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Gravity("face").Radius(50).Zoom(0.9).Crop("crop").Chain()
  .Overlay(new Layer().PublicId("young_couple")).Width(150).Height(150).Radius("max").Gravity("faces").Zoom(0.75).Crop("thumb").Chain()
  .Flags("layer_apply").Gravity("north_east").Y(10).X(10)).BuildImageTag("lady.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation()
  .gravity("face").radius(50).zoom(0.9).crop("crop").chain()
  .overlay(new Layer().publicId("young_couple")).width(150).height(150).radius("max").gravity("faces").zoom(0.75).crop("thumb").chain()
  .flags("layer_apply").gravity("north_east").y(10).x(10)).generate("lady.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setGravity("face").setRadius(50).setZoom(0.9).setCrop("crop").chain()
  .setOverlay("young_couple").setWidth(150).setHeight(150).setRadius("max").setGravity("faces").setZoom(0.75).setCrop("thumb").chain()
  .setFlags("layer_apply").setGravity("north_east").setY(10).setX(10)).generate("lady.jpg")!, cloudinary: cloudinary)
Cropped to the detected face with 90% zoom and rounded corners, with 150x150 circular thumbnail overlay at 75% zoom and 10 pixels away from the north east corner

As shown in the example above, any of Cloudinary's image transformations can also be applied to the delivered image.

Summary

When automatically cropping images to focus on the detected face(s), the zoom parameter is used to control how much of the original image surrounding the face to keep, and is a powerful method to modify and normalize user generated content to match the graphic design and style of your site.

The new Zoom feature is available to all our free and paid plans. If you don't have a Cloudinary account, you are welcome to sign up to our free account and try it out.

Recent Blog Posts

Creating an API With Python Flask to Upload Files to Cloudinary

Code

Cloudinary offers SDKs for many programming languages and frameworks. Even though it also offers an Upload API endpoint for both back-end and front-end code, most developers find the SDKs very helpful. If you're working with a powerful back-end framework like Python Flask, you'll be happy to hear that a Python SDK is now available.
This tutorial walks you through the process of building an API to upload images to Cloudinary. You can also upload other file types, including video and even nonmedia files, with the API.

Read more
How to Use the Cloudinary Media Editor Widget

At Cloudinary, we manage the entire pipeline of media assets for thousands of customers of varying sizes from numerous verticals.

As part of our commitment to support the entire flow of media assets, we are now introducing an intuitive media editing widget: an out­-of­-the-­box, interactive UI providing your users with a set of common image editing actions for immediate use on your website or web app. The widget is interactive and simple, built on Cloudinary's transformation capabilities, and requiring only a few lines of code to integrate. Afterwards, you can seamlessly and effortlessly add content to your site or app with no need for in-house image editing capabilities.

Read more
Shoppable Video Is Becoming Popular in E-Commerce

As pandemic restrictions necessitated, many shopping trips in 2020 took place outside the traditional brick-and-mortar store, or at least void of the physical aisle-browsing experience. Same-day curbside pickup became a safe and convenient alternative, and e-commerce transactions skyrocketed as consumers shopped online. In fact, Digital Commerce 360 estimates that, compared to 2019, e-commerce transactions grew by more than 40% last year.

Read more
Enhance Your Travel Site With Cloudinary in Anticipation of a Return to New Normal

Read more
The Benefits of Headless DAMs

Headless is not a buzzword anymore. In fact, the concept of headless architecture is gaining momentum due to the flexibility it offers for composing new experiences and for tackling the undue complexity of an ever-evolving technology stack. That’s because while the evolution of the martech landscape has enabled disruptive, digital innovations, the approach of buying point solutions for solving specific challenges can expose companies to the complicated nature of new technologies, systems, and platforms.

Read more