<img alt="" src="https://secure.leadforensics.com/150446.png " style="display:none;">

Photoshop CS6 ‘Save for Web’ Images Batch processing, keeping nested folder structure intact

Guruling Kumbhar Sep 19, 2014

responsive design services UI/UX responsive design Images Batch processing Technology

Images are an integral and important part during any website or application development. It has a direct impact on the visual appearance & on the performance of the application/website. Higher in size, images take time to load and it slows down the page loading process. Whereas, inappropriate and low resolution images may be pixelated and they may degrade the look-n-feel of the visual.

So to overcome it, we can use the Adobe Photoshop ‘Save for web’ utility which gives us the optimized resolution (72 dpi) images for web use.

But when you are required to run ‘Save for web’ & ‘Resizing’ for tons of images, processing each image one by one manually becomes tedious and is a frustratingly time taking task.

Photoshop supports recording the actions and the facility to run that action for batch processing. But it also has a couple of limitations up to Photoshop cs6 as mentioned below –

  1. Photoshop does not maintain the source, hereditary/nested folder structure for the output (destination) images. Save for web only saves all the files to the folder specified when you record the action.
  2. In case of some file handling issues, Photoshop action throws an error & pauses/stops working, wherein we need to skip these errors manually.

I I tried to Google it to find answers and also tried couple of JavaScript solutions such as the - SFW Batch Processor, SFWCS4-5, Picture Processor etc., but unfortunately all of them didn’t work for me. Either it gave up or stopped working or even threw errors for PhotoshopCS6 and CS2.

Thanks to Russell Brown for providing new CS6 Extension script to resolve the ‘save for web’ batch processing issue like maintaining the images nesting folder structure.

How to InstallDr. Brown’s Services’ for Batch processing the Images in Photoshop CS6:

1. Go to the windows > Extensions >Adobe Exchange

 

Adobe Exchange

2. If Adobe prompts for Login, you need to Login with your Adobe ID & password.
3. In Adobe Exchange window search for the ‘Dr. Brown Services’ in the search field.
4. You will find the ‘Dr. Brown Services’.

Dr. Brown Services

5. Click on the ‘Free’ button to install it.

installation- Dr. Brown Services

6. After installation restart the Photoshop Application.
7. Now, you will see the new link in the - file > automate > Image Processor Pro

automate Image Processor Pro

8. Click on the ‘Image Processor Pro’ link, you will see the Image Processor pro window, something like the fig. below

Image Processor pro window

9. Choose the images main folder path which is needed to be in the process.
10. Choose the location to save the processed images.
11. For processing the subfolder’s images and to maintain the folder structure in the output (destination), make sure to tick the check boxes saying ‘Include All Subfolders’ , ‘Save in Subfolder’ and ‘Keep Folder Structure’.
12. You can create multiple set of processed images for different types of images like– png, jpg, gif, psd etc.
13. Select the required file type, width, height, resolution and other settings.
14. If you don’t want to resize smaller size images , then make sure to tick the checkbox ‘Don’t Enlarge’
15. Optionally, you can also add the Copyright Info to the images in the Preferences.
16. After desired settings, click ‘Run’ button to process the images.
17. After the process completes, you will get the folders containing processed images while maintaining the inside folder structure.
18. While processing, ‘Image Processor Pro’ skips the images which are unable to process and prompt log after complete process.

Image Processor Pro

Cons:

While processing, it will pick all format images (like jpg, png, gif) from the source folder and convert/save it to the destination folder. Due to this we will get the extra additional files.

For example – If you select file type png to process, then it will convert and save other file types also such as the gif, jpg etc. into the png format and you will get the additional needless png files.

I will come up with one solution as below -

Solution:

  1. Keep the source folder backup and one extra copy to compare and merge with ‘Win Marge’.
  2. Check how much type of images you have in the source folder like - png, gif, jpg etc.
  3. While processing the images, define separate folder for each file type like pngSet, gifSet, jpgSet in the ‘Subfolder Name’. See below screenshot for the ref.

Subfolder Name4. After processing, compare each folder set with the source images folder by using Application like ‘Win Merge’ & overwrite source files with only those files which is present in the both side (in Win Merge which shows ‘file is different’ in comparisons result column).

Win Merge’ & overwrite source files

5. Finally you will get the source folder having the entire optimized image for the web maintaining the nested folder structure as it is.

Similar Blog

e-Zest is a leading digital innovation partner for enterprises and technology companies that utilizes emerging technologies for creating engaging customers experiences. Being a customer-focused and technology-driven company, it always helps clients in crafting holistic business value for their software development efforts. It offers software development and consulting services for cloud computing, enterprise mobility, big data and analytics, user experience and digital commerce.