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.