Smart cropping for responsive images

Modern responsive designs require the same image in different places, shapes, and sizes. This makes images probable need to be presented in totally different sizes and aspect ratios when shown on different display devices (art-direction).

A common challenge in many web applications is how to adapt images for a fixed graphic design. Most of the time this means manually crop each image to get a defined size and aspect ratio. But, when we have thousands of images, the manual cropping is expensive and time consuming.

A major challenge adapting images is how to crop them preserving the content and the aesthetics of such images.

The obvious solution is automatically crop and resize those images; but each image is different, with different elements, composition, and aesthetics. This makes difficult to define rules to automatically adapt them - there is no way to guess in advance whether to focus on the top, middle, or one side of the pictures -. So, how to crop those images for each of the required dimensions without losing the most important content? This becomes near impossible when a lot of your images come from user-generated content.

Automatic food photo crop

For example, a food web site's design requires thumbnails of 400x200. Images are uploaded as are (i.e. without editing) and need to be adapted to the fixed aspect ratio. Each image needs to be cropped and resized in a different way, but with an smart cropping the algorithm is in charge of choose those parameters to maintain the most appealing part of each photo, without considering what king of photo it is.

To automatically generate those thumbnails of food, the user just needs to build a simple URL, and then the image is manipulated and delivered on the fly.

https://abraia.me/images?w=400&h=200&url=
  https://images.pexels.com/photos/376464/pexels-photo-376464.jpeg

Behind this simple URL, where only the size of the requested image is specified, is a complex algorithm that evaluates the image and how it is perceived to provide the best human-like results. Replacing the completely infeasible alternative of having a real person sitting 24 hours a day to manually analyze and crop every single one of your professional graphics as well as all user-uploaded content.

How smart cropping works

Abraia's content-aware cropping technology is built on perception models to automatically detect the region of interest in every image. Then, using the most salient parts of the image, aesthetics is used to select the best crop balancing content and aesthetics. Finally, the selected crop is resized to fit the size of your site's layout without losing focus on important content.

heatmap man on the snow Heatmap generated with Abraia's saliency model

The image is analyzed to extract the saliency map, which identifies the elements and features that captures attention -under free viewing conditions-. Crop candidates are generated based on this map and scored for content preservation, and finally the best crop is selected based on aesthetic evaluation.

smartcrop man on the snow Square smartcrop generated by Abraia technology

Smart cropping of faces

Other common use case is reusing a photography for a small sized profile picture - e.g. for a company overview page -. With the smart cropping for faces we can get a portrait picture from a generic image.

attractive young woman
attractive young woman face
attractive young woman crop
https://abraia.me/images/adolescent-cute-face.jpg?w=260&h=260&m=face

The face mode allows to directly get a face cropping for your profile from any picture. It automatically detect the largest face in the image and makes it the focus of the transformation.

Examples

Different pictures need to be adapted for three different pages on a website: in landscape (e.g., 600x200), in portrait (e.g., 300x600) and as a square (e.g., 300x300). For example, let's create a 300x300 thumbnail of each of the original images.

square bench with people
square capture with phone
square cat

And now, the portrait 300X600 portrait versions.

portrait bench with people
portrait capture with phone
portrait cat

And, finally the landscape version of 600x200.

landscape bench with people
landscape capture with phone
landscape cat

Abraia provides a set of unique algorithms to smartly crop and resize your images delivering the best cropping area to preserve the content and the aesthetics of your images.