Jun
29
2011

Creating thumbnail image or compressing image size in .Net

Introduction

Many times it is required to create thumbnail image (for the sake of saving disk space or some other reason)

.Net framework provided easy way to create thumbnail image by using System.Drawing.Image.GetThumbnailImage method

In this short article we will see how to use this method and code example. 

Background

Many times this question is asked in forums by many developers about how to create thumbnail image in .Net

or how can i save disk space by converting high resolution images into thumbnail images. .Net framework provides method to do that.

I will attempt to explain it with code in following article. Your comments are most precious to enhance it further. 

Article Body

Thumbnail image is reduced size version of original image. Many times we need to use small display image in web pages.

we can easily do this by setting image controls width and height as required and image loaded in the control gets skewed as per dimension set to the image control.

But, if image size is large then browser has to still download this large size image and then skew it while displaying.

Creating thumbnail images on server is useful in such scenario. For demo purpose we will create a web site project in Visual studio. And then add new aspx page in the project and name it as ThubnailImage.aspx.

To demonstrate the functionality we will create two asp image controls on the page, one to display original image and one for displaying image after changing its size. 

In addition to that let us create two textboxes to allow user to pass height and width of thumbnail image and one button control.

The final aspx markup looks like this

Original Image<br />
<br />
<asp:Image ID="imgOld" runat="server" />
<br />
<br />
Enter new width  
<asp:TextBox ID="txtwidth" runat="server" Width="167px"></asp:TextBox>                      
<br />
<br />
Enter new height  
<asp:TextBox ID="txtHeight" runat="server" Width="167px"></asp:TextBox>                      
<br />
<br />
<asp:Button ID="btnCreateThumbnail" runat="server" Text="Change image size" />
<br />
<br />
<asp:Image ID="imgNew" runat="server" />

Now let's go to codebehind and in page_load set ImageURL of imgOld control

Note that reference to System.Drawing needs to be added to use Image class

VB.Net

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    imgOld.ImageUrl = "Images\old.jpg"
    imgNew.Visible = False
End Sub
 
C#

protected void Page_Load(object sender, System.EventArgs e)
{
    imgOld.ImageUrl = "Images\\old.jpg";
    imgNew.Visible = false;
}

Now lets create button click event handler for btnCreateThumbnail button and add thumbnail creation code.

the method responsible for creating thumbnail image Image.GetThumbnailImage() takes following parameters

int thumbwidth

int thumbheight

Image.GetThumbnailImageAbort callback 

IntPtr callbackData

The height and width parameters are most obvious one. The callback parameter is a Image.GetThumbnailImageAbort delegate.

This callback method should return false else GetThumbnail method will stop the execution.

Let's first create callback method for this delegate which will return only false

VB.Net

Public Function ThumbnailCallback() As Boolean
    Return False
End Function
 
C#

public bool ThumbnailCallback()
{
    return false;
}

Now, in button click event create GetThumbnailImageAbort delegate which will use above callback method

VB.Net

Dim myCallback As New Image.GetThumbnailImageAbort(AddressOf ThumbnailCallback)
 
C#

Image.GetThumbnailImageAbort myCallback = new Image.GetThumbnailImageAbort(ThumbnailCallback);

Now, let's create object of Bitmap using original image file and then call GetThumbnailImage method like below.

Note that last parameter to method should always be IntPtr.Zero

VB.Net

Dim myBitmap As New Bitmap(Server.MapPath("Images") & "/old.jpg")
Dim myThumbnail As Image = myBitmap.GetThumbnailImage(txtwidth.Text, txtHeight.Text, myCallback, IntPtr.Zero)
myThumbnail.Save(Server.MapPath("Images") & "/new.jpg")
imgNew.Visible = True
imgNew.ImageUrl = "Images\new.jpg"
 
C#

Bitmap myBitmap = new Bitmap(Server.MapPath("Images") + "/old.jpg");
Image myThumbnail = myBitmap.GetThumbnailImage(txtwidth.Text, txtHeight.Text, myCallback, IntPtr.Zero);
myThumbnail.Save(Server.MapPath("Images") + "/new.jpg");
imgNew.Visible = true;
imgNew.ImageUrl = "Images\\new.jpg";

After creating thumbnail image, it is saved with another name and displayed in second image control.

after button click finally web page is displayed as below 

Go to image folder under web site root folder and compare size of both old and new images. The size of new image is reduced based on

new height, width used for conversion.

Note: all the code in this article is writen in VB.Net and converted using this conversion utility 

Conclusion

If large size thumbnail images are created then quality of image may be reduced by this method works good for standard sized thumbnails.

By creating thumbnail images and using them on web page wherever possible load time required for large images can be reduced.

About Me

You are visiting personal website of Kedar (KK)

Please go here to know more about me

Disclaimer

The opinions expressed here represent my own and not those of my past or present employers.

The concept/code provided on this site may not work as described. If you are using any code provided on this site. Then, please test it thoroughly. I shall not be responsible for any issues arising in the code. 

Month List