As for any web resources involving visitors’s device and connection speed, it’s merely a matter of finding the best compromise between image quality and file size.
- Better image quality means larger file size. Larger file size means slower page loading.
- Larger image size means larger file size. And as above…
Here are some personal advices.
Use large previews only if you need them: if you use product images just as placeholder, disable “Lightbox” effect.
Use JPEG format with 60/80% quality: they have the best “image quality”/“file size” ratio.
For thumbnails, use images with a width size that’s double the size you see in Catalog and Product pages: they will be rendered perfectly on Retina devices, higher sizes are worthless. For example, if your product box in Catalog page is 100 px wide, just use a 200 px thumbnail. Keep always in mind file size: you could think that one 100 KB thumbnail could be a good choice, but when you have 20 products in a Catalog page, your customers would have to download 2 MB. Not a problem with fast connections, a big problem with capped (for speed or MB) connections, especially on mobile.
Use the same aspect ratio for all your thumbnails: better if squared, they look better in Catalog page.
For larger previews, you can use 300+ KB images: customers know that when they click on a product image they’ll get a larger image with all the consequences. But don’t use 1 MB or 2000 px. If you need to highlight a product detail, like a embroidery on a t-shirt, just show it in a targeted image.
Prefer speed over quality: smaller file size means faster page loading, you’ll get a higher customer retention rate and better ranking in search engines.
- Use common sense.