Advanced Image Restructuring & Uploading for an eCommerce Website

I spend a lot of time working on eCommerce migrations, database structuring with a plethora of eCommerce systems —, and one of the things that has always struck interested me, is the way they handle images. Most packaged solutions like Volusion, MagentoGo and Shopify make it relatively simple to upload a picture to a product or category – event to options in some cases. Being a manual process, this problem is greatly exacerbated if your store has thousands of products.

While you could make these changes one by one by one, most of us don’t have that kind of time or patience. “But Jose,” you say, “there is no other way! My platform doesn’t let me upload products or pictures in bulk.” Well, I’ll tell you right now that they (probably) do. And there most certainly is a better way. No respectable eCommerce platform would force you to do this manually if they expect you to keep using their platform, but the process isn’t always straightforward or easy to find or understand. We’ve often found that these companies are poor at providing guidance for advanced changes on their own platforms.

In this piece, you’ll discover an efficient and effective process that you can use to upload thousands of pictures to your eCommerce store. The main stages of this process are:

1. Understanding the logic of how your store handles photos in its backend
2. Nailing down the usability and functionality of the photos and how that connects back to the logic
3. Standardizing photo specs and creating a process
4. Partial or complete automation of the process
5. The final upload

1. Your eCommerce Platform and Its Photo Management Logic

Before you do anything, your first step is to research solutions. As the saying goes, “The wise learn from others’ mistakes first, then their own.” See if someone has already gone through this process and come up with a solution that you can use by doing a quick Google search. If you do, you can skip this entire step!

If you don’t find a solution on Google, you’re going to have to do some reverse engineering to understand how your eCommerce platform manages photos. Don’t get frustrated if you don’t figure it out within a few minutes, though; the fact that they allow you to upload photos is proof positive that there is some kind of logic at work.

The DIY Version:

1. Go to your current live website. Click on any product. Hover over the product picture, right click, and select “View Image” or “Copy Image URL.” Copy/paste this into your browser and go there.
2. This will allow you to see where your eCommerce platform is hosting its images. For example, Volusion (a hosted solution) keeps its images in file path that looks like this: domain.com/v/vspfiles/photos/
3. Now that you know where all the images are, the next step is to study how your system is attributing that image to a specific product. Typically, an eCommerce system will look for a product’s unique identifier and use it as a point of reference for any item (in this case photos) attributed to that product. This either tends to be the SKU or database ID that the platform assigns to each product.
   For example: Volusion uses its “productcode” field, which is the products’ SKU. Every time you upload a picture, your platform renames the picture to match the SKU the image is attributed to. This means that Volusion is using the SKU as part of its attribution logic.
4. Now you need to run through steps 1-3 for each image on your site and find a pattern. So while every platform is different, I recommend you pay attention to:
   • Main product pictures
   • Additional images on product pages (These are usually below or right next to the main product image.)
   • Images on category pages.
   • Options images (These are the images that act as options like swatches.)
5. Test the functionality by uploading different images to your products and making changes on the back-end (via FTP) and see how that affects product display on the front end.

This is a tedious and necessary step. However, you will save countless hours if, as a result, you are able to identify the process the platform is using for image display. Once you under their logic, you have the opportunity to automate the whole image uploading and sizing process.

2. Functionality, Usability, and Your Photos

So let’s start with the most obvious– your customer should see a main product photo and any additional product photos, which will be below or next to the main product photo. The additional photos should be interchangeable with the main photo, which usually happens when your customer hovers over or selects one of your additional images. How this works will depend on your design and layout, but for the sake of an example, let’s assume Volusion is your platform and that this is your layout:

And once you click on each picture, it just pop up as a bigger picture:

It seems simple enough, but you know it’s more complex than that because you’ve already studied the logic behind your platform’s photo management. (Right?) So what you actually have is 4 images for the main photo, each in a different size, and 5 additional photos that each come in 3 different sizes. Essentially, your customer only sees 6 pictures, but your photo directory actually has 19 unique images attributed to this one product and each have a unique size and name.

Volusion, like any other eCommerce solution, multiplies, names and sizes images automatically when you manually upload photos using their interface. Manually uploading is great when you have a handful of new products and images to add, but obviously not for doing this for a catalog that has over 40,000 unique products.

3. Standardization & Creation of Process

With a firm understanding of your platform’s image management logic and how your customers will interact with your photos, it’s time to develop an efficient process. The first step is laying out the sequential steps you’ll need to take every time you import photos as well as those steps that may require change or update in the future (variable).

So what are the constants? Most likely, they’ll be:

• Image file type: .png, .jpeg, .jpg, etc.
• Sizes of image blocks: what pixel space will the images occupy on the screen?
• Image size limitations: what is the maximum size an image can be? This should have been made clear during your assessment of your platform, but you can also do a quick Google search to verify.
• Image background: will you need to add background to your images to standardize them and fit your image blocks?
• Image types: segment your images into categories, i.e. Main Product Image, Swatch Images, Category Images, etc.

Once you have identified your constants, the next step is to develop the execution process and see how much of it you can automate.

4. Mapping & Automating the Image Uploading Process

At this point you have:

• Mastered your eCommerce system’s image filing logic.
• Assessed exactly what the user experience with the photos will be and how that connects to your platform’s logic.
• Standardized aspects of the process by creating constants and a roadmap for the process.

With the three points above, you are ready to start automating So let’s say you need to:

1. Duplicate…
2. Resize…
3. Rename…

…every single image you have (about 500,000) in bulk. How exactly do you go about automating this process? Well, think back to the standards you created. You know exactly how many times you will have to duplicate the images, to what sizes, and what their proper names will be (according to your system’s logic), and you know it’s going to work because you already tested it on a smaller scale in step 1.

This is when you will need your development team’s help (unless you are a programmer yourself). My recommendation for handling a large quantity of files is to work with a local system, not a cloud/web based one. If you are as lucky as I am to have some of the best .NET developers out there in your office, then you will find that all you need to do is provide them with the path and logic of what needs to happen and get out of their way. Optimum7 has actually created custom .NET desktop applications that allow us to automate the process of duplicating, renaming, and resizing millions of pictures with one click of a button.

5. The Final Upload

After long hours of sweat and tears, you are finally here! You have your images duplicated, resized and renamed and are ready to get them uploaded. And take a bit of well-meant advice from someone who’s been there:

• DO NOT EVER try to upload all of your photos at once. Your system WILL crash and you are going to want to throw your computer(s) out the window and dance on the pieces.
• Instead, divide your photos in smaller portions and start uploading them little by little. Depending on your system, you may be able to upload as many as 10,000 at a time without a problem.
• The only other interfering factor may be a crappy Internet connection, so make sure you have a really strong signal if not directly connected by Ethernet (yes, a tangible cable).

Now, buy yourself a drink or sixteen. You deserve it!

Are you stuck trying to migrate hundreds of thousands of pictures to a new eCommerce platform? Contact us today and we’ll guide you through this cumbersome task.