Resizing pictures for the web

Photoshop Elements

Photoshop Elements (PSE) includes all you need to process photos for the web: Crop , Image Size and Save for Web, along with tools to adjust contrast, colour and brightness. The instructions here refer to version 5; later versions are unlikely to work differently.

Crop and resize: After loading your photo into PSE, you can both crop unwanted clutter and resize to your chosen dimensions in one operation:

  • Select the Crop tool: crop button or type C
  • Set width and height in the toolbar as numbers followed by "px"
  • Drag the edges of the selection rectangle to cover the area of the picture required
  • Double-click in the rectangle or click the green tick to crop the picture

You don't have to set dimensions at this stage - you can set Aspect Ratio in the toolbar to "No restriction" and adjust the crop rectangle freely (or do no cropping at all), and resize in the next step. When you do set the pixel size at the cropping stage, it is remembered for subsequent pictures.

Save for Web : Having selected what you want from your picture, it's time to make a new file for the web page:

  • Select File » Save for Web (Alt+Shift+Ctrl+S). You will see "before and after" versions of your picture.
  • Select JPEG Medium in the Presets box on the right of the dialog box
  • If you haven't set the dimensions yet, you can enter the required width or height in the New Size box and click Apply (the second dimension adjusts itself as long as Constrain Proportions is ticked).
  • Adjust Quality in the Presets box (slider appears when you click on it) for file size of 20-40 kilobytes (as shown below the right-hand picture).
  • Click OK to save the picture once you're happy with file size and quality. Don't overwrite your original!
  • Back in the main editor window, close the original. Do not save changes!