BUSINESS: Resizing Photos for Web Use using Adobe Photoshop

Start with an image to which you have finished making adjustments such as cropping, lightening etc. The next step is to shrink the dimensions of the image and also the actual size of the file to make it web suitable. This is where a basic understanding of resolution will come in handy so here goes!

 

Your monitor shows you images at a screen resolution of 72dpi (dots per inch) – any more dots per inch are wasted as the screen is incapable of displaying anything higher. However, if you were to print the image at 72dpi, it would look like a very poor newspaper image after it had been photocopied several times! So, if you want to print an image, you would need to size it at 300dpi. 

 

Screenshot 1

 

Under “Image” in the top menu, there is an option called “Image Size” – click this and you get the pop up box shown on the top right of Screenshot 1. This shows the pixel dimensions and the resolution of the photo so you can see that at 72dpi, my camera produces a file that is 121 cm x 81 cm – way too big for any web use. The file size is also shown 22.8M – huge! If I change the 72dpi to 300dpi, the dimensions will shrink to a more manageable size but because the number of pixels hasn’t changed (just more squashed into that inch), the file size stays the same and the photo is now suitable for printing

 

Screenshot 2

 

So how do we shrink both pixel dimension and file size – simple – just click the box marked “Resample Image” (Screenshot 2) in the bottom left of the pop up box and you should see the pixel sizes are no longer greyed out – change these to the size you would like (I like 600 x 400 for web use), click “OK” and you can see that the overall file size has dropped to 703.1k. In essence, you are telling the computer to drop all those extra pixels but to keep the overall look of the image intact.

 

Screenshot 3

 

You can further shrink the file size by saving the file for web use. Under “File” in the top menu, click the “Save For Web” option and you will see a large pop up screen (Screenshot 3). At the bottom left is the file size and in the boxes nearer the top right are quality settings. You can reduce the quality settings either by percentage or from maximum to high, medium or low. I usually use a medium setting (between 50% and 60%) and watch the file size change until I’m happy. Screenshot 3 shows the file size is 162.5k at maximum setting so you could leave it there if you wanted to.

 

Finally, click “Save” and it will bring up the usual screen for saving – I usually add ‘web’ to the end of the file name so a) I don’t lose the original file I worked on and b) I know it’s a low resolution/lower quality copy.