Images make up the bulk of any website’s page size, more so for an ecommerce site. WooCommerce sites are loaded with product images and banners.
If you don’t optimize images for size and delivery, they can bring your website to a crawl
While videos are a heavier resource than images, they’re loaded on demand in most cases. Hence, they don’t affect the perceived page load speed as much as images do.
Usually, you can save about 600 KB per page only by lazy-loading hidden and offscreen images and by setting your JPEG compression levels to 85 or lower, you can further save 50 KB per page.
Follow these 5 rules to optimize images for your WooCommerce store (and the web in general):
- Choose the right format for your images (JPEG, PNG, SVG, WebP).
- Compress the images efficiently using the right tools.
- Use responsive images to optimize delivery for various devices.
- Lazy-load offscreen and hidden images.
- Offload image delivery to fast CDNs.
WooCommerce 3.3 introduced image size improvements such as on-the-fly thumbnail resizing, blurry image fix, and background thumbnail resizing. All these features make using a plugin such as Regenerate Thumbnails for WooCommerce-related images redundant.
If you’re starting with a fresh install, you can compress your images before you upload them to your site. Here are some of the top online image compression recommendations:
- Compressor.io
- Squoosh.app
- Shrinkme.app
- Kraken.io
- Imagify.io
- TinyJPG | TinyPNG
Do you have many images already up on your site? Then you can use a WordPress plugin to automate image optimization. Here are the ones that consistently performed the best in our experience:
- Shortpixel
- Imagify
- reSmush.it
- Optimole
Most of these plugins also enable lazy-loading for images. The WordPress core team is planning to add lazy-loading images as an inbuilt feature. This will utilize the new loading HTML attribute for <img> tags.
One last thing on image optimization, though. Avoid using image compression plugins as much as possible, particularly the ones that use your server’s resources to compress the images.
Instead, use a service that offloads the image compression task to an external server. Or better yet, resize and compress your images before uploading them to your website.
