Photoshop CS6 batch processing multiple images ready for web

Photoshop CS6 batch processing multiple images ready for the web

In this tutorial we will be showing you how to use batch processing to re-size an entire folder full of images you want to prepare for deployment on your web page. Rather than editing each photo individually, with one simple action we will change them all to 72ppi and re-size them all to suit your website. We all know we don’t want great big picture consuming a few meg of bandwidth each being re-sized by the browser. This is very bandwidth heavy so normally we would use Photoshop or Fireworks to re-size them etc. but when you are processing dozens or even hundreds at a time this can be quite tedious. This is where batch processing comes in. For this exercise I will be using Photoshop CS6 but most versions have this capability and are all pretty simple if not exactly the same.

This process has been testing and works also on Adobe Photoshop CS4, CS5, CS5.5 as well as CS6. The process remains unchanged across all these versions of Photoshop.

Creating Actions.

We will be starting off by creating actions. These are simple automations of commonly used processes. Rather than going through the process each time we wish to perform a set of actions we are going to set up Photoshop CS6 to automate the process for us.

To help with our batch processing we are going to create an action to help us get our images ready for the web. Thia action we are going to set up will make our JPEG’s 72ppi and set our image quality to 80 as well set the maximum size of our image. You can adjust these setting to suit yourself as the process is exactly the same just change the figures to suit yourself.

Open up an image you would like to change to 72ppi and change its image quality. We need to open up a file, any file BEFORE we start anything. We don’t want our recorded macro opening up the file your working on every time you run it. So it is vital you open a file prior to starting to record your macro.

OK now that we have a file ready to go we can begin the process of recording our action.

1. Begin by opening up your actions palette. This can be accessed through window >> Actions of by pressing alt-F9.
2. When you create an action it will always appear inside a folder in the Actions palette. But since we don’t want it going into one of the pre-existing folder we need to create one now. Click on the folder icon at the bottom of the actions palette.  A window will appear entitled “New set”. Lets give our new folder the name “Web ready”.
3. Next to the folder button on our actions palette is a button called create new action. Click on it and another window will appear entitled “New action”. Lets give it a name in the first import field. I named mine “Change resolution and Quality”. Make sure that the second field still has “web ready” in the drop down bar so that it is created in the correct folder. If you wish to assign a keyboard shortcut to this action assign it now. And when you are ready hit “record”.
4. If you haven’t already got a image open to work with hit the stop button on the bottom of your actions palette and hit start again when you are ready.
5. Now that we are recording, go to Image >> Image R-esize. When the dialog box come up change the resolution to 72ppi and hit OK.
6. Go to File >> Automate >> Fit Image. When the Dialog box comes up put in the maximum size you want for use on your site in both directions. For example if you don’t want your images to be more than 250px wide for use on your site and you don’t want them taller than 500px then you would put these 2 figures in the dialog box. Click don’t enlarge then OK.
7. Go to File >> Save for Web and Devices. Change image type to JPEG and image quality to 80 then hit OK. DO NOT Change the images name!! If you do when you run the batch file later all your images will be renamed the same thing. Make sure that you save the images in a folder which you will using in future for all your finished images and do not save them in the same folder as the one they are in now.
8. Once that is done close the image. A dialog box will appear asking if your wish to save the image you just worked on. Click no. Otherwise when we do our batch process you will be modifying the originals. Definitely something we don’t want.
9. On your actions panel hit Stop.
10. We now have an action recorded.

OK so now we move on to batch processing entire folders worth of images with action we just set up.

Batch Processing Multiple Images ready for the Web.

So now we are ready to batch process our images.

1. Chose File >> Automate >> Batch
2. Select the action you just recorded at the top of the dialog box that appears.
3. Select your source folder where all the images you wish to process are currently held.
4. If you wish your images to always go to the folder or folders in which you created in your action do not select a destinations folder. This is vital if you expanded on the actions to include multiple types of images in multiple folders. If you are saving everything to one one folder by all means select a destinations folder.
5. Once you have all your setting as you want them hit OK.
6. Photoshop will go through the entire folder (and sub-folders if you selected that option.) and optimise all the images in there ready for deployment to the web.

Hope you all find this tutorial helpful and see you again next time.