As any store owner knows, photos are a crucial part of every product page. On their own, product photos can convince a shopper to take the next step in the buying process — offer beautifully shot, highly detailed photos of your products, and you’re that much closer to getting a click of that “add to cart” button.
Supplying your shoppers with all these photos can come at a price, however. With each large photo or media file you add to your product page, the load time increases. And your shoppers, no matter how interested they are, aren’t willing to wait around for more than a few seconds.
The challenge for store owners is this: finding a way to supply shoppers with the high-resolution photos they desire while keeping product pages loading quickly. It might sound like an insurmountable challenge, but there are actually quite a few ways to balance fast and fantastic, from image compression to WordPress plugins.
Your customers can indeed have their cake and eat it too. Let’s have a look at how you can speed up the load times of your product photos while preserving their quality.
Why the speed of your store matters (hint: it’s not just SEO)
There are a few reasons why having fast-loading product photos is just as important as having attractive ones. The one that most store owners think of first involves search engines.
Google began including site speed as a ranking factor for its search results in 2010. Since then, nearly every piece of search engine optimization advice for eCommerce sites includes the advice “speed up your store” or “reduce loading times.”
It is true that faster sites will perform better in search rankings, all other things considered equal. But SEO isn’t the only reason why speed is so important. Google only made speed a ranking factor in the first place because of the user experience.
Here’s what it really comes down to: shoppers don’t want to wait. They don’t want to wait for shipments, they don’t want to wait for answers, and they certainly don’t want to wait for your store to load. So if you offer a potential customer a slow, laggy product page… well, what does that say about the way the rest of their experience with you might go?
Nobody likes to wait around. Especially not your potential customers.
So while large image filesizes can cause slowly-loading pages that potentially hurt your SEO, these slow pages can also — more importantly — irritate your shoppers. And that’s why it’s so important to strike that balance between fast and beautiful.
With that in mind, let’s move on to the methods you can use to make your image files smaller while preserving their quality.
Try this first: save your images with web-specific compression
Shoppers want product photos that are large, highly detailed, and able to be zoomed in on (if you have a zoom function enabled on your store, that is). This might seem impossible if your mission is to reduce your file sizes.
Thankfully, it’s not. Various applicationss and websites offer web-ready compression for your photos, allowing you to condense your files while preserving their quality. Many of these applications have become so efficient that an untrained eye is incapable of spotting the difference between compressed and uncompressed images.
Even the highest resolution photos will still look great — and load quickly — when saved in a web-ready format.
Here’s how you can save your original product photos straight from your camera with web-ready compression.
If you have access to Adobe Photoshop, try the “save for web” option
If you use any version of Adobe Photoshop, the “save for web” option is exactly what you need to compress your product photos for your store. In Photoshop CC 2015 the option can be found under File > Export > Save for Web; in previous versions the option is located in File > Save for Web.
Compression via Photoshop is as simple as “Save for Web.” (Image credit: Adobe)
From the new menu that appears you can adjust the resulting image size, compression, and format. You’ll also be given an approximate loading time and file size — everything you need to know if you’re on the mark with your compressed photos.
No Photoshop? No problem: try one of these free online tools
Not everyone has access to Photoshop, but that shouldn’t hold you back. There are plenty of free online tools designed to compress your photos.
Two of the best are the Kraken Image Optimizer and TinyPNG. Both tools shrink your images to a surprisingly small size while still preserving quality.
Tiny image size, big image impact. (Image credit: Kraken.io)
Once the tools are finished with your uploaded images, you’ll be able to save them and add them to your store. Sure, it adds an extra step, but think of all the (loading) time it’ll save your shoppers.
Using WooCommerce? Edit the WordPress settings or try a plugin
You may or may not know that image compression is built right into WordPress. This compression shrinks your JPEGs to 90% of their original size, but that might not be enough for stores that opt for huge, highly detailed photos or large galleries.
One option you have to control this built-in compression is to edit WordPress’s functions.php file. This will allow you to increase — or decrease, if you prefer — the amount of automatic compression that occurs prior to your images hitting the Media Library.
Want an easier route? You can always try a plugin. TinyPNG has their own, which works for both JPEGs and PNGs. With a free account, you can shrink up to 100 images a month.
Opt for JPEG unless you need transparency
Another thing to keep in mind: file format. Sure, you can compress your images all you like, but some formats are naturally larger than others.
Generally speaking, JPEG should be your format of choice unless you need transparency for some reason. In the event of transparency being required, you should opt for a transparent PNG.
Other formats are larger or less convenient for online compression. And while you might be tempted to use a hilarious animated GIF on your product page… you should probably reconsider. The trade-off in loading time isn’t worth the brief chuckle your shoppers might have.
Enable a content delivery network for your store
Although modern Internet connections and improved hosting capabilities have sped up the time it takes for a shopper to load your store, there can still be unforeseen delays. And sometimes those delays are unavoidable if a shopper is across the globe from where your server is located.
Fortunately, there’s a way to speed things up for them (and not just for those bigger files like product photos, either). A content delivery network (CDN) makes use of caching to deliver stored content from local servers instead of on-demand content from a single location, speeding up the experience for all your shoppers.
With a CDN like CloudFlare or Amazon CloudFront, cached (that is, not current-to-the-second) copies of your store will be shown to visitors. Visitors will also receive content from the CDN server that’s closest to them. Both of these things speed up load time dramatically, especially for large photos and media files.
How your store works both with and without a CDN. (Image credit: Cloudflare)
Along with compression, utilizing a CDN is a fantastic way to serve product photos super quickly, especially if you don’t update your store on an extremely frequent basis. (And of course, if anything requires an urgent update, you can turn the CDN off.)
A few other ways you can balance fast and fantastic
The ideas offered above are the biggest, most meaningful things you can do to strike a balance between product photos that look good and load quickly. But here are a few more tips to keep in mind:
Opt for white backgrounds. Generally speaking, the fewer colors an image contains, the smaller the file size will be. This is even truer once compression comes into play and the palette is even further reduced.
Eliminate unnecessary product shots. Have photos of the shoes you’re selling from ten different angles? You can probably reduce to five and cut the loading time in half.
Load thumbnails first and only bring up the full size on click. This way shoppers will expect to wait for the bigger photos.
If photos aren’t working, try video… hosted offsite. Loading video from YouTube or Vimeo won’t slow down your store, and it’s a neat twist on the product photo concept.
Amazing product images don’t have to slow down your site (or your shoppers)
It might seem like the only way to have gorgeous product photos is to settle for a sluggish store… or that the only way to get quick-loading product pages is to settle for tiny, highly compressed photos. But we beg to differ.
With just a few optimizations to your product photos, you can find the perfect balance between fast-loading and fantastic-looking. And neither your site — nor your shoppers — will have to slow down.
Have any questions about how to get amazing product photos on your WooCommerce store without making things sluggish? Or better yet, any tips of your own you’d like to share? We’d love to hear from you in the comments!