How to resize image without losing quality

I have some images which are smaller than 500x500 pixels. When I resize them up to 2000 x 2000, it starts looking blurry. Any way to get around this? Also, in some cases, when I have a very high-resolution image from a modern camera, like 4000 x 3000 pixels, and I have to resize it down to a small 400x300 thumbnail, then it loses a lot of detail. How do I ensure that my resize operation, when scaling down, maintains as high a quality as possible? Is it something that has to do with the quality parameter?

Quality while upscaling the image

When you are upscaling the image, the resizing algorithm has to make up or imagine the additional details to get to the final output resolution. This process is not able to maintain the same level details as the original and leads to blurriness. There are two ways to handle this as explained below

We will use this image for the examples below which is at 500px

1. Using sharpening on upscale

To resize the image to 2000px we add the w-2000 transformation parameter. Along with that we also use unsharp mask to sharpen the image using the e-usm parameters. The values for this parameter control the sharpening amount, threshold, and radius. Details for it can be found here

Without sharpening

https://ik.imagekit.io/ikmedia/docs_images/Community/house.jpg?tr=w-2000

With sharpening

https://ik.imagekit.io/ikmedia/docs_images/Community/house.jpg?tr=w-2000,e-usm-2-4-5-0.008

2. Use GenAI Upscale

Generative AI is good at imagining details in images and it is getting better quickly. You can try the e-upscale parameter in ImageKit to improve visual quality of the image when resizing it upwards.

The results with vary based on the content of the image. AI would work well for photographs of common items, like trees, animals etc, because AI models have seen a lot of this in training. It would still produce “artificial” looking images for humans, unique pictures of houses like in this example. This is likely to improve with time.

For example

https://ik.imagekit.io/ikmedia/docs_images/Community/house.jpg?tr=e-upscale

The house looks artificial, but the trees etc are upscaled pretty well.

Quality while downscaling the image

When you resize a larger image from 2000x2000px to a smaller resolution like 500x500px, then you are representing the information which was earlier represented in 4 pixels in 1 pixel (2000 : 500 = 4 : 1). This leads to a loss of detail. Even in this case, adding sharpening parameter helps improve visual quality in resizing.

Here is the original image 1920px wide

https://ik.imagekit.io/ikmedia/docs_images/Community/bouquet.jpg

Without sharpening, scale down to 300px width

https://ik.imagekit.io/ikmedia/docs_images/Community/bouquet.jpg?tr=w-300

With sharpening, scale down to 300px width

https://ik.imagekit.io/ikmedia/docs_images/Community/bouquet.jpg?tr=w-300,e-usm-2-2-0.8-0.008

You can see that the flowers look much sharper, with very well defined edges, in the image with sharpening. This would also look good for e-commerce images, jewellery images, etc. where highlighting the image details is necessary for good user experience. You can control sharpening based on your requirments.