Image quality issues
Blurry product images or pixelated heroes.
Updated 2026-05-09
Dost uses responsive srcset everywhere, so the browser picks an appropriate size for the device. Blurry images usually mean the source upload is too small.
Recommended source sizes
| Use | Min width |
|---|---|
| Product images | 2000px (lightbox uses 1800px) |
| Hero / slideshow images | 2400px (full-bleed on 4K displays) |
| Collection card images | 1200px |
| Blog article hero | 1600px |
| Lookbook tiles | 1200–1800px depending on layout |
Upload at these sizes; Shopify's CDN downsamples per request.
Don't pre-compress
Upload "best quality" originals. Shopify's CDN handles compression — adding more compression on top loses detail.
WebP / AVIF
Shopify auto-serves WebP to supporting browsers. You don't need to convert manually.
Blurry on retina displays
Retina (2× / 3×) displays render images at higher density. Source images at 2× the visible CSS width get rendered crisp. If your visible card is 400px wide, source should be at least 800px.
Tips
- Avoid PNG for photographic content — JPEG / WebP is much smaller without quality loss.
- For transparent product backgrounds (jewellery, accessories), stick with PNG so the cutout stays clean.
Need a hand? Contact support.