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.
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.
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 />
<asp:Image ID="imgOld" runat="server" />
Enter new width
<asp:TextBox ID="txtwidth" runat="server" Width="167px"></asp:TextBox>
Enter new height
<asp:TextBox ID="txtHeight" runat="server" Width="167px"></asp:TextBox>
<asp:Button ID="btnCreateThumbnail" runat="server" Text="Change image size" />
<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
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
imgOld.ImageUrl = "Images\old.jpg"
imgNew.Visible = False
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
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
Public Function ThumbnailCallback() As Boolean
public bool ThumbnailCallback()
Now, in button click event create GetThumbnailImageAbort delegate which will use above callback method
Dim myCallback As New Image.GetThumbnailImageAbort(AddressOf ThumbnailCallback)
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
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"
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
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.