Prepare an image for your website

1. Duplicate your image file (this preserves the layers and color space of the image file). Select Image>Duplicate Image. In the Duplicate Image dialog, provide a useful name and check the “Duplicate Merged Layers Only” option.

2. If necessary convert the image to sRGB using Edit>Convert to Profile.

3. Select the Crop tool from the Toolbox. Set the Crop tool options to the specific width and height specified to place the image on the web page. It is important to enter “px” along with each pixel value, or the crop options will be set to your default units (inches or cm). Set the resolution to 72 pixels per inch.

4. Use the Crop tool to draw a crop marquee over the image, the Crop tool options values that you set will restrict the crop marquee to one proportion. When you have the marquee position properly, press Enter to accept the crop and Photoshop will resize the image to the target size. Photoshop will use the default resize algorithm; “Bicubic Sharper” if you have set it.

5. Sharpen the image using the Smart Sharpen filter.

6. Save the Image to the Web using the Save for Web dialog. Many images for Web pages are saved using the Progressive option. When progressive images are placed on a web page,
these images appear very quickly at a low resolution and become sharper as they download. This is a good option since it allows the web page to display quickly, even if there are many image files on it. I typically use this option.

7.And that’s it. Good luck!