Resizing and Saving Images for Web using Photoshop CS5

Cropping and Saving Images for Use on Websites

Using Photoshop CS5

Ensuring your images are the right size is of great importance if your goal is to have a website that looks good. Pictures that are the wrong dimensions can look distorted or out of place.

Images that are too large can also significantly slow down your website, resulting in loss of traffic and people clicking out of your site.

Below is a step-by-step guide on how to crop and save images for web using Photoshop CS5 - or you can watch the video above.

Open the image you need to crop and resize.

Click on 'File' and then 'Open' and find your picture in the folder on your computer.

Cropping and Resizing Images for Web | Photoshop CS5

Click on the Crop Tool in the Tools Pane

Cropping and Resizing Images for Web | Photoshop CS5

Put your dimensions into the Width and Height boxes, and ensure the resolution is set to 72 (for web only).

Now use your mouse and drag along the photo and crop your image to how you want it.

Cropping and Resizing Images for Web | Photoshop CS5

Now you need to save your photo for web.

Click File and scroll down to 'Save for Web & Devices'

Cropping and Resizing Images for Web | Photoshop CS5

Now select the format you want it saved (in our case we've saved it as a jpg)

Select the quality of the picture (you can play around with this, in this instance, I have reduced the quality to 50 - but you can play around with this figure. Obviously you don't want your picture pixellated, so choose a setting that works). By reducing the quality slightly, you will also reduce the size of the picture. If you refer to the screenshot, our picture size is now only 50.23kb.

When you're happy press save.

Cropping and Resizing Images for Web | Photoshop CS5

*Note: Make sure you save your candles with keywords – for example ‘scented-candles.jpg’ – saving them as a name that people will search for, is more likely to get your pictures shown in the Google Image search. Google DOES NOT recognise space, so instead of using the space key, use – (hyphen) instead.

Your image is now ready to be uploaded to your website.