Getting Photos Web Ready

Photos and images that are too big (in terms of file size, width, height and/or resolution) are one of the key factors that slow down websites. This is a very brief guide to help explain some of the basics in terms of preparing photos to be used on the web.

Basic - Getting the Resolution and Size Right

1. Using Internet Explorer (IE) visit a page on the website where you are going to upload your photo, find one of a similar size and right-click over it and then click properties and you will see its dimensions e.g. 300 x 200 pixels (the first value is width and the second height).
2. Open the photo you wish to use for your website in Photoshop Elements.
3. You will normally match the one or more of the dimensions(height and or width) of the size of an existing photo in the site. This in order to maintain consistency and make the site look more professional (in this case 300 pixels wide, by 200 pixels high).
4. To do this go to Image>Resize.
5. Set the width to 300 pixels.
6. Make sure the resolution is set at 72 pixels/inch.
7. Click OK.
8. Choose File>Save for web and devices.
9. Make sure to save all photos as jpg / jpeg and in most cases use "high" quality. If they look jaggy or fuzzy try increasing the quality to "very high"or "maximum" quality.
10. Save the file in a folder named soemthing like "ready for website" and with an appropriate name e.g. "BestInBusinessTrophy2011.jpg"
     

Cropping - If you want to remove unwanted parts of a photo then you need to crop it:

1. Using Internet Explorer (IE) visit a page on the website where you are going to upload your photo, find one of a similar size and right-click over it and then click properties and you will see its dimensions e.g. 300 x 200 pixels (the first value is width and the second height).
2. Open the photo you wish to use for your website in Photoshop Elements.
3. Select the crop tool (it looks like 2 overlapping corners opposite each other – if you hover over each tool it will tell you what it is).
4. Having selected the crop tool you can then put values into to the area at the top of the screen relating to the crop tool, so if for example you wanted to crop an image to be 300pixels wide and 200pixels tall you would enter – 300px in the width box and 200px in the height box. You would also need to remember to enter 72 (pixels/inch) in the resolution box.
5. You then select the area you want using the crop tool – once selected you can move it pixel by pixel using the cursor arrows on your keyboard to get it in exactly the right place.
6. When happy click the Green Tick at the bottom of the photo to accept the crop.
7. Choose File>Save for web and devices.
8. Make sure to save all photos as jpg / jpeg and in most cases use "high" quality. If they look jaggy or fuzzy try increasing the quality to "very high"or "maximum" quality.
9. Save the file in a folder named soemthing like "ready for website" and with an appropriate name e.g. "BestInBusinessTrophy2011a.jpg"

Useful Shortcuts To Know in Photoshop Elements

1. Double-clicking the Magnifying Glass will show the image at its real size (as it will appear on screen i.e.100% zoom). Make sure to tick the box that says "Resize Windows To Fit" to make the best use of this function.
2. Double-clicking the hand tool will make the image fit to the currently available screen space.