How to Increase Resolution of Images Throughout Your Website

There are a lot of potential scenarios where you would need to increase the resolutions of multiple images at once. For example, say you’re redesigning your website and need to upscale all your pictures to fit the new design. Or you want to incorporate user-generated content into your site, but the shots provided by the users are too small.

Whatever your situation is, using good old Photoshop for these purposes isn’t an option. It’s a great choice if you need to resize just a few images, but if you have hundreds of them, it’s better to find a way to automate the process. By the way, you’ve just found it.

Before We Start, an Important Note About Image Quality

  • The bigger you make an image, the more you’ll see a difference in quality. Avoid increasing the dimensions by more than 30%. If you increase it too much, the artifacts will be too noticeable.
  • Keep in mind that images with simple unicolored backgrounds can be increased more than photos.
  • If your image becomes less sharp, use sharpening tools to make it better.

How to Increase Image Resolution in Uploadcare: Two Options

Regular Resize

To get things rolling, you need to sign up for an Uploadcare account and create your first project from the dashboard.

At Uploadcare, all transformations are done on the fly via CDN image operations. Once an image is uploaded, you receive a CDN link with its own unique identifier (UUID). The link looks like this:

https://ucarecdn.com/a4adc2bd-452b-4b18-97b5-7beb1886475a/shelf.jpeg

Where a4adc2bd-452b-4b18–97b5–7beb1886475a is the unique file identifier (UUID) of this image, and shelf.jpeg is the filename (it’s optional, you can remove it).

And here’s our test image.

Once you get this link, you can implement any of the transformations available in Uploadcare by simply adding different operations to it. To resize an image, you need to add the CDN operation resize and specify the dimensions. You can set two dimensions or go with just one. If you specify a single linear dimension, the tool will preserve your original aspect ratio and resize the image along one of its axes. Note: 3000×3000 is the maximum size you can set.

After adding these parameters, the link will look like this:

https://ucarecdn.com/a4adc2bd-452b-4b18-97b5-7beb1886475a/-/resize/700×700/

/-/ is the mandatory delimiter to tell operations from one another. Use it every time you add a new parameter.

And here’s what we’ve got.

From here, you can use this link in your code and resize multiple images at once.

Uploadcare also allows you to adjust the resizing behavior for the cases when your original image is smaller than the resulting dimensions. To set it up, add the stretch parameter to the link, then add one of the following modes:

  • on — stretches the image up (if you don’t specify any mode, it’s the default option)
  • off — forbids stretching the image along any dimension that exceeds the image size along any of its axes.
  • fill — does not stretch the image; instead, it adds a color-filled frame around the edges.

Here’s what it looks like when you choose the fill mode:

https://ucarecdn.com/a4adc2bd-452b-4b18-97b5-7beb1886475a/-/resize/700×700/-/stretch/fill/

The same photo with a color-filled frame.

Smart Resize

The girl looks a bit squashed in the resized photo.

The Smart Resize feature is what can help you get around this issue. It utilizes AI and deep learning neural networks to analyze an image’s contents and resize only the unimportant pixels. Simply put, it preserves the correct proportions of objects, and resizes only the background. Let’s try applying smart resize to the same photo:

The background is stretched, but the girl is the same.

Note: Although the algorithm works well in most cases, it may not deliver a perfect result if the background consists of many colors and details.

That said, if you run an ecommerce website, most of your product photos probably have a plain monochrome background. In that case, you can safely apply smart resize to all your photos, and it will do just fine.

To apply this feature, you need to use the smart_resize parameter and specify two dimensions. The link will look like this: https://ucarecdn.com/9b71b355-48b3-469b-ad86-c614e12d8125/-/smart_resize/800×855/

Enhance your image with the sharpening tool

https://ucarecdn.com/9b71b355-48b3-469b-ad86-c614e12d8125/-/smart_resize/800×855/-/sharp/10/

Wrapping Up

File system as a service for web and mobile apps