resize for web

Freelance Photographer
Seeing things differently
A taker of Photographs - A creator of images

Resizing for the Web...

• Photoshop CS...
• Photoshop Elements 2...

Photoshop CS...

There seems to be a lot of confusion on how to resize an image for the web... I see images that are massive in area and low in quality because people want their images to be seen as big as possible... There are others who upload large files to retain the quality that would take an age to load for people on dial up networks... I find scrolling through a large image off putting as you can't get the overall view and if the browser compresses it to fit the screen the quality is lost, which IMHO defeats the object... Large quality files uploaded to the web also make stealing your work very easy indeed as well as taking up tons of bandwidth on the site... I will endeavour to explain how I resize my images for web use and why, so you can decide for yourself if it's feasible for your use...

Firstly the why, which was briefly explained above but I will recap... A lot of people still use a resolution of 800 x 600 therefore I size them either to a maximum width of 800 pixels in landscape format or 600 pixels in portrait format so these people can view the image without having to scroll, or have the image compressed by the browser...

Now for the how... If you use Adobe Photoshop and your full size image is edited and ready for reducing for the web follow the instructions below...

Click on Image... from the Menu bar and then on Image Size... from the drop down list... This will bring up a window like the one to the left, without the coloured hand pointers of course...
As the image is in portrait mode I entered a height of 600 pixels (pointer with red cuff)...

Make sure that the Constrain Proportions box is ticked which will link the height to the width (pointers with green cuffs)...

From the pointer with the blue cuff you will notice how the file size has been reduced by an enormous amount...

Click OK...

Because the image has been resized it is always best to check if you need to add a little unsharp mask to compensate for any loss in detail due to the resize...

Click on File... from the Menu bar and click on Save for Web... from the drop down list... This will bring up a new window like the one below, again without the coloured hand pointers of course...

Photoshop Elements 2...

Click on Image... from the Menu bar... Select Resize and then click on Image Size... from the drop down list... This will bring up a window like the one to the left, without the coloured hand pointers of course...

As the image is in portrait mode I entered a height of 600 pixels (pointer with red cuff)...

Make sure that the Constrain Proportions box is ticked which will link the height to the width (pointers with green cuffs)...

From the pointer with the blue cuff you will notice how the file size has been reduced by an enormous amount...

Click OK...

Because the image has been resized it is always best to check if you need to add a little unsharp mask to compensate for any loss in detail due to the resize...

Click on File... from the Menu bar and click on Save for Web... from the drop down list... This will bring up a new window like the one below without the coloured hand pointers of course...
Blue Cuffed Pointer... You can adjust the quality of the image by either choosing JPEGLow, JPEGMedium and JPEGHigh from the drop down list...
Green Cuff Pointer... This shows all relevant information about the file and you can alter these settings but there should be no need to as the resizing was done in Photoshop Elements...
Orange Cuffed Pointer... The preview zoom size, in percentages, is shown in the bottom left... You can use this to check the whole image at once or certain parts where details are important...
Click on OK...

Below is the web version (under 24KB without the water mark, 26.51 with it) of the original 20.6MB, 10 x 8, 300PPI image using the exact settings as described above but with the addition of my watermark...

Resizing for the Web... • Photoshop CS... • Photoshop Elements 2...
Photoshop CS... There seems to be a lot of confusion on how to resize an image for the web... I see images that are massive in area and low in quality because people want their images to be seen as big as possible... There are others who upload large files to retain the quality that would take an age to load for people on dial up networks... I find scrolling through a large image off putting as you can't get the overall view and if the browser compresses it to fit the screen the quality is lost, which IMHO defeats the object... Large quality files uploaded to the web also make stealing your work very easy indeed as well as taking up tons of bandwidth on the site... I will endeavour to explain how I resize my images for web use and why, so you can decide for yourself if it's feasible for your use... Firstly the why, which was briefly explained above but I will recap... A lot of people still use a resolution of 800 x 600 therefore I size them either to a maximum width of 800 pixels in landscape format or 600 pixels in portrait format so these people can view the image without having to scroll, or have the image compressed by the browser... Now for the how... If you use Adobe Photoshop and your full size image is edited and ready for reducing for the web follow the instructions below... Click on Image... from the Menu bar and then on Image Size... from the drop down list... This will bring up a window like the one to the left, without the coloured hand pointers of course... As the image is in portrait mode I entered a height of 600 pixels (pointer with red cuff)... Make sure that the Constrain Proportions box is ticked which will link the height to the width (pointers with green cuffs)... From the pointer with the blue cuff you will notice how the file size has been reduced by an enormous amount... Click OK... Because the image has been resized it is always best to check if you need to add a little unsharp mask to compensate for any loss in detail due to the resize... Click on File... from the Menu bar and click on Save for Web... from the drop down list... This will bring up a new window like the one below, again without the coloured hand pointers of course...
Red Cuffed Pointer... Choose the 4-up tab if it isn't already selected... Green Cuff Pointers... If you click on the Image size tab it will show you all the relevant information about the file... The quality of the image should be set to Bicubic if it isn't already... You can alter these settings but there should be no need to as the resizing was done in Photoshop... Blue Cuff Pointers... These are where you set the images attributes... JPEG is the favourite choice of file type here if you want a quality image that can be seen on all browsers... You can adjust the quality of the image by either choosing Low, Medium, High, Very High and Maximum from the drop down list or typing a number in the Quality: box... Try different settings and see how the quality of the image compares with the file size, the one selected is 30 quality, giving a file size of 23.45K which would take 9 seconds to download on a 28.8 Kb ps dial up modem... High quality (60) is represented by the Magenta cuffed pointer and you will notice that the very minimal increase in image quality has more than doubled the file size and will take twice as long to load... Low Quality 10 is represented by the Cyan cuffed pointer and has started to lose detail in the dogs hair and for the time saved in downloading is not, IMHO worth the saving... Alternatively you can use the Preset drop down list to select a preset quality... You may notice that the option I have chosen is web which is one of my own presets which uses my standard settings indicated by the blue cuffed pointers... Orange Cuffed Pointer... The preview zoom size, in percentages, is shown in the bottom left... You can use this to check the whole image at once or certain parts where details are important... Yellow Cuffed Pointer... This little right pointing triangle can be clicked on to create your own presets form your favourite settings, just click on it and choose Save Settings from the drop down list and type a file name for the settings... Now when you want to use the same settings just select your preset from the preset box and it will automatically set everything for you... Click on Save... To see what the web image would look like click » HERE... Photoshop Elements 2... Click on Image... from the Menu bar... Select Resize and then click on Image Size... from the drop down list... This will bring up a window like the one to the left, without the coloured hand pointers of course... As the image is in portrait mode I entered a height of 600 pixels (pointer with red cuff)... Make sure that the Constrain Proportions box is ticked which will link the height to the width (pointers with green cuffs)... From the pointer with the blue cuff you will notice how the file size has been reduced by an enormous amount... Click OK... Because the image has been resized it is always best to check if you need to add a little unsharp mask to compensate for any loss in detail due to the resize... Click on File... from the Menu bar and click on Save for Web... from the drop down list... This will bring up a new window like the one below without the coloured hand pointers of course... Blue Cuffed Pointer... You can adjust the quality of the image by either choosing JPEGLow, JPEGMedium and JPEGHigh from the drop down list... Green Cuff Pointer... This shows all relevant information about the file and you can alter these settings but there should be no need to as the resizing was done in Photoshop Elements... Orange Cuffed Pointer... The preview zoom size, in percentages, is shown in the bottom left... You can use this to check the whole image at once or certain parts where details are important... Click on OK... Below is the web version (under 24KB without the water mark, 26.51 with it) of the original 20.6MB, 10 x 8, 300PPI image using the exact settings as described above but with the addition of my watermark...



Designed by Ken McDonald	All Copyrights Reserved

	Freelance Photographer Seeing things differently A taker of Photographs - A creator of images
Kennymc.com