Click here to Skip to main content
13,350,289 members (49,534 online)
Click here to Skip to main content


29 bookmarked
Posted 31 Mar 2010

Program for Optimization and Resizing of an Image

, 31 Mar 2010
This article guides about optimization of the size of an image file (in bytes) and resizing its dimensions (in pixels).
Original Images
Resultant Images
<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">

<html xmlns="">
<head runat="server">
    <title>Untitled Page</title>
    <script type="text/javascript" language="javascript">
        function chkWH(source, args)
                if(parseInt(args.Value)>49 && parseInt(args.Value)<1000)
                    args.IsValid = true;
                    args.IsValid = false;
                args.IsValid = false;
        function chkNumeric(whv)
            var validchars = "0123456789";
            var isval = true;
            var vlen = whv.length;
                    isval = false;
            return isval;
    <form id="form1" runat="server">
        Browse an image of type .jpg, .gif, .png, .bmp or .tif. Must be less than or equal to 10MB in size:<br />
        <asp:FileUpload ID="fpImage" runat="server" />
        <asp:RequiredFieldValidator ID="reqImage" Display="Dynamic" ControlToValidate="fpImage" style="font:12px verdana;color:Red;vertical-align:middle;" Text="(Required)" runat="server"></asp:RequiredFieldValidator>
        <asp:CustomValidator ID="cvImageType" Display="Dynamic" ControlToValidate="fpImage" OnServerValidate="cvImageType_Validate" style="font:12px verdana;color:Red;vertical-align:middle;" Text="&nbsp;(Image must be any of these types: .jpg, .gif, .png, .bmp, .tif)" runat="server"></asp:CustomValidator>
        <asp:CustomValidator ID="cvImageSize" Display="Dynamic" ControlToValidate="fpImage" OnServerValidate="cvImageSize_Validate" style="font:12px verdana;color:Red;vertical-align:middle;" Text="&nbsp;(Image size must not exceed by 10MB.)" runat="server"></asp:CustomValidator>
        <br />
        New Width: <asp:TextBox ID="txtWidth" MaxLength="3" Width="50px" runat="server"></asp:TextBox>&nbsp;PX
        <asp:RequiredFieldValidator ID="reqTxtW" Display="Dynamic" ControlToValidate="txtWidth" style="font:12px verdana;color:Red;vertical-align:middle;" Text="(Required)" runat="server"></asp:RequiredFieldValidator>
        <asp:CustomValidator ID="cvTxtWidth" Display="Dynamic" ClientValidationFunction="chkWH" ControlToValidate="txtWidth" style="font:12px verdana;color:Red;vertical-align:middle;" Text="Width must be specified in decimals and between 50-999" runat="server"></asp:CustomValidator>
        <br />
        New Height: <asp:TextBox ID="txtHeight" MaxLength="3" Width="50px" runat="server"></asp:TextBox>&nbsp;PX
        <asp:RequiredFieldValidator ID="reqTxtH" Display="Dynamic" ControlToValidate="txtHeight" style="font:12px verdana;color:Red;vertical-align:middle;" Text="(Required)" runat="server"></asp:RequiredFieldValidator>
        <asp:CustomValidator ID="cvTxtHeight" Display="Dynamic" ClientValidationFunction="chkWH" ControlToValidate="txtHeight" style="font:12px verdana;color:Red;vertical-align:middle;" Text="Height must be specified in decimals and between 50-999" runat="server"></asp:CustomValidator>
        <br /><br />
        <asp:Button ID="btnResults" Text="Show Result" OnClick="btnResults_OnClick" runat="server" />
        <br /><br />
        <table cellpadding="0" cellspacing="0" border="0" style="width:800px">
                <td style="width:50%;padding-right:10px;text-align:center;">
                    <h3>Original Image</h3>
                    <asp:Image ID="imgOriginal" Width="380px" Height="380px" runat="server" />
                    <br /><br />
                    Width (in Pixels): <asp:Label ID="lblOIW" runat="server"></asp:Label><br />
                    Height (in Pixels): <asp:Label ID="lblOIH" runat="server"></asp:Label><br />
                    Size (in Bytes): <asp:Label ID="lblOIS" runat="server"></asp:Label>
                <td style="width:50%;padding-left:10px;text-align:center;">
                    <h3>Resultant Image</h3>
                    <asp:Image ID="imgResult" Width="380px" Height="380px" runat="server" />
                    <br /><br />
                    Width (in Pixels): <asp:Label ID="lblRIW" runat="server"></asp:Label><br />
                    Height (in Pixels): <asp:Label ID="lblRIH" runat="server"></asp:Label><br />
                    Size (in Bytes): <asp:Label ID="lblRIS" runat="server"></asp:Label>
                <td colspan="2">
                    <br /><br />
                    <strong>Note:</strong> However I've set the dimensions of both (original & optimized) images as 380px width and 380px height on page. But the actual dimensions are same as mentioned alongwith each image. 
                    <br /><br />
                    <asp:HyperLink ID="lnkSave1" Text="Click here" Target="_blank" runat="server"></asp:HyperLink> to see the actual original image in new window.
                    <br /><asp:HyperLink ID="lnkSave2" Text="Click here" Target="_blank" runat="server"></asp:HyperLink> to see the actual resultant image in new window.

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.


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


About the Author

Mohd Arshad (Sam)
Software Developer (Senior) Cherisys Technologies,
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.

You may also be interested in...

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