How image optimization improves site performance
High-quality photos help sell products, but large image files are the primary cause of slow loading times. Image optimization balances visual quality with small file sizes, ensuring your store loads quickly for customers on mobile devices and slow connections without losing detail.
How to optimize your images
- Resize before you upload: Most modern phones take photos that are 4000 pixels wide or larger. Your shop rarely needs images wider than 1200px or 1500px. Use a free tool or your computer’s built-in photo editor to shrink the dimensions before uploading to WordPress.
- Choose the right format: Use JPEG for product photos with lots of color and detail. Use PNG only if you need a transparent background (like a logo). For the best performance, WooShop supports WebP, a modern format that is much smaller than JPEG.
- Enable automatic compression: Navigate to your WooShop dashboard settings to ensure your built-in optimization tool is active. This automatically "squashes" the file size of any image you upload to the Media Library while keeping it looking clear.
- Use Kadence "Lazy Loading": Ensure lazy loading is enabled in your Kadence theme settings. This tells the browser only to load images as the customer scrolls down to them, which makes the initial page load feel much faster.
- Regenerate thumbnails: if you change your shop’s layout or image sizes in WooCommerce, run the "Regenerate Thumbnails" tool to ensure WordPress creates new, correctly-sized versions of your existing photos.
Real-world scenarios
- The Restaurant Menu: If you have a menu page with 20 food photos, unoptimized files could make the page weigh 50MB. This will frustrate hungry customers on mobile data. Optimized, these 20 photos will weigh less than 2MB total.
- The Jewelry Close-up: You need high detail to show texture. Instead of uploading a massive 5MB file, save it as a high-quality JPEG at 1500px. The file size drops to roughly 300KB, but the customer still sees every sparkle when they zoom in.
Troubleshooting common issues
- Images look blurry: This usually happens if the "Display Size" is larger than the actual image. For example, if you upload a 300px icon but tell WooCommerce to show it at 600px, it will stretch and blur. Always upload at the size you intend to display.
- Upload failed errors: If you try to upload a file directly from a high-end camera, it might be 20MB+. WordPress or your server may block these large files for security. Resize the image on your computer first.
- Colors look different: If your product colors look "off" after uploading, ensure you are saving your images in the sRGB color space in your photo editor.
Summary
Optimizing images is one of the fastest ways to improve your SEO and conversion rates. By resizing your files before they hit your site and using WooShop’s built-in compression tools, you provide a smoother experience for your shoppers.
Related guides:
- Setting up your WooCommerce product gallery
- Improving mobile speed with Kadence blocks
- How to use WebP images in WordPress
