On a typical product page, images account for more of the page weight than everything else combined. Get them right and your store feels instant. Get them wrong and no amount of code cleanup will save it.
Serve modern formats
Shopify can serve WebP automatically to browsers that support it, which is most of them. WebP and AVIF are dramatically smaller than JPEG or PNG at the same quality. Upload high-quality source images and let Shopify handle delivery — don't upload pre-shrunk, blurry files.
Size images to how they're displayed
A 4000px-wide image squeezed into a 600px slot wastes bandwidth on every visit. Use Shopify's responsive image sizing (the theme requests the right size per device) instead of one giant file everywhere.
Compress before you upload
Run source images through a compressor so you're not shipping unnecessary bytes. Aim for the smallest file that still looks sharp on a retina screen.
Lazy-load below the fold
Images the shopper can't see yet shouldn't block the ones they can. Lazy-load everything below the fold — but not the hero or first product image, which should load with priority.
Prevent layout shift
Always define width and height (or an aspect ratio) so images reserve their space. Otherwise the page jumps as they load, hurting your CLS score and annoying shoppers.
A quick reference
| Image type | Recommendation |
|---|---|
| Hero / LCP image | Priority load, no lazy-load, correctly sized |
| Product gallery | WebP, responsive sizes, zoom on demand |
| Below-fold content | Lazy-load |
| Icons / logos | SVG where possible |
Don't forget alt text
Alt text helps screen readers and gives Google context for image search. Describe the image naturally — "navy linen shirt, front view" — not a keyword dump.
The payoff
Optimised images routinely cut page weight by half or more, lifting Core Web Vitals, rankings, and conversion in one move.
If your store feels heavy, we can run a free performance audit for your Oshakati store and show you exactly which images are costing you.