Organize your content and product images

Content ↑ Back to top

Although not essential it might be a good idea to keep versions of your sites content ‘offline’. As well as acting as another backup (you can never have too many backups), it can be useful for team members to modify, proof-read and ‘test’ content before making the changes live on your actual web site. It can also be useful should you want to edit content whilst not connected to the Internet.

As a new business, organizing your content offline may also help you plan and structure how it is presented online via your web site.

Images ↑ Back to top

A lot of the points from the above section on content also apply to your product images. However, the images you use offline (in print, for example) will be different from the images you use online on your web site. If you have high resolution product images, start by organizing them into an ‘offline’ folder with individual folders per product (it might help to use the product SKU for these folder names).

Duplicate the offline folder and rename it ‘online’ (or something to that affect). This will contain the images you use on your web site. It’s good to have a clear separation between online / offline images so that you can quickly send off images to print, or images to be used in online publications. What’s the difference between the online / offline images? Size & Size.

That is size as in dimensions and filesize. Obviously these two things often go hand-in-hand but it’s always worth keeping an eye on. Offline, dimensions and file size have little significance. Online the opposite is true. It’s important that images used online are optimized to improve performance and reduce bandwidth use.

What size is the right size? ↑ Back to top

Let’s cover dimensions to begin with. First, you need to decide how large you’d like to display the images at their largest on your web site. The largest location the images are likely to be displayed is in the product lightbox gallery.

The product lightbox will likely be where the image is displayed at its largest
The product lightbox will likely be where the image is displayed at its largest

This will generally come down to analytics so check which screen resolution is most popular amongst your users. Then resize all of your ‘online’ images to a size appropriate to that resolution. For example if the most popular resolution is 1600×1200 you might want to make your images 1000×1000. As a general rule of thumb, anything around 800px will generally work well for full-size images. But if you’re selling extremely detailed products you might want to consider something larger, especially if you want pixel perfection on retina screens.

Be sure to keep an eye on the filesize of these images as it will directly affect all the product thumbnails throughout your web site. This will have an impact on both your bandwidth usage (which may become significant if you have a low limit and poor caching) as well as general site performance. Large images take longer to load and use more bandwidth.

If you’re editing your product images in Photoshop be sure to use File > Save for web and devices when exporting. You can play with the quality here to further reduce the file size. There are also various third party applications you can use to optimize images and reduce their filesize further. If you’re on a Mac, check out ImageOptim which does a great job.

Product thumbnails ↑ Back to top

Fortunately WordPress and WooCommerce do a great job of creating the rest of the thumbnails used throughout your site for you. This means the full-size product images are the only ones you need to create manually.

The product thumbnails (used throughout your web site) are created dynamically by WordPress when you upload the full size images. While this means most of the legwork is done, it does highlight the importance of optimising your full-size images. If the full-size images are optimized, it will decrease the filesize of all the thumbnails that are based on it. So it’s worth investing some time in optimization.

Product Thumbnail Sizes ↑ Back to top

The full-size product image is actually only used in the lightbox gallery. All the other product images in WooCommerce are thumbnails generated at specific sizes and based on the full-size images that you upload. These thumbnail sizes are defined in the WooCommerce settings. It’s important that you set these dimension settings appropriately for your theme. You can read about choosing which image dimensions are appropriate here. Be sure to read this, because if your image dimensions are too small then your product thumbnails will be pixelated / blurry on the frontend, regardless of how big your full-size images are.

WooCommerce - the most customizable eCommerce platform for building your online business.

Back to the top