Optimizing an image for the web is very easy. There are only 3 steps you'll need to remember: 1) Cropping; 2) Resizing; and 3) Sharpening.
As a web editor, you'll often be asked to "spruce up a web page". That usually means you're going to be handed images from a digital camera, a scanner, or worse, a Microsoft Word or Powerpoint file. The file size and the dimensions are usually too large for the web. When we're publishing web content for screens with varying widths (320 pixels for hand-held devices to more than 1920 pixels for laptop and desktop computers), it is good to keep in mind that most web visitors will not appreciate when you insert an original 1600 x 1200 digital camera shot in a web page. Apart from the fact that it will break the layout of our web templates, when web visitors are downloading large images it will also cause an unnecessary burden on the web server. That is, if the web visitors are patient enough to wait for the bloated page to be displayed. For this tutorial, I'm using screenshots of Photoshop Elements version 5 for the PC, but other photo editing software may work just as well.
You want to crop an image to show only the area of the image that has interesting content. Select the Crop tool 
in Photoshop from the panel on the left. Draw a rectangle somewhere in the image. You don't have to be very precise with this tool, as you can still change the selection later by dragging the handles. Double-click within the selected area and the image will now have new dimensions.
After you've cropped the image, the file size is usually still too large (64 Kb is the default upload limit in Contribute). Under the "Image" tab at the top menu, select "Resize" and then "Image Size" (this may vary in different versions of the software). Resizing an image by dragging the corners in a WYSIWYG or graphical editor interface is not the same thing! The image will look smaller on your screen but the file size hasn't been changed (see also: WYSIWYG editors - What You See Is What You Get?).
Select a width that works best within the allotted space of the web template. The LRI web templates have a set width for the content area of 550 pixels, so it is recommended to start with a width of 300 px or less if you want to be able to display some of the text next to the image.
Resizing an image often causes the image to look fuzzy. To make it look crisp like the larger original again, use the Sharpening Filter called "Unsharp Mask". Under the "Enhance" tab at the top menu, select "Unsharp Mask" (again, this may vary in different versions of the software).
Just make sure to keep it within reason, so use something between 50-120%. Please be considerate of portrait photography and keep the sharpening at 75% or less.
Finally, use the "Save for Web" option under the "File" menu to save the optimized image somewhere on your computer where you can insert it in your web page with Contribute and upload it to the staging web server.
Back to the main Tutorials page.