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.
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 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.
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.
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.
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.
And now, the portrait 300X600 portrait versions.
And, finally the landscape version of 600x200.
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.