Unlike a lot of things in life, bigger is not always better—especially when it comes to the images on your website.
The quickest way to slow down your website’s load speed and tank your ranking in search is to upload full-size photos.
But you don’t need to sacrifice image quality at the expense of user experience. You can still have crisp, clean, professional-looking images that that load quickly.
Just note that, as a photographer I will always prioritize image quality over page speed (to a point). Why create beautiful, professional looking images only to have them look like trash when uploaded to your website? And why create a flashy, fast-loading website only to have images that look like trash? Sure, you may rank a little higher on Google, but it won’t do you many favors in the sales department.
Okay, now that we’ve gotten that out of the way, here’s how I optimize product photos for web and ecommerce sites. There are other ways to do this, but these are what I’ve found to give the best balance between page speed and image quality.
My 4 Step System for Optimizing Product Photos for the Web
1 | Export the Image as a Hi-Res JPG
Start with a full size, 300 dpi JPG file.
When it comes to website images, JPG is the gold standard because this file format significantly reduces the file size without noticeably affecting image quality. So, even at full size, the image starts out considerably smaller than other file types (like PNG, for example).
Now, while some people like to compress their images when exporting from their photo editing software, I’ve found that this makes images look soft and grainy right out of the gate. Then when you go to upload it to an ecommerce site, it gets compressed even further and ends up looking much, much worse.
So start with the full size photo.
2 | Compress the File Using an Image Compressor
There are many on the market to choose from, but my personal favorite image compressor is ShortPixel. I paid around $20 for 30,000 image credits about seven years ago and have been working from that even since. So it goes a long way!
To optimize product photos for web, make sure to select “Glossy” for the compression level. This will keep the quality intact while drastically reducing the file size (and thus, page load speed).
Then, where it says “Resize to maximum” specify your ideal image size. Some e-commerce platforms tell you how big your images should be. If yours does, go with that. If not, I recommend making the image twice as big as the display size on your website (eg. If the image display size is 500 px wide on your website, specify the width as 1,000 px wide on ShortPixel).
3 | Use Keywords in Your File Name
To help your image get found in search, make sure to use relevant keywords in your file name.
I like to include the product name, brand name, and keywords that describe the product, and separate all the words with dashes.
For example, the file name might look something like “beautybloom-radiant-glow-moisturizing-cream-hydrating-day-cream-skincare.jpg”
Whatever you do, make sure to maintain a consistent naming convention across all images on your site for better organization and SEO.
4 | Upload the image and add ALT text
Once you’ve uploaded the image to your ecomm platform, make sure to add ALT text so it can be found in search.
Each platform has it’s own way of doing this, but a quick Google search for [Your Platform Name] + “Image Alt Text” can walk you through it.
Just make sure the Alt text clearly describes the product, including its brand, name, and the key features shoppers are likely searching for.
For example, your Alt text might look like: “BeautyBloom Soothing Lavender Night Serum with natural ingredients 30ml dropper bottle”.
And that’s it! Save > compress > add keywords and Alt text. Easy, right?
Want help taking your ecommerce shop to the next level? Learn more about my product photography services.
