So if you're like me, and you have been adding product images to your BigCommerce website for many years without really paying attention to file size, you're probably getting penalized by Google. If I had time, I'd save them for web using photoshop, but most of the time, I was just trying to get the product online as quick as possible so I could get back to whatever it was I was doing..
We've recently been migrating some of the sites I own from Blueprint to Stencil. I feel that Stencil is finally maturing to the point where it's time to make the move if you haven't.
Ok.. So on to what you're really looking for...
FAIR WARNING ----- MAKE A BACKUP OF YOUR ENTIRE THEME, AND ESP. THE PRODUCT IMAGES FOLDER WE'LL BE EDITING ----- You've been warned!
General Notes:
I did this on a MAC, and so that is how this tutorial is structured. You should be able to adapt it to any other OS w/ relative ease.
If you're looking to optimize less than 20 images, this is not the article for you. I recommend using photoshop save for web, or any of the recommendations on BigCommerce's own support article: Optimizing Your Images
If you need to optimize all your large digital assets at one time, keep reading...
This explains how to do optimize all images whilst keeping them all in their exact location and using their exact file name, so we can quickly overwrite the existing oversized images with the new images.
Step 1: Test Your site using tools.pingdom.com.
Identify that you actually have an issue w/ your images.
Step 2: Connect to your store using webDav
Download and MAKE A BACKUP of the folder product_images --- This is likely a very large folder. Mine was 330mb.
Now Make a Copy of that backup. This is what we'll use to make all of our edits to, and eventually re-upload.
Step 3: Find the files you want to optimize
Open Folder you'll be editing & let's get rid of the stuff we're not / don't want to optimize.
This should be the copy of product_images folder you saved if you're optimizing everything at once, but you can sub in any directory you want.
*Note: BigCommerce already runs an optimization on your product images if you're using a stencil theme. I'm not 100% sure what triggers this optimization. I imagine if you re-upload an image to a product via the admin panel, it'd trigger this automation to create the _std_, _thumb_, & _zoom_ images. I do know that if you run this script on all of the files, you'll inadvertently re-size many of these, and it may affect the way they render on your theme. Esp. true for the _thumb_ files.
Note - there are probably thousands of folders in this directory of product_images depending on the size of your store. It's important to not disturb that hierarchy if you want this to work.
Let's delete some sh*t!
The images that are already optimized by BC most likely don't need anymore optimization, so let's clear those out and any that are <250kb
I searched for and deleted all .jpg & .png's that were < 250KB *Use w/e threshold you want.. 250kb seemed reasonable to me.
Delete ALL files that include "_thumb_" in the name.
Delete files containing "_zoom_" that were < 250KB
I deleted all of these files in the search window. Otherwise you'd need to do this folder by folder..
Anything that is not a product image, and is sized specific to your theme should probably also be deleted
i.e.: carousel images. Typically these will be stored under the uploaded_images folder. All of these files SHOULD be optimized, but any that are size specific, I'd optimize size specific files via another method.
*There are other files in these folders, namely .pdfs in my case. Maybe others if you use file uploads for products. You probably don't want to optimize those files. I'd recommend deleting the configured_products folder if it contains any files. The script only targets file types you specify, but you could have .jpg & .png files in there you don't need/want to optimize.
*I'm using a mac and did this in finder. Make sure you're in the top level of the folder you're planning on running the optimization. In our case "product_images copy" I imagine the process would be the same on PC
Now... Let's start optimizing!
We will be using a open source software called ImageMagick that you'll run via the command line.
This part is rather technical in nature, and I may assume you know how to do some things, or that you'll go figure them out. I'm not a programmer, or command line expert, but was able to hack my way through w/ a few google searches when I got stuck.
If this is too intimidating / you don't want to waste an hour or two learning some command line stuff, I think you could send this article to a developer, and they could do this in a few minutes..
Credits
Post by Pamela Wheelock here on the BC forum which helped me figure out how to modify Dave's command to work on a full directory. *I did not test the command she suggests, but based on Dave's article & research, I feel it's the best option in terms of actual optimization.
Instructions
Install ImageMagick (tutorial at that link)
Navigate to the product_images directory via terminal (This looks helpful for a newbie to the terminal.. I had dome basic understanding already..)
Run this command for .jpg images
Run this command for .png images
Re-upload your newly optimized images.
The ImageMagick Commands:
WARNING: Make sure you're in the right directory or you will inadvertently optimize a lot of images on your computer that you don't want to. I couldn't tell you how to undo such a change!
For .jpgs
find . -name '*.jpg' -execdir mogrify -filter Triangle -define filter:support=2 -thumbnail 1280 -unsharp 0.25x0.25+8+0.065 -dither None -posterize 136 -quality 82 -define jpeg:fancy-upsampling=off -define png:compression-filter=5 -define png:compression-level=9 -define png:compression-strategy=1 -define png:exclude-chunk=all -interlace none -colorspace sRGB -strip {} \;
For .png's (Only change is '*.jpg' to '*.png')
find . -name '*.png' -execdir mogrify -filter Triangle -define filter:support=2 -thumbnail 1280 -unsharp 0.25x0.25+8+0.065 -dither None -posterize 136 -quality 82 -define jpeg:fancy-upsampling=off -define png:compression-filter=5 -define png:compression-level=9 -define png:compression-strategy=1 -define png:exclude-chunk=all -interlace none -colorspace sRGB -strip {} \;
Notes on this command:
It's set to modify all files in a directory & all of it's subfolders.
mogrify (not a typo) means it will edit the file and replace it using the same name
You can change the files it's looking for by modifying the '*.png' or '*.jpg' portion.
You can change the output of the file size by modifying the value after -thumbnail. It's currently set at 1280, as per BC's support portal, the optimal size for product images is 1280 x 1280 pixels.
-thumbnail does not mean you're creating a thumbnail, but is rather the best ImageMagick resizing function as determined by Dave's research in article reference above.
Overwrite the old large files with these new optimized files.
Go to Cyberduck or webDav client of choice
Upload and make sure you select to overwrite existing files.
Any newly optimized photos will now get replaced using the same file structure and name.
I anticipate this saved me about 35 hours in payroll time by not having to pay someone to manually update all of our product images, and wrote this up to share the wealth! That said - Use at your own risk!