Resizing images in Photoshop, batch operations and save for web - TUTORIAL

Thursday, 22 October 2009


This tutorial addresses a function of image management seemingly easy but having several aspects to be clarified. Resizing an image is indeed a fast process, in Photoshop you can easily set up both in batch and in the automatic actions (a powerful tool to process or set of images to perform multiple tasks with a single click).

First of all, it can help you to resize images to send or post them on the web or even just for creating portable libraries (eg on USB flash drives or portable hard disks, tablet, etc) to show your photos or even if you own two computers and, for example, want to have a parallel archive of images on the laptop (usually having less space and at a smaller screen than the home PC’s).

We must understand this one thing first: even if we have a 30-inch monitor, the maximum resolution to display on it  is 2560x1600 pixels (new retina tablets have high density pixel, such as 440 PPI and can reach resolutions such as 2600 on 10”, so in near future a full resolution should be possible), the so called HD monitors have a resolution of 1920x1080, a dimension which is far less than the resolution of any cheap camera’s file. So if you do not have to retouch images, a resolution higher than monitor does not offer more detail to the eye (apart from DPI , pixels per cm ), but only more "weight" .

I often receive attachments of posters, pictures, graphics, photos, memories, that have not been resized and exceed the resolution capabilities of the monitor ... an absurd waste of space that makes email heavy and that has the effect of immediately trash them rather than save them. It is therefore necessary for anyone who handles images (not just to photographers) at least to know how to use this tool.

In Photoshop, the interface is easy and intuitive, go to IMAGE > IMAGE SIZE:

This following interface opens up , which allows us both scaling and the magnification of the image or document (two different engines!)

For the most common use , we are interested only in the upper part of the interface, where we can reduce (or enlarge ) the image following two parameters: pixels or percentage. In the case of a downsizing "by sight" , maybe because we are working with a patchwork of images to compose, etc.  you can intervene by changing the percentage (i.e. 50 % will reduce the picture to the half and also its pixels ), but mind that in this way we must have in mind at which magnification percentage we are viewing the image (see % at the top next to the name the file). In this example, viewing was only 25% , so what we see is not the image at its full size (but 1/4). You can use the buttons on the top once you select the “hand” tool, they switch the image from “actual pixels” to “fit screen” to “print size” (resolution of prints is higher than monitors, so image resulting is smaller).

It's almost always better to change the pixel, by keeping in mind what I said earlier about the resolution of the monitor (see that the resolution is set to 72, as a standard monitor, professional monitors reach the 96 PPI). By default, you can simply change one of the values ​​(height or width) because the other is constrained by proportion. So in a 900x600 pixels image if we change width (e.g. 800px) it automatically changes the height to 533px (same proportions). If you want to change the aspect ratio between the width and height you have to uncheck the second item of the three listed under "Constrain Proportions".

As guiding values​​, keep in mind this general scheme (note that the value we are interested in is only one, usually the width, which corresponds to a ratio of the resolution of the monitor, height is less important because even today most of the pages web are vertical scrolling. Moreover, since the size ratios of the camera’s sensors are not equal, the height value of  changes proportionally, i.e usually in the ratio of 3:2 for SLR cameras or 5:4  for compact cameras. In our diagram we use the SLR format):

* Websites Photo: 1200x800, 1050x700, 1024x683, 900x600, 800x533
* Sites of Flickr and other photo galleries type (as in facebook): 800x533, 600x400, 400x267
* Facebook, specifically, uses the resolution of 960px, this means 960x640 (if SLR format)

When sending attachments per email that are aimed at a quick view inside the message (such as posters, invitations, memory photos) it is sufficient (and should be) to use very small sizes, maximum 800 or 600.

Back to our interface, one last feature to note is that in the menu below. There, you can change the way Photoshop enlarges/shrinks, mean the engine used. It is not so trivial, because every resizing operation on the digital data is not as to compress or stretch an elastic but requires several interpolations with specific algorithms what changes at least if you want to zoom in or out.

For the moment, we need to know that in case of magnification (rare but it could happen that you want to print a giant poster) the most effective engine is the " bicubic smoother " (which creates softer graduations in the "blank spaces" created by magnification.

While in the case of image reduction, more so if you want to publish it on the web, it is appropriate to use the "Bicubic Sharper" mode, that does exactly the opposite, avoids overlapping of the details and enhances the image contrast. Some even consider this option for enlargements too.

Another very useful function of Photoshop is to resize ( and compress ) the images at the time of export. Typically, after performing the finishing retouches on a high-resolution picture, as well as to save it in our root directory we can export a more compressed and smaller copy for posting on the web (facebook, flickr , websites , etc.). Instead of following the previous procedure, and then save , you open the export interface for the web : FILE then "save for web & device"

From here we can do exactly the same things as before but with the help of several additional features, very useful ones. First of all, we have a preview of the result of any scaling value we use.

The values ​​to be noted are highlighted in red. ( 1 ) First, the compression of the jpeg files (you can of course choose other formats like .gif but use only .jpg for pure photos). In my experience (but it depends on the type of picture) you can safely set a compression of 50% without any noticeable difference in the final file, except that it is much lighter. For B&W for sure, for colour pictures is to be checked every time. 70% is a safest ratio and still very space-saving. As a type of compression procedure choose ‘progressive’ ( 2 ) it is finer .

The point ( 3 ) is very important , although ignored by many users: colour space or gamut. Since on the web (eg MS Explorer but other browsers too) the only readable colour space is the  sRGB , you should always convert images to sRGB (even those in grey scale or B&W), even if you are using Adobe RGB during shooting or you had worked in Photoshop with other spaces (Wide Gamut , ProPhoto, etc.) .

If you are not a photographer equipped with a SLR cameras or a graphic editor, ignore this step, all the pictures you produce are definitely already coded in sRGB .

Finally, the points (4 ) and ( 5 ) allow us to set up exactly the same parameters as seen above (pixel scaling algorithm). Also note in the bottom left the ability to zoom the picture and see the very small weight of the file after setting the export values ​​(in this example only 84,42 Kb, which is optimized for display on the web with no visible loss) .

When we have everything set up the way we want, we can click on the “Save” and choose a folder where to save . On contrary by clicking on the button to the right (“done”) Ps will not save the image but only the settings we choose, thus they become immediately available the next time you open this interface.

Finally we show the batch process (automated procedure) that allows us to perform the same operations on a multiple number of files. Available since the CS4 version of Photoshop is the command SCRIPTS then IMAGE PROCESSOR

It is an essential tool for anyone who wants to build a web gallery with several images. This is the interface:

As you can see, for exporting you can select ( 1 ) the images currently open in Photoshop or those contained in a specific folder (with/without subfolders). Then ( 2 ) the folder where to export (the same folder or a new choice), and (3 ) the type of file  we will always use JPEG for our purposes) and the parameters already seen as "compression / quality" ( 1-10 scale corresponding to 10-100% of the interface seen before. Actually you can use up to the highest value of 12, what means no compression at all ) and the size .

For the latter, however, we must be careful: we have to enter both the height and width parameters . The image will be resized according to its longest side (either height or width ) following to what is written. It does not mean that the image will have those parameters, it means that its largest size will be within one of the sizes, width or height (depending on which is the largest). So if you want images that have the same size, independently whether vertical or horizontal, then set the same value for both sizes (600x600, 800x800, etc.)

Finally (4 ), you can add copyright information in the metadata , and much more importantly,  the export process can be followed by another automatic operation (batch) already set up in Photoshop (such as renaming pictures, very useful when you want to create galleries for the web of the kind : 01.jpg , 02.jpg , etc.).

©2009 Marco Palladino

Contact Form


Email *

Message *