Image Optimization July 17, 2020 by Anna Rud

Uploadcare Smart Resize: Change Image Size Automatically Without Distortion

Resizing pictures is an easy task, but it gets terrifying when you deal with hundreds, or even thousands of images. Luckily, we’ve found a way to save you from all that boring manual work. 

Meet Smart Resize by Uploadcare. This feature allows you to automate image resizing without losing quality or distorting objects in a picture. Keep reading to learn more about how it works and when you should opt for it. 

What Is Smart Resize?

Smart Resize is an innovative feature that utilizes AI and deep learning neural networks. The software analyzes the contents of an image and resizes only the unimportant pixels. Simply put, it preserves the correct proportions of faces, silhouettes and objects, and resizes only the background and insignificant details. 

It allows you to automatically resize images to the desired dimensions without stretching or squashing important areas. With this technology, you can:

✅ Turn a vertical image into a square one, or vice versa:

Apply smart crop to turn a rectangular image into a square one

✅ Implement batch image resizing to fit existing images into an updated website design:

Automatically resize images after website redesign

✅ Automatically resize images uploaded by users, for instance, profile photos:

Automatically resize user-generated images

✅ Generate nice-looking image thumbnails:

Automatically create thumbnails for your images

✅ Create horizontal and vertical banners using a single photo:

Automatically create banners of different sizes

Regular Resize vs. Smart Resize

When you use a basic resize feature to shrink or stretch an image, it applies the effect to the entire picture, without taking account of what’s in it. This means that sometimes you risk losing picture detail or distorting objects in a photo, making them squashed or stretched out and fuzzy.

 Regular resize in action

As you can see, the ballet dancer in this photo looks stretched out, because resizing has been applied to the entire picture. 

To get the desired size without distortion, you’d need to adjust every image manually, which is time-consuming and inefficient.   

That’s where Uploadcare’s Smart Resize comes in. The feature has a content-aware mechanic that detects visually important objects or regions in images. When shrinking or stretching images, the smart resize algorithm leaves important objects unchanged and applies effect only to the background. 

Smart resize in action

Here you can see that the ballet dancer looks the same, and only the background is stretched. 

This way you’ll be able to easily resize images while keeping the right proportions of the people and objects in them. 

How the Algorithm Works 

Uploadcare’s smart resize feature is an AI-based algorithm. We utilize deep learning neural networks to analyze images and find the most important areas: faces, objects, and corner points. 

Face and object detection don’t require a long explanation: they locate human faces and the most visually important regions in images. 

As for corner points, this method analyzes image pixels to find high contrast corners in the image, which comes in handy when you need to resize abstract images, landscapes, and art images. A good example from the business world would be resizing clients’ logos for landing pages. 

Automatically resize clients’ logos

For the smart resize algorithm, it doesn’t matter how many objects there are and where they are located in the picture. Even if there are several objects, smart resize will keep the right proportions of each of them.

Resize images containing multiple objects

Are There Any Limitations for Smart Resize?

Obviously, the algorithm works best with simple monochrome backgrounds. This is perfect for online stores, as most often they use the same neutral, unicolored background for all product photos. Thus, they’ll be able to get images of any size and resolution without distortion.

Easily resize images with plain background

As for complicated backgrounds, smart resize is also up for the task. It can blur the background a bit, but the image as well as the objects in it still look fine:

That said, not every background can be resized effectively. In some cases, you’ll need to opt for regular image resize and adjust the image manually. 

How to Implement 

All image transformations are done with Uploadcare Image CDN. To request a file from the CDN, you need to make a request to ucarecdn.com via HTTP or HTTPS. Here’s what it looks like: 

https://ucarecdn.com/:uuid/

To implement image transformations, you need to include URL directives in their respective CDN URLs:

https://ucarecdn.com/:uuid/-/:operation/:params/:filename

Where:

  • :uuid – your unique file identifier (UUID), assigned to every uploaded file.
  • /-/ – the mandatory delimiter for our parser to tell operations from one another and other path components.
  • :operation – CDN operation URL directive.
  • :params  – related parameters.
  • :filename – a filename you can add after the trailing / in a CDN URL. (optional)

To enable smart mode, you need to add :smart right after the parameters. Thus, to apply the smart resize feature, your URL should look like this:

https://ucarecdn.com/:uuid/-/resize/1024×1024/smart/

Just change :uuid to your file UUID and 1024×1024 to the aspect ratio you need. 

Explore our documentation to learn more about image transformations and our image CDN.

Ready to Try?

Uploadcare Smart Resize handles image resizing while keeping the highest quality, as well as the right proportion of objects in the picture. This feature reduces manual work to a minimum and lets you focus on more important and exciting tasks, rather than tweaking images. 

This feature is in beta. Want to be one of the first to give it a try?
Request access at viktor.bieriestniev@uploadcare.com and join our beta testing community!

Tags
Leave a comment

*

*