JustPix - Preparing photographs for web publishing

JustPix

Preparing Digital Photos for Your Website

Home

Photo Selection

Re-Sizing Your Photographs

100 x 66 pixels

Photographs on a web page are measured in pixels, which is short for picture element. What determines the physical size of a photograph on the screen is the monitor’s resolution and the dimensions of the image.

The resolution of a typical 17” monitor is 1024×768 pixels. Therefore a 300 pixel wide image would cover approximately a third (300/1024) of the screen width on a 17” monitor. The three examples opposite show the same photograph at three different sizes.

200 x 133 pixels

When inserting images into a particular page on your website, the minimum and maximum allowable size will often be stated. These size limits may change depending on the type of page you are editing and where on the page the image is being positioned.

A photograph from a digital camera will nearly always be far bigger than is required for the web page, so it will need to be re-sized.

It is not always necessary to re-size the image to the maximum allowed, as this may be too large in relation to the rest of the content. Try different sizes to see which gives the best impact.

300 x 199 pixels

When you re-size the width of the image, you should also re-size the height by the same proportion and vice versa. This is called maintaining the aspect ratio of the photograph. If you do not do this the image will be distorted. Fortunately most resizing software will automatically do this for you.

IMPORTANT:

When you have re-sized your photograph make a note of the final dimensions in pixels as you may need this information later when inserting the photograph into your web page.

It is also good practice to save the re-sized image with a different file name to the original photograph, so the original is not overwritten and lost. Always use a filename that is meaningful, so that you can easily identify the correct picture to choose when you later insert it into a webpage.

'Web Resizer' Tutorial – Re-Sizing your Photograph

To re-size your image to 250 pixels wide enter ‘250’ into the ‘New Size:’ box and ensure the width radial button is selected. Then click ‘apply changes’. Make a note of the new size of the ‘Optimized image’ and click the ‘download this image’ link to save the image back to your computer, renaming the file to something different from the original.

There are a few more controls in Web Resizer that allow you to change the contrast, brightness and colour saturation and to place a border around your photograph.

Experiment with these options to see the effect on your photograph. We would advise leaving the 'Sharpen' and 'Image quality' values at 40 and 80 as this will create good quality images for your website.