Photoshop Tutorial: Optimizing images for the Web

Do you ever wish you knew how to resize images for your online photo album, website or blog to make them quick to load on the web?  Consistent, quality images give a publication a professional appearance. Perhaps you would like to email a photo to a friend without it arriving  so large that they must scroll to and fro, up and down to see the full image.  If so, then this tutorial is for you.

Original image size
Create a new file in the target size
  First select the photo that you would like to use. Images for use on the web need only be 72 ppi (pixels per inch) which is the typical screen resolution.  When images have a resolution higher than 72 ppi they appear enlarged on the screen. You can see in the image at left that my original photo is much larger than I want it to be for online viewing. In PS you can find this information  by selecting image>image size.  To create the desired image size I do not modify the original image.  Once the image has been downsized information is lost and cannot be restored.  Instead, I open a new file in the target size.  For my blog I typically make the images 250 x 250 pixels.  If you are setting the size using pixels as your unit of measure then it will appear exactly as you expect.  On the other hand, if you are sizing using inches you need to make sure the ppi is set to 72.  This way 1" x 1" will look like 1" x 1" on the screen.  If your ppi is set to 144 then a 1" x 1" image will look like it is 2" x 2" on your screen.

For this tutorial I have chosen a vertical image so I have set my image size at 250 pixels wide and 350 pixels high. 

With the new file established I drag the original image into the new file as a layer.    Of course the image extends well beyond the boundaries of the canvas so it must be resized.  To resize the image you can click on a transform control (these are the squares and each corner and midway along each side of the layer that are visible when the "move" tool is selected).  However, when the image significantly exceeds the canvas size you usually cannot see these.  Instead, choose edit>transform>scale.  At this point you will see fields containing percentages W:[100%] & H: [100%], with a chain link between, at the top of your window.  Click the chain link to maintain the current height-width ratio.  This allows you to resize the image without distortion.  Reduce the percentage (just type in a number) in one of the fields and the other will adjust automatically.  With the cursor in the H or W field you can use the up or down arrows to adjust the size 1% at a time. Once the transform controls are visible you can drag them to the desired size if you prefer.  Keep in mind that you do not have to fit the entire image onto the canvas.  Any portion outside the visible rectangle is cropped.  You can move the picture around to display the portion you want.  

When you have the image resized and positioned the way you want just click the "move" tool and you will see a window asking if you want to apply the transformation. To start over, click "Don't Apply".  To accept the changes choose "Apply".  Save the image as a tiff or psd file.  This is now your original (resized) image that you will use anytime you want to modify the image you will be posting to the web.  It has not been optimized.  

Next, you will select file>save for web and devices.  Select the 2up or 4up tab at the top. This will allow you to compare several levels of optimization compared to the original image.  The goal is a balance between speed and clarity.  There are several optimization choices to the right of the images. The image should be saved as a jpg (preferred for photos) unless you chose another file format based on your knowledge of PS and file formats. As you make changes your image quality and load times will adjust accordingly.  When you are satisfied with the balance between the two click the save button.  

Optimized image 250 x 350 px.
The final image, shown at right is 250 pixels wide by 350 pixels high.  A small strip of the original was cropped on three sides.  The level of optimization I selected in the "save for web and devices" screen was 50, which you can see was adequate for this image because of it's distant view.  I was not trying the capture the detail on an individual leaf.  Highly detailed close up images can be trickier to achieve a balance between clarity of detail and reasonable upload times.  The more detailed an image, the larger the file and the longer it will take to load.  You viewers want crisp, beautiful images but don't want to hum the Jeopardy theme song three times while waiting for it to load.  This problem is exacerbated when you have multiple images on a page such as thumbnails for a website.  In this case, I typically keep these small and use a larger image on the details page where fewer images are loading.

For further study: DIY Creating Website Graphics
Back to Top