How to Use Photoshop: Batch Save Images for Web

Screenshot. The Open screen of Photoshop CC shows a collection of recently opened and resized photos.
Share on facebook
Share on twitter
Share on pinterest
Share on linkedin

One of the Adobe Suite’s greatest advantages is its tools for automation and customization. Use Photoshop’s Actions, Scripts, and Automate Batch to batch save images for the web. Photoshop’s ability to record user actions and save the process as a script which the user can run for multiple files at a time—such as a batch Save for Web. Automate repetitive tasks, such as saving a series of images with actions like image resizing, cropping, colorizing, or nearly any other task one can imagine.

Batch save can help you:

  • Downsize images for your WordPress theme’s feature images
  • Resize a series of speaker portraits for the latest event program
  • Re-save website graphics with web-friendly image resolutions
  • Rename images with a custom naming scheme applied to all
  • And much more

This Photoshop tutorial shows how to create a simple batch “Save for Web” action and how to run “Automate…Batch” to apply your Save for Web actions automatically to a series of photos.

1. Open Photoshop & Several Photos.

Open as many photos as desired, though fewer images are quicker to process.

Screenshot. The Open screen of Photoshop CC shows a collection of recently opened and resized photos.

2. Open the Actions Panel.

In the Menu bar, go to Window > Actions to open the Actions Photoshop already has several common actions saved in pre-made scripts under its default category “Default Actions,” like “Vignette (Selection),” and “Custom RGB to Grayscale.”

Screenshot. The first step of batch resizing images to save for web is opening the Actions panel.

3. Make a “Save for Web” Action Set.

Click the folder icon at the bottom of the panel to Create New Set. Name the new action set “Save for Web.” Future actions related to various web saves can be stored here. The new folder appears in the Actions panel beneath “Default Actions.” This is the start of the batch save.

Screenshot. Step two, click the folder icon in Actions to make a New Set of actions.

4. Make a Simple “Save for Web” Action.

Determine what goes into the batch save. In the same Actions panel, click the page icon to Create New Action. Another dialogue appears to give the action a name plus a few other settings. My action will be resizing all my photos to 850 pixels wide, the width of my blog content in WordPress, so I name the action to say that: “850w.” Once I click OK, Photoshop automatically begins recording and logging my steps. There’s no need to rush—there’s no timer.

Screenshot. Step three, click the page icon in Actions to make a New Action.

5. Record the steps for the “Save for Web: 850w” action.

This action is a simple image resize, so there’s only step to record in Photoshop. Go the Menu bar > Image > Image Size (Alt + Ctrl + I). Enter any changes in resolution first, then enter a width of 850 pixels. Click OK to execute the image resize. Return to the Actions panel and click the square icon to Stop Recording.

Screenshot. Step four, begin recording steps for the new action. Open Image Size, enter new dimensions, and hit OK to apply. Actions records and saves this step.
Screenshot. Step five, return to the Actions panel and hit the square icon to Stop Recording.

6. Open “Automate Batch” and customize Photoshop’s save options.

The first photo used to record the new action has already been resized, but the others still haven’t changed. All need saving. Automate Batch can apply the “Save for Web: 850w” action to resize each photo, (re)name each photo, and save each photo into a designated location.Go to the Menu bar > File > Automate > Batch. A new Batch window appears. Select the “Save for Web” action set and the “850w” action under Play. Change the source to “Opened Files” (or select a specific Folder or other option). To the right of the window, select a destination folder to which all the resized photos will be saved.

Screenshot. Step six, mass-apply the newly created Action. Go to File, Automate, Batch to open the Batch window.

File Naming allows users to create custom naming schemes. By default, Batch starts with the same Document Name and Extension and ends with the same Document Name and Extension. However clicking on them reveals more customization options, such as adding a serial number, date, or other information, and the capitalization rules for the new document names. This feature of the Batch save alone is very helpful. I like to use this to rename all the “DSC…” files from my camera to something more useful and meaningful to me, like a document name plus keyword plus date.

Screenshot. Step seven, set Batch options and hit OK to run.

Choose options that make sense for you and click OK to execute. Batch automatically applies the action, renames, and file saves.

That’s it! Photoshop’s action recording and batch automation can greatly speed up your workflow and apply consistency across files.