How can I use high-quality images and videos without slowing down my site?

High-Quality Images Without Slowing Down Your Shopify Store

Images are the primary driver of page load time in e-commerce - and for cosmetics stores, image quality is non-negotiable. The solution is not to choose between quality and speed, but to understand how to get both through proper formatting, sizing, and delivery.

Shopify's Built-in Image Optimization

Shopify automatically handles several optimizations for you:

• Converts uploaded images to WebP format (30-35% smaller than JPEG at same quality)
• Serves images through Shopify's global CDN (Fastly)
• Resizes images dynamically via URL parameters for different display sizes
• Generates lazy-loaded variants automatically in Dawn and modern themes

Image Upload Best Practices

Video Optimization

Product videos for cosmetics (application demos, texture shots) should:

• Be hosted on an external platform (YouTube, Vimeo, or Shopify's native video) - never uploaded directly as a large file
• Use lazy loading so video players only initialize when scrolled into view
• Auto-play muted short loops (under 15 seconds) for product texture demos
• Target under 5MB for any embedded video file

Tools to Pre-optimize Before Upload

• Squoosh.app - free, browser-based WebP converter with quality preview
• TinyPNG.com - batch compression for JPEG and PNG
• ImageOptim (Mac) - desktop app for automated compression
• Shopify app: Crush.pics - automatically compresses on upload without manual effort

The Above-the-Fold Priority

The hero image (first image visible on load) must be fast - it directly determines perceived page speed. Optimize this image aggressively: aim for under 200KB. Images below the fold can be slightly larger since they're lazy-loaded and users scroll before they load. PageSpeed Insights' "Remove render-blocking resources" and LCP (Largest Contentful Paint) metrics tell you if your hero image is the bottleneck.