How to get fast-loading, fantastic-looking product images

Written by Nicole Kohler on February 24, 2016 Blog, Build your business, Managing products.

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.
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.
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)
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:
Tiny image size, big image impact. (Image credit:

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)
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!


8 Responses

  1. Jennifer G.
    February 24, 2016 at 7:12 pm #

    Thank you for the insights. Do you have a recommendation for the optimal size of an image? I’ve seen everything from 150 x 150 pixels to 800 to 1000 pixels.

    • Danny
      February 24, 2016 at 8:08 pm #

      I think that all depends on your layout. For thumbnails I like 150×150, and for product images it seems like 600×600 is a good step. Personally, I use 1000×1000, because I use compression and CDN… So it’s just preference after a point. 🙂

    • Nicole Kohler
      February 25, 2016 at 12:58 am #

      Danny’s insights on this are great, and another thing to add for your consideration Jennifer: you might want to go with bigger product photos if the items in question have a lot of detail.

      If you sell something like plain, single-color T-shirts, anything bigger than 800×1000 would probably be a waste (especially on close-up shots of the stitching, tag, collar, etc). But if you sell, say, handcrafted jewelry, clothing with lace or special stitching, patternered fabric… then having physically larger images (say, 2000×2000 or even bigger!) will allow customers to zoom in and see all that detail nice and big.

      Of course, this requires you to shoot professional photos to begin with. 🙂 But I definitely think it depends on what you’re selling and how much detail you feel you need to show.

  2. Bob Dunn
    February 25, 2016 at 4:05 pm #

    Hey Nicole, thanks for putting this together. I know from experience this is one of the biggest questions and concerns with new shop owners. Can’t tell you how many time I have found 3000×3000 images and bigger uploaded, but not optimized. It’s truly a pain point for many.

    So now I have a great article to send them to 🙂 Cheers!

    • Nicole Kohler
      February 25, 2016 at 8:50 pm #

      Thank you Bob, really appreciate that!

  3. طراحی سایت
    February 26, 2016 at 11:32 pm #

    Thank you for this article. Photos are very important part of products

  4. Alex Smith
    March 8, 2016 at 10:51 am #

    So nothing about e.g. w3 total cache?

    What’s your position on caching plugins and caching in general?

    • Nicole Kohler
      March 9, 2016 at 4:58 pm #

      Hey Alex, I chose to leave caching out of this post for a few reasons. Summed up: the other solutions are a little easier to explain for newer/less technical-minded store owners, caching on its own could provide a solution without/in combination with only one of these items, and length. 🙂 For transparency, W3 Total Cache was in my original draft but it didn’t make the cut.

      This is definitely something we can include in its own post or in a more thorough post on the topic of caching/tools that reduce server strain. But IMO the options above will USUALLY do the trick in combination with one another for most stores without getting W3 involved.


The most customizable eCommerce platform for building your online business.

  • 30-day money-back guarantee
  • Support teams across the world
  • Safe and secure online payment
%d bloggers like this: