How do I make sure ecommerce product images still look sharp after compression?

To keep ecommerce product images sharp after compression, focus on image prep, the right file type, and controlled compression settings.

1. Start with a high-quality source

• Use a sharp original image with good lighting and focus.
• Don’t upscale small images; compression can’t fix low resolution.
• For product detail shots, aim for at least 2x the display size if you want retina-quality results.

2. Resize before compressing

• Export images at the exact dimensions you need on the site.
• Compressing a huge image and then scaling it down in the browser often hurts quality and performance.

3. Choose the right format

• JPEG: best for photos and most product shots.
• WebP: usually smaller than JPEG with similar quality; great for web.
• AVIF: even smaller in many cases, but not always ideal if you need maximum compatibility or faster workflow.
• PNG: use only when you need transparency or crisp graphics; not ideal for photos.
• For simple product graphics/icons, consider SVG.

4. Use quality settings that preserve detail

For lossy formats like JPEG/WebP/AVIF:

• Avoid overly aggressive compression.
• A good starting point:
  • JPEG quality: 75–85
  • WebP quality: 70–85
  • AVIF quality: 40–60 (varies more by encoder)
• Test visually, especially on:
  • edges
  • text on packaging
  • shiny or reflective surfaces
  • fine textures like fabric or jewelry

5. Use progressive or smart encoding

• Progressive JPEG can improve perceived loading.
• Use optimized encoders like:
  • mozjpeg for JPEG
  • cwebp for WebP
  • avifenc or image pipeline tools for AVIF These often preserve quality better at the same file size than basic export tools.

6. Avoid repeated re-compression

• Don’t repeatedly edit and re-save the same JPEG.
• Keep a master lossless/original file and generate web versions from that source.

7. Sharpen slightly after resizing

• Downscaling can soften images, so apply a light sharpening pass after resize if needed.
• Don’t overdo it or you’ll get halos and noise.

8. Use responsive images

• Serve different sizes for different screens with srcset so mobile users don’t download giant files.
• This helps quality and performance.

9. Check compression on real devices

• Always inspect images on:
  • mobile
  • desktop
  • Retina/HiDPI screens
• What looks fine on a large monitor may look blurry on a phone, or vice versa.

10. Watch backgrounds and gradients

• Smooth gradients, white backgrounds, and shadows can band or artifact easily.
• If needed, use a slightly higher quality setting for those images.

If you want, I can recommend specific export settings for Photoshop, Figma, or Shopify/WooCommerce product images.