Adding content is one of the most challenging activities in an E-commerce web site. As a part of the content, images are playing a very important role. “A picture is worth a thousand words”. Yes, by using the best images to show your products, you can improve greatly the conversion. Add as many as you can, but keep in mind that it will affect your page loading speed.
I am going to show you bellow how can you make your life a bit easier in terms of image processing. Usually, your brand manufactures will provide you hi-resolution product images (landscape or portrait), which need to be modified / cut according to your web design requirements.
Premise: For my example I will assume the following:
- Images are delivered in 300 ppi (points per pixel) in CMYK colour mode, saved as TIFF file format;
- The size of the images is larger than what we need with an aspect ration close to 4:3 (most common SD size).
What result should we obtain
We need to use Adobe Photoshop to modify our images for a 800×600 pixel in 72 ppi resolution and save them in a JPG format.
We will use Actions and Automate Batch techniques to make this process repetitive and very fast to process. You can see the Actions Panel by accessing the Menu > Window > Actions or by pressing the ALT + F9 short-cut (PC or Mac). The Automate Batch option is found on Menu > File > Automate > Batch.
To start an automation process we need to determine first what are the necessary steps to be followed when processing a single picture. These process will be applied to all our images. And we can do that by analyzing our image requirements. We need to:
- resize / crop the image at 800x600x72 ppi resolution
- convert the picture from CMYK to RGB colour space
- save the image into a JPG format
For this example you can find the source picture here (it is 4288 x 2848 pixels x 300 ppi TIFF image, saved in CMYK colour space).
By analyzing your starting image you will notice that your aspect ration is different than what it is required: 4288 divided by 2848 (pixels) is 1.5 different than 4 divided by 3 which is 1.333. So the source image is a 3:2 aspect ratio, not a 4:3 aspect ratio, it means that your final image will be cropped and some details (the left and / or right of the image) will not be shown.
- Lets open our test image in Adobe Photoshop CS6, open the “images to be processed\source” folder, select our first image.
- Access the Actions Panel (see above ALT + F9), create a New Actions Set Folder (click the small icon on the bottom of the Actions Panel which looks like a folder icon) and rename it as Automation.
- Start recording your actions from now on, by creating a New Action (click the small icon on the bottom of the Actions Panel, which looks like a file icon) and rename it as Image Processing, after that press Record button.
- Convert your image from CMYK to RGB colour space by using Menu > Image > Mode > RGB Colour.
- Access Image Size information panel by going into Menu > Image > Image Size… (by pressing the keyboard shortcut ALT + CTRL + I on PC or by pressing ALT + COMMAND + I on Mac).
- Modify the Resolution number (in Document Size Group, middle) from 300 Pixels / Inch in 72 Pixels / Inch.
- Now the most important setting: in Pixel Dimensions Group (top), find the most closest to your value size and modify it with your required value. In our example, once I have modified the document size resolution in 72 pixels/inch, the width became 1029 pixels and height became 683 pixels. My required picture dimension is 800 x 600 pixels. So I will pick to modify the height which is closer to my 600 pixels value. And the image after resizing will be 903 x 600 pixels on 72 pixels / inch resolution.
- We need to crop the width from 903 pixels to 800 pixels, and we can do that by accessing the Canvas Size Panel (Menu > Image > Canvas Size… or by pressing the keyboard shortcut ALT + CTRL + C / ALT + COMMAND + C). The new Width is now 800 pixels and the only things left is to save the image into a JPG format in the “images to be processed/output” folder.
- Save the file by using Menu > File > Save as… (SHIFT + CTRL + S or SHIFT + COMMAND + S shortcut) into a JPG file (you can pick your own quality here, depends on your hosting most of the time).
- And finally, you can stop recording your actions. Now you have a set of actions ready to be applied to all your images to be processed. Of course, you can add your own tweaks to your image-processing actions, what I have done here is just a demonstration.
- . To apply the Automate process is relatively easy. Access the Batch Automate by opening the Menu > File > Automate > Batch dialogue, select the Source Folder (my source folder is “images to be processed\source”) and after, select the Destination Folder (my destination folder is “images to be processed\output”) press OK and watch the magic happen.
With Actions Automation in Adobe Photoshop you can process hundreds of photos in just one minute, the hardest part is to structure your files and organize the Actions so they can be applied to your images. Of course, there are even more tricks that can be applied to make this automation easier, but I believe that is the best way to demonstrate for you to understand how it is done.