{"id":21388,"date":"2020-03-21T10:35:00","date_gmt":"2020-03-21T10:35:00","guid":{"rendered":"http:\/\/introducing_smart_cropping_intelligent_quality_selection_and_automated_responsive_images"},"modified":"2026-03-15T12:52:20","modified_gmt":"2026-03-15T19:52:20","slug":"introducing_smart_cropping_intelligent_quality_selection_and_automated_responsive_images","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/introducing_smart_cropping_intelligent_quality_selection_and_automated_responsive_images","title":{"rendered":"Smart Cropping, Intelligent Quality Selection, and Automated Responsive Images"},"content":{"rendered":"

Every image is unique, so are website visitors. In a perfect world, we would adapt images to be \u201cjust right\u201d for all users, i.e., perfectly cropped with responsive<\/a> dimensions, correct encoding settings, and optimal quality in the most suitable format.<\/p>\n

See this example of a photo of a cat:<\/p>\n

\"Original<\/a><\/p>\n

To have Cloudinary adapt and optimize that image to fit all devices and browsers through automation, add the parameters (in orange below) to the image URL:<\/p>\n

\n Loading code examples<\/span>\n <\/cld-code-widget><\/p>\n

\n\"Standard<\/a>\n\"Auto-crop<\/a>\n<\/div>\n
\n<\/div>\n

The image on the left, a standard crop delivered as a standard JPEG of the original 2,000-px. height, is a large 537-KB<\/strong> file. In contrast, the image on the right is perfectly cropped and delivered as an optimized 170-KB WebP<\/strong> on Chrome, a bandwidth savings of 69 percent. You can save even more bandwidth by adopting one of our solutions for delivering responsive layouts<\/a>, as described in the sections below.<\/p>\n

Optimal delivery on an image-by-image and user-by-user basis is challenging. It requires considerable knowhow of the intricacies of file formats, vision algorithms, and browser behavior. The challenge takes on phenomenal proportions if you must scale countless images that are uploaded to your websites and mobile apps. Automation is the ultimate answer.<\/p>\n

This is part of a series of articles about Auto Image Crop<\/a>.<\/p>\n

The State of Images Solved<\/h2>\n

At its launch in 2012, Cloudinary, a complete image-management solution created by developers for developers, aimed at eliminating the R&D time required for managing images for web and mobile apps. A major milestone was reached in 2016 with the announcement of the state of Images Solved<\/strong>.<\/p>\n

By way of background, developers must frequently create the perfect image crop that focuses on the most important region by first determining the optimal file format and encoder settings to represent the content with the minimum number of bytes. That means creating multiple variants of every image in different resolutions for responsive delivery on various devices.<\/p>\n

Images Solved at Cloudinary automates the process of transforming images in a content-aware and context-aware manner. That is, for every high-resolution, user-uploaded image:<\/p>\n

    \n
  1. Adapt it in real time to focus on its most important region.<\/li>\n
  2. Dynamically select and incorporate the optimal quality and encoding settings.<\/li>\n
  3. Responsively deliver the image to any device in any resolution or pixel density.<\/li>\n<\/ol>\n

    Further simplifying the life of developers are the following critical image-transformation and delivery tasks performed through automation by Cloudinary:<\/p>\n