How-to Batch Crop and Resize for the Web

In a recent post I took on the consuming task of researching and publishing 110 of the best WordPress photography themes. To achieve this I took a screenshot of every relevant theme in action before performing a batch crop and resize. 

Something that sounds as simple as creating a long list of link images can eat up a hell of a lot of time if you did everything manually.

Unfortunately there was little I could do to speed up the initial screengrabbing process.

I visited each theme’s website and took a full size window screenshot with Snagit. You can achieve the same with the Mac OS X default capture application window function (Command-Shift-4 > Spacebar).

There is probably some kind of tool to parse a list of collected URLS and automatically screenshot the resulting page. If you know of one please let me know! For me in this instance it wouldn’t have worked because nearly every theme demo also includes a ‘Buy Now’ iframe. I needed to manually close this frame in order to achieve a full window screenshot. 

After I’d got all my screenshots life got a lot easier with thanks to Adobe Photoshop. Here’s how I automated a batch crop and resize for the web and how you can do it to:

1. Load up one of your images to Batch Crop and Resize in Adobe Photoshop then select the Actions Window.

2. From the window that pops up hit the ‘Create New Action’ button and give your process a name (Batch Crop and Resize) in the popup dialog box.

FROM HERE ON IN EVERYTHING YOU DO WITHIN THE PHOTOSHOP APPLICATION WINDOW IS BEING RECORDED!

3. Select the Crop Tool and mark the area you want to cut out of your image before hitting Crop from the Image menu.

Now you want to resize your image – in my instance I wanted to set a maximum width of 700 pixels to most effectively fit my images within the space of my blog whilst also keeping file sizes down.

4. Select ‘Image Size’ from the Image pull down menu.

You can see from the above image that through resizing my image I have managed to shave nearly 4mb from my file size. Not bad. But an 800kb file is still far too big for one screenshot when you considering I’ll have 109 others alongside on the page!

5. Whilst still recording my action – from the File menu I select ‘Save for Web & Devices’ so I can adjust the final quality of my exported JPEG and hammer down the file size of my image to a more respectable 90kb.

After the crop, resize and export of one image is complete it’s time to stop recording our process.

6. Hit the small Stop Recording button at the bottom of the Actions window.

Now we can put Photoshop on autopilot to batch crop and resize then export the rest of my screengrabs based on the sequence we just recorded.

7. From the File menu select Automate, then ‘Batch…’

After setting source and destination folders it’s pretty much ready to go.

Of note: it’s important to check the ‘Override Action “Save As” Commands’ check box as I have already set up an export from within my recorded action. 

Once the batch crop and resize is complete I’m left with a folder full of edited files all ready for the web. 

Easy hey?

If you don’t have a copy of Photoshop then there are some free tools that can also do the job effectively. I had some success with the free tool CropIt! but wasn’t keen on a programme only works with PNG files. That however may be fine for you.

How do you automate working with big image collections? Do you do anything differently? Let me know!

The post How-to Batch Crop and Resize for the Web appeared first on Laboratory Blog.