Why optimize your store's images?
Images make up 60 to 80% of an average e-commerce page's weight. Unoptimized images slow down your store, drive visitors away, and hurt your Google ranking. A page that takes more than 3 seconds to load loses 53% of its mobile visitors.
Beyond speed, optimized images directly improve your SEO: Google factors Core Web Vitals (LCP, CLS, INP) into its algorithm. A well-compressed, correctly sized image can take your LCP from 5 seconds down to 1.5 seconds — a huge gain in search rankings.
Choosing the right format: WebP first
WebP is today's web standard: it compresses 25 to 35% better than JPEG at equal quality, and it supports transparency (unlike JPEG). Every modern browser supports it. shopsdz converts your images to WebP automatically — you don't have to do anything.
For images that need transparency or fine detail (logos, icons, products on a transparent background), prefer compressed PNG-24 or lossless WebP. Avoid GIF for animations — use MP4 or WebM video instead, which is 10 to 100 times lighter.
- WebP: default format, 30% better compression than JPEG
- JPEG: for complex photos with no transparency (maximum compatibility)
- PNG-24: for logos and images with transparency
- MP4/WebM: for animations (better than GIF)
Using the right dimensions
A product image displayed at 600×600 px on the page doesn't need to be delivered at 4000×4000 px. The actual dimensions should match what's displayed, accounting for retina screens (multiply by 2). For a product page, 1200×1200 px is an excellent compromise: sharp on retina, light enough for fast loading.
For banner or hero images, a width of 1600 to 2000 px is enough. Avoid images wider than necessary: every extra pixel costs loading time. On shopsdz, the system automatically generates several sizes (thumbnail, medium, large) and serves the right one depending on the display context.
Compressing without losing quality
Compression should be invisible to the naked eye. For WebP, aim for a quality of 75 to 80 — the best trade-off between file size and visual rendering. Below 70, compression artifacts start showing on textured areas (fabric, skin, food).
Several free tools let you compress your images before upload: Squoosh.app (Google, online), ImageOptim (macOS), FileOptimizer (Windows). For maximum gain, also use the `loading="lazy"` (deferred loading outside the viewport) and `decoding="async"` attributes — shopsdz adds them automatically to every product image.
Don't forget image SEO
A technically optimized image is useless if Google can't understand it. Always fill in the `alt` attribute with a clear, concise product description (e.g. "White Nike Air Max sneaker, side view"). Avoid generic alt text like "image1.jpg" or "product."
Also give your files explicit names (`white-nike-air-max-sneaker.webp` rather than `IMG_4521.webp`). Google reads the file name to understand the context. Finally, add a caption and a long description to the product page: it strengthens SEO relevance and helps screen readers for visually impaired users.