How To Resize Images In Photoshop
Welcome to another Think Tank blog post. This simple tutorial is aimed at Photoshop beginners and novices. It explains how to resize images and optimise them for use on the web.
On some websites and blogs, it's not uncommon to see huge images that have been scaled to down in the browser. These images often look poor, not to mention they can be very slow to download. This can be very frustrating for the end user, so it's important to make sure images on your website are sized correctly.
Below is the image I will be using. It's an image of the Winter Gardens in Sheffield which was taken along with the rest of the Sheffield imagery used on the Evoluted website. The original image dimensions are 4288 × 2848 and the file size is 6.3MB. For the purpose of this tutorial, if you wish to use the same image you can download the original here.
Once you have your image open in Photoshop, simply click on the "Image" drop down from the top menu. Then select "Image Size" to open up the Image Size dialog box.
Now you have the dialog box open, you can simply adjust the image down to the size that you require. You can resize using percentages, or pixel dimensions. In this instance, I'm making the image 1000 pixels wide. Click "OK" to resize your image. Note: It is important to avoid scaling up images to a bigger size than the original, as this will result in a pixelated or blurry image.
Below you can see my resized example. I've highlighted the top ruler to show that the image in now 1000 pixels wide. I have also highlighted that the level of zoom is at 100% (you can choose your zoom level here, or by using the navigator panel).
Now that the image is at the size we want, we will save it for the web. Select "File" from the top menu, then click "Save for Web & Devices".
Now you will see the Save for Web & Devices dialog box. Here you are presented with a number of options. The most important 2 options are the image type (here I'm saving as a JPEG) and the "Quality" option.
Typically when saving jpeg's for the web I will use an image quality of somewhere between 50-80. In this example I have chosen 60. You can see the predicted file size of both the original (1.9M) and the optimised image (166.8K), which is a huge saving on file size. The only thing left to do is to save your optimised image. Click "Save" then choose a location to save your new file to. I would recommend either saving this file under a different name (perhaps calling it "WinterGardens-web.jpg"), or save it in a different location so you don't overwrite the original image.
Once your optimised version is saved, you can close the image file in Photoshop. You will then be prompted to save the file. If you wish to keep the image quality of the original, it is important not to overwrite it. Make sure that you click "Don't Save".
Now you will have both the original image and a version optimised for the web.