there’s no doubt about it: images can make or break your ecommerce business. yep. regardless of which ecommerce platform you use. we humans are visual creatures. and ultimately your sales depend heavily on nailing your ecommerce images.
that’s why you gotta get em juuuust right. today we’re strictly spilling the deets on all things WooCommerce image sizing. but don’t worry. we also put together a little guide for your Shopify images - if that’s more your jam.
grab your thinking cap as we dive into all the specifics. put a little more woo! into your WooCommerce images with this helpful guide to understanding and executing perfect WooCommerce image sizing.
benefits of appropriately sizing your WooCommerce product images
so what’s the big deal, anyway? we’ve all thought it - it’s just time that somebody said it out loud. but here’s the thing: there are multiple benefits to making sure your WooCommerce product images are appropriately sized.
photos display clearly on mobile and desktop devices
appropriately sizing your WooCommerce images helps optimize your site for both desktop and mobile users. customers have come to expect a flawless website design that can flawlessly transition from desktop to mobile in a heartbeat. images too big for mobile dominate the tiny screens and make navigation impossibly annoying.
but tiny images on desktop might be even worse - for your bottom line. that’s because your audience will have a hard time seeing all of your thoughtfully designed details. you put in the work to develop and bring your visions to life. don’t sell your products short with dinky images. standing out from the sea of competition is pretty difficult when those pretty little details get missed in your too-tiny photos.
{{resizer-ad="/external-components"}}
optimize for page loading time
appropriately sizing your WooCommerce product images can help balance image quality and page load speed. slow-mo is a vibe. but not for your site. leave it to those groovy TikTok videos.
look: we love a high-quality image. but a high-quality image that bogs down the page load speed is one of the easiest ways to increase your bounce rate and send your customers into the arms of your competitors.
modern technology has ruined us for good with its lightning-speed data and instant gratification. Google recommends keeping your page load speed quicker than 2.5 seconds. getting your product images sized right is one of the easiest ways to make sure you hit that target.
streamlines the sizing process
establishing sizing standards for your WooCommerce product images also helps streamline the sizing process. there will be no more guessing or him-hawing about exactly how big (or compressed) a product image needs to be.
now all that’s left to do is figure out which photo editing app you’ll use to get your images squared away and consistently sized for your ecommerce site.
feel smarter already?
you'll find more of what you loved in this article in your inbox
types of WooCommerce images and their appropriate sizes
understanding why it’s important to appropriately size your WooCommerce product images is only the first step to making sure your ecommerce business thrives. you still need to understand the specifics of how to optimize your images.
appropriately sizing your images can help drive your ecommerce business to success. ready to get started? let’s dive into the world of WooCommerce image types and the recommended sizes for each type.
WooCommerce product images
WooCommerce product images are usually the first images that your customers see. they’re the main (larger) image. they’re the star of your ecommerce show.
best sizes for WooCommerce product images
most experts recommend that you stick to at least 800px in width for your main product images. note that WooCommerce doesn’t have a height setting to adjust. it will float proportionally according to the width of the image you uploaded. which is another great reason you should identically size all of the product images you upload.
changing your product image size to the exact width of your original image will disable your zoom feature (because your image box is identical to the width of your original image).
how to change WooCommerce product image sizes
remember WooThumbs? it’s time to put it to good use. go to WooCommerce > WooThumbs > display. then pop down to the image sizes section. input your preferred size into the single image width field. then save. and boom! your main product image sizes will all be updated to reflect your changes.
psst - you can also adjust your single image crop ratio here.
WooCommerce thumbnail images
thumbnail product images show up in a few places on your site: thumbnail gallery images. related products. upsells. and cross-sells.
best sizes for WooCommerce thumbnails
these lil guys are typically sized around 300 px in width to make sure that they’re visible. but not so visible that they dominate the visual space on your page.
you also have a few different cropping styles: square. custom. and uncropped. uncropped will make sure you don’t chop off any important details but you’ll want to make sure all your original images are identically sized.
how to change the WooCommerce thumbnail image size
let’s put WooThumbs to good use. like before: head to WooCommerce > WooThumbs > display. scroll down to the image sizes section and tweak the settings till you hit your desired sizing. any sizing changes you make in this menu will only apply to your thumbnail images.
✨ pro tip: you can also adjust your thumbnail image crop ratio here while you’re at it. find your magic number and adjust accordingly to fit your style.
WooCommerce product gallery images
last but not least: the product gallery images. it’s vital that your customers can peruse a range of product images and videos to really fall in love with your products.
best sizes for WooCommerce gallery images
there are a few opinions on the best size for your gallery product images. some suggest that 100 px by 100 px is enough to lead your customers to scroll through your gallery.
others suggest that 300 px by 300 px is a better size to help entice your audience to spend more time admiring your stunning product images. this is also our preference because it provides more clear details without overwhelming your product pages.
how to change the WooCommerce gallery image size
head to appearance > customize > WooCommerce > Product images. you should be able to tweak your gallery image sizes from there. this may or may not work depending on the theme you’re using. chat with your developer if you’re not able to change the sizes within the appearance menu.
you can also use WooThumbs here. head to WooCommerce > WooThumbs > display. scroll down to the image sizes section and tweak the settings till you hit your desired sizing. any sizing changes you make in this menu will only apply to your gallery images.
WooCommerce product image plugins you’ll love
WooCommerce’s proliferation has lead to the development of a wide array of easy-to-use plugins for your website. we’re highlighting two of our fave - but a quick search will show you that you can find a virtually infinite amount of WooCommerce plugins to fit your needs.
WooThumbs
consider the WooThumbs plugin like a magic wand for your WooCommerce product images. it’s easy to use and won’t bog down your website. this plugin gives you incredible versatility in your galleries and product images.
take advantage of easy-to-use features that your customers will love: sliding thumbnails. multiple zoom options. variable gallery layout. and slide/fade animations for a little engagement booster.
WooSwipe
WooSwipe is an open-source plug-in that makes your product galleries mobile-friendly and responsive. it even gives you a “pin it” social share option.
the best part? WooSwipe comes in at a whopping free ninety-nine. note: make sure your theme doesn’t regulate your image sizes. WooSwipe cannot override settings declared by your theme.
FAQs about image sizing with WooCommerce
but you might still run into some speedbumps even if you understand the specifics. here are some of the most commonly asked questions about WooCommerce product images and a few tips to help you troubleshoot.
what do I do if my images are blurry?
to keep things simple: we’ll assume you’ve followed the recommended sizing guidelines above. there are a few reasons your images might be blurry after you upload them.
first - you might need to update to the latest version of WooCommerce. version 3.3 fixed many of the root causes that might be making your image blurry (i.e., theme incompatibility).
second - check the resolution on the original image file that you uploaded. it’s a good rule of thumb to make sure your original image is less than 100 MB in size. but they should be at least 800px by 800px for most themes.
still not getting that crisp and clean image you need? make sure your original image dimensions match or exceed your product image size settings in your theme.
what do I do if the product images are different sizes?
are your product images showing as different sizes despite your best efforts? there are a few things you should check to resolve this.
start with the same sized image before you upload. uploading a wonky variety of image sizes is an easy way to get a mish-mash of results. you can make your life easier with a template (with your photo editor of choice) so that you know you’re always uploading the same size image.
you should also double-check to make sure you adjusted and saved your product image settings to include thumbnail sizing and cropping.
how do I hard crop WooCommerce thumbnails?
there are a few different ways to hard crop your thumbnail product images: through your theme (via a plugin). through your site appearance settings. and through a manual override.
option 1: you can use the simple image sizes plugin to establish custom product image sizes for your site.
option 2: head to appearance > customize. then go to WooCommerce > product images. you can select your preferred thumbnail size cropping settings from there.
option 3: you might need to dig into the code a little bit. you can find more specifics on how to set the hard crop dimensions through code here.
need high-quality product images or videos for your WooCommerce site?
understanding the best WooCommerce product image sizes for each setting can be complicated. thumbnails. main images. zoom images. they all require different sizing to make sure that you dazzle your customers with crisp and quick-loading images. remember: quality is king when it comes to ecommerce images. now’s the time to close the sale by optimizing your WooCommerce image sizes.
don’t feel like fussing with the details? leave it to the pros. contact soona today and we’ll help you perfect your WooCommerce product image sizes with a customized photoshoot.
if you’re looking to ramp up your content game but still feel unsure where to start - check out these resources:
- we're betting on these 6 trends in Q3.
- trend sets are here to help add dimension to your shoot
- so you’re working from wherever: here’s what to expect from a soona virtual shoot
- what it means to reach your content dream state
- want free photos? find your personal referral code
there’s no doubt about it: images can make or break your ecommerce business. yep. regardless of which ecommerce platform you use. we humans are visual creatures. and ultimately your sales depend heavily on nailing your ecommerce images.
that’s why you gotta get em juuuust right. today we’re strictly spilling the deets on all things WooCommerce image sizing. but don’t worry. we also put together a little guide for your Shopify images - if that’s more your jam.
grab your thinking cap as we dive into all the specifics. put a little more woo! into your WooCommerce images with this helpful guide to understanding and executing perfect WooCommerce image sizing.
benefits of appropriately sizing your WooCommerce product images
so what’s the big deal, anyway? we’ve all thought it - it’s just time that somebody said it out loud. but here’s the thing: there are multiple benefits to making sure your WooCommerce product images are appropriately sized.
photos display clearly on mobile and desktop devices
appropriately sizing your WooCommerce images helps optimize your site for both desktop and mobile users. customers have come to expect a flawless website design that can flawlessly transition from desktop to mobile in a heartbeat. images too big for mobile dominate the tiny screens and make navigation impossibly annoying.
but tiny images on desktop might be even worse - for your bottom line. that’s because your audience will have a hard time seeing all of your thoughtfully designed details. you put in the work to develop and bring your visions to life. don’t sell your products short with dinky images. standing out from the sea of competition is pretty difficult when those pretty little details get missed in your too-tiny photos.
{{resizer-ad="/external-components"}}
optimize for page loading time
appropriately sizing your WooCommerce product images can help balance image quality and page load speed. slow-mo is a vibe. but not for your site. leave it to those groovy TikTok videos.
look: we love a high-quality image. but a high-quality image that bogs down the page load speed is one of the easiest ways to increase your bounce rate and send your customers into the arms of your competitors.
modern technology has ruined us for good with its lightning-speed data and instant gratification. Google recommends keeping your page load speed quicker than 2.5 seconds. getting your product images sized right is one of the easiest ways to make sure you hit that target.
streamlines the sizing process
establishing sizing standards for your WooCommerce product images also helps streamline the sizing process. there will be no more guessing or him-hawing about exactly how big (or compressed) a product image needs to be.
now all that’s left to do is figure out which photo editing app you’ll use to get your images squared away and consistently sized for your ecommerce site.
feel smarter already?
you'll find more of what you loved in this article in your inbox
types of WooCommerce images and their appropriate sizes
understanding why it’s important to appropriately size your WooCommerce product images is only the first step to making sure your ecommerce business thrives. you still need to understand the specifics of how to optimize your images.
appropriately sizing your images can help drive your ecommerce business to success. ready to get started? let’s dive into the world of WooCommerce image types and the recommended sizes for each type.
WooCommerce product images
WooCommerce product images are usually the first images that your customers see. they’re the main (larger) image. they’re the star of your ecommerce show.
best sizes for WooCommerce product images
most experts recommend that you stick to at least 800px in width for your main product images. note that WooCommerce doesn’t have a height setting to adjust. it will float proportionally according to the width of the image you uploaded. which is another great reason you should identically size all of the product images you upload.
changing your product image size to the exact width of your original image will disable your zoom feature (because your image box is identical to the width of your original image).
how to change WooCommerce product image sizes
remember WooThumbs? it’s time to put it to good use. go to WooCommerce > WooThumbs > display. then pop down to the image sizes section. input your preferred size into the single image width field. then save. and boom! your main product image sizes will all be updated to reflect your changes.
psst - you can also adjust your single image crop ratio here.
WooCommerce thumbnail images
thumbnail product images show up in a few places on your site: thumbnail gallery images. related products. upsells. and cross-sells.
best sizes for WooCommerce thumbnails
these lil guys are typically sized around 300 px in width to make sure that they’re visible. but not so visible that they dominate the visual space on your page.
you also have a few different cropping styles: square. custom. and uncropped. uncropped will make sure you don’t chop off any important details but you’ll want to make sure all your original images are identically sized.
how to change the WooCommerce thumbnail image size
let’s put WooThumbs to good use. like before: head to WooCommerce > WooThumbs > display. scroll down to the image sizes section and tweak the settings till you hit your desired sizing. any sizing changes you make in this menu will only apply to your thumbnail images.
✨ pro tip: you can also adjust your thumbnail image crop ratio here while you’re at it. find your magic number and adjust accordingly to fit your style.
WooCommerce product gallery images
last but not least: the product gallery images. it’s vital that your customers can peruse a range of product images and videos to really fall in love with your products.
best sizes for WooCommerce gallery images
there are a few opinions on the best size for your gallery product images. some suggest that 100 px by 100 px is enough to lead your customers to scroll through your gallery.
others suggest that 300 px by 300 px is a better size to help entice your audience to spend more time admiring your stunning product images. this is also our preference because it provides more clear details without overwhelming your product pages.
how to change the WooCommerce gallery image size
head to appearance > customize > WooCommerce > Product images. you should be able to tweak your gallery image sizes from there. this may or may not work depending on the theme you’re using. chat with your developer if you’re not able to change the sizes within the appearance menu.
you can also use WooThumbs here. head to WooCommerce > WooThumbs > display. scroll down to the image sizes section and tweak the settings till you hit your desired sizing. any sizing changes you make in this menu will only apply to your gallery images.
WooCommerce product image plugins you’ll love
WooCommerce’s proliferation has lead to the development of a wide array of easy-to-use plugins for your website. we’re highlighting two of our fave - but a quick search will show you that you can find a virtually infinite amount of WooCommerce plugins to fit your needs.
WooThumbs
consider the WooThumbs plugin like a magic wand for your WooCommerce product images. it’s easy to use and won’t bog down your website. this plugin gives you incredible versatility in your galleries and product images.
take advantage of easy-to-use features that your customers will love: sliding thumbnails. multiple zoom options. variable gallery layout. and slide/fade animations for a little engagement booster.
WooSwipe
WooSwipe is an open-source plug-in that makes your product galleries mobile-friendly and responsive. it even gives you a “pin it” social share option.
the best part? WooSwipe comes in at a whopping free ninety-nine. note: make sure your theme doesn’t regulate your image sizes. WooSwipe cannot override settings declared by your theme.
FAQs about image sizing with WooCommerce
but you might still run into some speedbumps even if you understand the specifics. here are some of the most commonly asked questions about WooCommerce product images and a few tips to help you troubleshoot.
what do I do if my images are blurry?
to keep things simple: we’ll assume you’ve followed the recommended sizing guidelines above. there are a few reasons your images might be blurry after you upload them.
first - you might need to update to the latest version of WooCommerce. version 3.3 fixed many of the root causes that might be making your image blurry (i.e., theme incompatibility).
second - check the resolution on the original image file that you uploaded. it’s a good rule of thumb to make sure your original image is less than 100 MB in size. but they should be at least 800px by 800px for most themes.
still not getting that crisp and clean image you need? make sure your original image dimensions match or exceed your product image size settings in your theme.
what do I do if the product images are different sizes?
are your product images showing as different sizes despite your best efforts? there are a few things you should check to resolve this.
start with the same sized image before you upload. uploading a wonky variety of image sizes is an easy way to get a mish-mash of results. you can make your life easier with a template (with your photo editor of choice) so that you know you’re always uploading the same size image.
you should also double-check to make sure you adjusted and saved your product image settings to include thumbnail sizing and cropping.
how do I hard crop WooCommerce thumbnails?
there are a few different ways to hard crop your thumbnail product images: through your theme (via a plugin). through your site appearance settings. and through a manual override.
option 1: you can use the simple image sizes plugin to establish custom product image sizes for your site.
option 2: head to appearance > customize. then go to WooCommerce > product images. you can select your preferred thumbnail size cropping settings from there.
option 3: you might need to dig into the code a little bit. you can find more specifics on how to set the hard crop dimensions through code here.
need high-quality product images or videos for your WooCommerce site?
understanding the best WooCommerce product image sizes for each setting can be complicated. thumbnails. main images. zoom images. they all require different sizing to make sure that you dazzle your customers with crisp and quick-loading images. remember: quality is king when it comes to ecommerce images. now’s the time to close the sale by optimizing your WooCommerce image sizes.
don’t feel like fussing with the details? leave it to the pros. contact soona today and we’ll help you perfect your WooCommerce product image sizes with a customized photoshoot.
if you’re looking to ramp up your content game but still feel unsure where to start - check out these resources:
- we're betting on these 6 trends in Q3.
- trend sets are here to help add dimension to your shoot
- so you’re working from wherever: here’s what to expect from a soona virtual shoot
- what it means to reach your content dream state
- want free photos? find your personal referral code
