How to Manage and Batch Resize Product Images For Your Website

Introduction

This process is designed as a baseline to help organize and batch resize images using Google’s photo editing and organizing software Picasa. Picasa is free and is powerful for resizing images while being easy to use. My goal with this article is to help better organize the images, make them more accessible for more everyone and resize them so the web site images look good, load fast and use minimal bandwidth.

Make The Images Accessible

Having all the images in one central location, rather than multiple computers will help make them more accessible to everyone and easy to back up. This can be a shared drive on your computer or a network file location such as an “NFS” that everyone has access to.

In this example, you can see the pictures folder is in “C:\Web Images” which is shared. You can also see a sub directory for “full size” and “web size”. The full size folder is full of images from vendors or perhaps taken with a camera or cell phone. The other folder will be the resized images which we use on the web. This will allow us to fairly easily change the web size images in the future if we need to.

Web_Folder_SetupBacking up the folder can be done quickly by simply backing up the “C:\Web Images” which will backup your full size and web sized images.

Organizing the Images

This will depend on the images you are working with, how you get the images and any other unknown things that are specific to your setup. For our example here, we will use the departments to better organize the images and the style numbers for the image names.

The three folders are:
– CAP – 50 images
– HORIZ – 25 Images
– YOFI – 15 Images

Stye_NumbersDownloading and Installing Picasa

Now that our folders are setup, lets get Picasa from http://picasa.google.com/. Once downloaded and installed, I’m going to set it up to always monitor “C:\Web Images” This is done by going to File / Add Folder to Picasa… then setting all folders to scan never followed by setting our C:\Web Images” folder to Scan Always.

Picasa_Configure_Images_FolderSome other options you might want to set:
View / Thumbnail Caption / File Name
View / Folder View / Tree View – This is so we don’t get the full size and web size image folders mixed up.
Tools / Options / Name Tags – Uncheck Enable face detection and Uncheck Enable suggestions

Resizing Images.

To resize the images, click on the folder you want to resize. In this example, it’s HORIZ, then click the export button.

Once the pop up Window comes up, we have a few steps
– Set the folder to the web size folder. In this example it’s “C:\Web Images\Web Size”.
– Set the image size to what you want the web size images to be, most likely between 600 and 800.
– Add a watermark if you wish.
– Hit Export

Picasa_Image_Export_SetupExporting the images is incredibly quick. Just a few seconds for the 25 examples here. Now that they are resized you will notice the file structure and names are the same. You can also see how much smaller they are compared to their full size counterparts.

Here you can see some specific picture size changes.

Image_Size_ComparisonHere you can see it all the images were 137MB before resizing and 9MB after.

Picasa_Size_Comparison_2One of the great features in Picasa is that it remembers your settings. When doing the next folder, CAP which has 50 images, it remembers where I want the web size images, the “resize to” and the watermark.

Picasa_Export_RemembersFinal Thoughts

After typing this out it seems like there were a lot of steps to get here. That might be true, but everything is so well organized that it should make adding new images and finding older images easier.