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?

Abraia smart cropping

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

The algorithm analyze each image to extract the saliency map -as showed in the next picture-, which identifies the elements and features that captures attention -under free viewing conditions-.

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

Crop candidates are generated based on this map and scored for content preservation and boundary simplicity. This is about the undesirable effect of cutting through an object (it may not only ruins the balance, but also create unnecessary distraction). Finally, the best crop is selected based on aesthetics evaluation for best visual composition, which refers to the placement or arrangement of visual elements in a photo, as shown bellow.

smartcrop man on the snow Square smartcrop generated by Abraia technology

Responsive use case

Since every image is unique in its contents, it turns challenging to deliver an optimal image to every layout, especially when you need to scale up to hundreds, thousands or even millions of images.

Suppose that you need to adapt different images for three different layouts on a website. For instance, three versions are demanded: a landscape (3:1), a square image (1:1), and a portrait (2:3).

landscape woman in blue
landscape crop of yellow cat
square crop woman in blue square crop of yellow cat
portrait crop woman in blue
portrait crop of yellow 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.

Food photos use case

For instance, the design of a food website requires thumbnails of 400x200. Images are uploaded as are (i.e. without editing) and need to be adapted to this fixed aspect ratio (2:1). Each image needs to be cropped and resized in a different way, with our smart cropping technology the algorithm chooses the most appealing part of each photo, based on the content of each photo.

To automatically generate those thumbnails of food, the user just needs to specify the final size of the image, and this is manipulated and delivered on-the-fly. Behind of this simple request is a complex algorithm that evaluates the image 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 images or user- uploaded content.

Faces use case

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. This allows directly getting a face crops from general pictures.

attractive young woman
attractive young woman face
attractive young woman crop

It automatically detects the largest face in the image and makes it the focus of the transformation. After that, it automatically selects the best aesthetics crop centered in that face.