Your Customers are Mobile, you will be too …

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.

16 Responses to Photoshop CS6 batch processing multiple images ready for web

  • Wonderful site. Lots of helpful information here. I am sending it to several friends ans also sharing in delicious. And naturally, thanks to your sweat!

  • Most excellent Tutorials, Really useful for batch optimization of imagery

  • Totally fantastic! simple, clear, easy. thank you very much!

  • Is there a way I can convert a PSD to an action.
    using PS6 win7


    • Not sure exactly what you are trying to do. I’m sure if you could explain what it is you want to do in more detail I could show you how it is done.

  • Great tutorial. Thanks so much

  • Thanks, very useful. All worked well until I tried to change the destination folder – it still put the processed images in the destination folder set up in the action rather than the one I set in the Batch operation.

    • When setting up your actions and you get to the save bit just hit save and change the settings you need changed. Never ever change the folder while you are recording. If you do this changing the folder will become part of the action. So when you run the action this will override where you tell it to save.

  • Yep I know that, so I never changed the folder or even touched it when setting up the action. The list of things done in the action includes all of the settings that were already there when the save window came up, including the folder used previously. So the folder has become part of the action without changing it!

    • Are you playing the action on each file or as a batch. As a batch process it should be overriding that. If you are playing the action on a time it might not do this.

      You didn’t open the file after you started recording your action? This might also change it.

  • where do you find Chose File >> Automate >> Batch
    I can not find that anywhere I find open file browse but not that option

  • This is a great time saving tool! However I’m having the same trouble as Jeannie. The batch file doesn’t seem to be recognising the destination folder. In this case I have chosen the same folder as the source folder in the hope it will overwrite the images in that source folder. It saves the files into the Action destination folder. Thoughts?

    • Not sure as I’ve never experienced the problem myself. However overwriting the original is considered bad practice so it might be possible PS is overriding your setting to ensure you don’t lose the original. Not 100% on that though

  • Thanks very much for posting this tutorial! Just exactly what I needed. I did have just a few seconds confusion where in step 7 you say “hit OK” where it should say “hit Save…”. I am using CS6. But everything worked exactly right the first time. Processed about 110 photos in just a couple of minutes. :) :) :)

  • Same problem. Batch doesnt recognize the destination folder.

Leave a Reply

Please buy me a Coffee

Help a starving student to drink more coffee

Follow us on: