Resizing images without loss of quality
ASP.NET provides us with System.Drawing namespace where we can find classes we can use to manipulate with images. There are many people out there who mistakenly think that Image.GetThumbnailImage is best choice for image resizing. You can easily create crappy images if you follow the code examples in previously pointed article. In this post I will show you how to resize images without negative side effects.
Some words about images and thumbnails
Cameras today are powerful tools. They can do many tricks we cannot even imagine if we are dumb users. One those functionalities is generating thumbnails of images. These thumbnails are embedded in original image and are usually small by their dimensions.
If you take image with high resolution and resize it to 50% then using Image.GetThumbnailImage method may produce the result we expect. It takes small thumbnail image and resizes it larger. This causes hard loss of quality and resized image look awful.
Our original image here is taken during Wacken Open Air 2005. I am on this photo too (guess which one). Original image has dimensions 2048x1536. Be aware – size this file is about 1.6MB.
Click on the image to see it in original size.
This file contains thumbnail image and let’s see how previously pointed example fails.
Image.GetThumbnailImage
As a first thing let’s use Image.GetThumbnailImage to get new version of original image that is four times smaller (512x384). Here is the code.
public void ResizeImage(double scaleFactor, Stream fromStream, Stream toStream)
{
var image = Image.FromStream(fromStream);
var newWidth = (int)(image.Width * scaleFactor);
var newHeight = (int)(image.Height * scaleFactor);
var abort = new Image.GetThumbnailImageAbort(ThumbnailCallback);
var thumbnail = image.GetThumbnailImage(newWidth, newHeight, abort, IntPtr.Zero);
thumbnail.Save(toStream, image.RawFormat);
thumbnail.Dispose();
image.Dispose();
}
public bool ThumbnailCallback()
{
return false;
}
And here is the result…
Awful, isn’t it? Now I tell you a little secret. It is directly copy-pasted from MSDN library:
If the Image contains an embedded thumbnail image, this method retrieves the embedded thumbnail and scales it to the requested size. If the Image does not contain an embedded thumbnail image, this method creates a thumbnail image by scaling the main image.
The GetThumbnailImage method works well when the requested thumbnail image has a size of about 120 x 120 pixels. If you request a large thumbnail image (for example, 300 x 300) from an Image that has an embedded thumbnail, there could be a noticeable loss of quality in the thumbnail image. It might be better to scale the main image (instead of scaling the embedded thumbnail) by calling the DrawImage method.
I have on advice too: don’t trust everything you find in web, even if it has very high position in search engine results (Google: asp.net resize image).
Let’s follow now MSDN Library suggestion and make thumbnail that is 7% of original image. To get image with this size you should use 0.07 as scaling factor.
Use GetThumbnailImage to create small thumbnails. It has less impact on your system and it wants less resources than resizing full size image down to thumbnail size.
Custom resizing
Now let’s see the code that makes clean resizing. This code doesn’t use GetThumbnailImage method and operates therefore on full size image. Also you can see that this code tries to save as much quality as possible.
public void ResizeImage(double scaleFactor, Stream fromStream, Stream toStream)
{
var image = Image.FromStream(fromStream);
var newWidth = (int)(image.Width * scaleFactor);
var newHeight = (int)(image.Height * scaleFactor);
var thumbnailBitmap = new Bitmap(newWidth, newHeight);
var thumbnailGraph = Graphics.FromImage(thumbnailBitmap);
thumbnailGraph.CompositingQuality = CompositingQuality.HighQuality;
thumbnailGraph.SmoothingMode = SmoothingMode.HighQuality;
thumbnailGraph.InterpolationMode = InterpolationMode.HighQualityBicubic;
var imageRectangle = new Rectangle(0, 0, newWidth, newHeight);
thumbnailGraph.DrawImage(image, imageRectangle);
thumbnailBitmap.Save(toStream, image.RawFormat);
thumbnailGraph.Dispose();
thumbnailBitmap.Dispose();
image.Dispose();
}
And the resulting picture is here.
This image is larger than thumbnail, but still looks nice.