Resizing Images for the Web

Using Paint .NET

Purpose of Tutorial

Many times we want to post images or photos to our website.  The most common mistake made in doing this is posting images before they have been formatted correctly for display on the web.  This tutorial will walk you through the process of formatting an image correctly before posting it on the web.

Resources Required

To complete this tutorial you will need the following.

• An image or photo to be formatted
• An image editing program*

This tutorial uses Paint .NET.  Paint .NET is a free imaging editing software program available at www.getpaint.net.  This tutorial does not cover the installation process for Paint .NET.  If you find the program useful please make a donation on their website.

Tutorial Steps

• Open Paint .NET (Start > All Programs > .NET Paint)
• Open the image to be resized (File > Open [Select your image (1)])
• Open the Resize dialog box (Image > Resize)
• For the "Resampling" option select "Best Quality"
• Make sure the option for "By absolute size" is selected.
• Check the "Maintain aspect ratio" checkbox.
• Under the "Pixel size" section of the Resize dialog box change the resolution value to "72" or "72.00".  This is the standard resolution used for displaying images on a computer screen.
• Enter the width or height you want to change the image to. (2)
• Click "OK".
• Save the image by selecting (File > Save As.. )
• Enter a new name for your image. (3)
• On the save configuration window change the quality to 80%.
• Click "OK".

(1) You will need to navigate to the image you want to resize.

(2) Images should be large enough to allow a view to see what the image is, but as small as possible to reduce filesize.  As a rule of thumb, images shouldn't be wider than 500 pixels.

(3) It is important to save your image as a seperate file so that you can keep the full quality image for later use in other projects.

Video Tutorial

Click here to see the video version of this tutorial.