Click here to Skip to main content
Click here to Skip to main content

Program for Optimization and Resizing of an Image

, 31 Mar 2010 CPOL
Rate this:
Please Sign up or sign in to vote.
This article guides about optimization of the size of an image file (in bytes) and resizing its dimensions (in pixels).
ImageOptimizationnResize

Introduction

In today's websites, we often need to save images from users whether to create personal galleries or product galleries, etc. Simultaneously we don’t want to limit user’s right to upload a certain type of image of a certain quality most of the time. That is, the user can upload any common format of image (.jpg, .gif, .bmp or .png) and/or Dimensions of image and/or Size of Image (in bytes). Then the whole process of optimization has gone to be internal, to process image and convert that into a specific format, specific dimensions, also you can watermark an image programmatically. Here in this context, I want to describe about changing the dimensions of image and side by side image is optimized for size (in bytes). For getting reference about other topics like format conversion and watermarking, please visit the links listed at the end of this article.

Using the Code

For this program to work, inclusion of these four namespaces is required:

using System.IO;
using System.Drawing;
using System.Drawing.Imaging;
using System.Drawing.Drawing2D;

The first one is used to access ‘Path’ class through which we extract the extension of uploaded image. Next, it is required to use other image processing related classes like ‘Bitmap’, ‘Graphics’, ‘StringFormat’, etc. The third one provides us the flexibility of choosing a format for our resultant image, and the fourth one is used to keep the quality of image intact using interpolation operations.

In my demonstration program, there are two blank directories ‘Original Images’ and ‘Resultant Images’. The former is for saving original images and the latter is for optimized and resized images. There is a Default.aspx page. Six ASPX controls have been put there.

  • FileUpload: To upload image file that has to be processed
  • TexBox1: Used to specify the width of the resultant image (in pixels)
  • TexBox2: Used to specify the height of the resultant image (in pixels)
  • Button: Used to trigger the operation of processing
  • Image1: Used to show the original Image
  • Image2: Used to show the resultant Image

Also there are other controls which have been used for furnishing the data about images.

Once your image has been processed, both of your images (original & resultant) will be shown in Image1 and Image2 controls respectively. Data specific to each image (width, height, size in bytes) will be shown along with the images.

The handler function of the button clicking which the image has been processed for optimization and resizing is given below:

protected void btnResults_OnClick(object sender, EventArgs e)
{
    if (Page.IsValid && fpImage.HasFile)
    {
        string tmpName = Guid.NewGuid().ToString();
        fpImage.SaveAs(MapPath("~/Original Images/" + 
		tmpName + Path.GetExtension(fpImage.FileName)));
        imgOriginal.ImageUrl = "~/Original Images/" + 
		tmpName + Path.GetExtension(fpImage.FileName);

        Bitmap original_image = new Bitmap(fpImage.FileContent);
        lblOIW.Text = original_image.Width.ToString();
        lblOIH.Text = original_image.Height.ToString();
        lblOIS.Text = fpImage.FileContent.Length.ToString();
            
        OptimizeNResize(original_image, tmpName);
        if(original_image != null) original_image.Dispose();
    }
}

I create a new GUID and collect it in a string variable tmpName. This is the name to save the original as well as optimized image. The next line is to save the original image to ‘Original Images’ folder. This saved image is then linked to an Image control on page.

The image is now collected in a new Bitmap and this bitmap. The dimensions and size of original images has been shown along with it. Now the bitmap of the original image and tmpName are passed to a new function which is responsible for optimizing this image. This function is as under:

protected void OptimizeNResize(Bitmap original_image, string tmpName)
{
    Bitmap final_image = null;
    Graphics graphic = null;
    int reqW = Int32.Parse(txtWidth.Text);
    int reqH = Int32.Parse(txtHeight.Text);
    final_image = new Bitmap(reqW,reqH);
    graphic = Graphics.FromImage(final_image);
    graphic.FillRectangle(new SolidBrush(Color.Transparent), 
		new Rectangle(0, 0, reqW,reqH));
    graphic.InterpolationMode = InterpolationMode.HighQualityBicubic; /* new way */
    graphic.DrawImage(original_image, 0, 0, reqW, reqH);
    final_image.Save(MapPath("~/Resultant Images/" + tmpName + 
		Path.GetExtension(fpImage.FileName)));
    imgResult.ImageUrl = "~/Resultant Images/" + tmpName + 
		Path.GetExtension(fpImage.FileName);
    lblRIW.Text = final_image.Width.ToString();
    lblRIH.Text = final_image.Height.ToString();
    FileInfo nfi = new FileInfo(MapPath("~/Resultant Images/" + 
		tmpName + Path.GetExtension(fpImage.FileName)));
    lblRIS.Text = nfi.Length.ToString();

    lnkSave1.NavigateUrl = "~/Original Images/" + tmpName + 
		Path.GetExtension(fpImage.FileName);
    lnkSave2.NavigateUrl = "~/Resultant Images/" + tmpName + 
		Path.GetExtension(fpImage.FileName);

     if (graphic != null) graphic.Dispose();
     if (original_image != null) original_image.Dispose();
     if (final_image != null) final_image.Dispose();
}

The first few lines of the above function are used to specify variables of Bitmap and Graphics classes. Width and height of resultant image have been extracted from textboxes and a blank bitmap has been created of the same dimensions. This bitmap has now been formed into an image and collected in a graphic variable.

The above graphic has now been filled with a rectangle of transparent background. Interpolation operation has been applied to keep the quality of image intact and then the original image has been drawn on this graphic. This graphic originally is a reference to a Bitmap object (final_image). Now the final image has been saved in a resultant image folder and shown int the image2 control with the specific values (width, height, and size) mentioned along with it.

However, I have made the dimensions of controls image1 and image2 fixed on page. But the dimensions of image contained could be different. I have put two links on page which will show images in actual sizes in new browser windows.

Finally all the containers of images, original image bitmap, final image bitmap and graphics object have been disposed and we get an image optimized in size with the required dimensions.

Points to Ponder

The practical stuff is attached as a demo. You will easily understand when you look at the download files. Image processing operations require high amount of server resources, if not managed properly, they can slow down the performance. It is important to release resources by disposing the objects of classes like Bitmap, when you're done. You might also be interested in some other articles that I have written:

Final Words

I hope you find the stuff helpful. Thanks for reading. Good luck!

History

  • 31st March, 2010: Initial post

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Mohd Arshad (Sam)
Software Developer (Senior) Cherisys Technologies, WebStreet.in
India India

Software professional with demonstrated strength in windows-based and web-based software development. Have 4 years of experience with the full software development lifecycle including requirements, design, development, testing/QA, deployment, training & support. Have 1 year experience managing groups, planning and executing implementations. Practical working knowledge of all aspects of IT. Possess strong insight into practical business considerations.



www.cherisys.com
www.webstreet.in
www.codevdo.com
www.bizkut.com
Follow on   Twitter

Comments and Discussions

 
GeneralMy vote of 5 Pinmembermanoj kumar choubey26-Feb-12 22:25 
Generalokay PinmemberYves8-Apr-10 15:50 
Questionone question Pinmemberdamdam1011-Apr-10 7:46 
AnswerRe: one question PinmemberMohd Arshad (Sam)1-Apr-10 8:07 
GeneralRe: one question Pinmemberdamdam1013-Apr-10 1:57 
GeneralRe: one question PinmemberMohd Arshad (Sam)3-Apr-10 2:03 
QuestionQuestion Pinmemberdamdam1011-Apr-10 7:40 
AnswerRe: Question PinmemberMohd Arshad (Sam)1-Apr-10 8:09 
GeneralNice work Pinmemberdamdam1011-Apr-10 7:36 
GeneralRe: Nice work PinmemberMohd Arshad (Sam)1-Apr-10 7:57 
GeneralMy vote of 1 Pinmembervilainchien31-Mar-10 23:42 
GeneralRe: My vote of 1 PinmemberMohd Arshad (Sam)1-Apr-10 4:06 
GeneralMy vote of 1 PinmemberPCoffey31-Mar-10 12:01 
GeneralRe: My vote of 1 [modified] PinmemberMohd Arshad (Sam)31-Mar-10 13:59 
RantMy vote of 1 PinmemberPogoboyMtK31-Mar-10 10:15 
GeneralRe: My vote of 1 PinmemberMohd Arshad (Sam)31-Mar-10 14:10 
GeneralRe: My vote of 1 PinmemberYves8-Apr-10 15:39 
GeneralPreserving Aspect Ratio PinmemberMohammad Elsheimy31-Mar-10 8:30 
GeneralRe: Preserving Aspect Ratio PinmemberMohd Arshad (Sam)31-Mar-10 14:27 
GeneralRe: Preserving Aspect Ratio PinmemberDimitris Vassiliades31-Mar-10 16:16 
GeneralRe: Preserving Aspect Ratio PinmemberMohd Arshad (Sam)31-Mar-10 21:40 
GeneralRe: Preserving Aspect Ratio PinmemberMohammad Elsheimy1-Apr-10 2:01 
GeneralThings to be careful of... PinmemberRene Pilon31-Mar-10 4:02 
GeneralRe: Things to be careful of... PinmemberMohd Arshad (Sam)31-Mar-10 4:16 
GeneralMy vote of 1 PinmemberTringXRay31-Mar-10 3:44 
GeneralRe: My vote of 1 PinmemberMohd Arshad (Sam)31-Mar-10 3:56 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.141223.1 | Last Updated 31 Mar 2010
Article Copyright 2010 by Mohd Arshad (Sam)
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid