How do I compress Shopify product images?
Compress Shopify product images by exporting the right pixel size for your theme, then reducing file weight so product pages load quickly on mobile. Theme-width heroes rarely need 5000px originals. Use JPEG or WebP for photos and PNG for graphics. CrossKit Image Resizer and Image Compressor prepare files in the browser before you upload to Shopify.
Shopify can transform images, but uploading 20 MB photos still slows admin, backups and some apps. Clean files at the source.
Steps
-
Check how wide the product image actually renders
If the theme shows ~1200px, export a bit more for retina (often 1600–2400px), not 8K.
-
Resize, then compress
Downscaling pixels saves more than crushing quality on a huge canvas.
-
Keep a consistent aspect ratio
Collection grids look broken when every SKU is a different crop.
-
Compress GIFs separately if you use them as badges or demos
Animated banners are heavy. Use GIF Compressor or replace with a short video/WebP where the theme allows.
-
Upload and spot-check the PDP on a phone
Zoom the main image. If it banding or blurring, raise quality slightly.
Theme width is the real target
If the product image renders around 1200px, export a bit more for retina—often 1600–2400px—not 8K. Resize pixels first; that saves more than crushing quality on a huge canvas. Keep a consistent aspect ratio so collection grids do not break. JPEG or WebP for photos, PNG for graphics. Shopify can transform images after upload, but 20 MB originals still slow admin, backups and apps. CrossKit Image Resizer then Image Compressor prepares files in the browser.
GIFs, heroes and collection thumbs
Animated banners are heavy; compress them with GIF Compressor or replace with short video/WebP if the theme allows. Collection thumbnails can be smaller than PDP zoom shots—do not use those thumbs as the only master. After upload, check the product page on a phone and zoom the main image. Banding or blur means raise quality slightly from the original, not from a twice-compressed export.
Example
Ten SKUs, each 7–12 MB from a camera. Resize to 2000px on the long side, JPEG quality visually lossless: often 200–800 KB each. A collection of 20 products then loads as a few megabytes of images instead of 150 MB of originals. A 20-product collection at 200–800 KB each loads as a few megabytes instead of 150 MB of camera files, which is the difference between a usable theme editor and a spinning wheel.
Common mistakes
-
Relying only on a compression app after upload
Helpful, but you still pay the upload and storage cost of the original.
-
Mixing tiny thumbnails into the product gallery
Shopify may upscale them and they look worse than a properly sized JPEG.
-
Uploading screenshots of already-compressed JPEGs
You stack artifacts and lose color. Always go back to the original export.
Recommended tool
Image Compressor
CrossKit Image Compressor reduces image file sizes before you upload to an ecommerce store. Pair with Image Resizer for Shopify theme widths.
Frequently Asked Questions
Does Shopify compress images for me?
Shopify serves transformed images, but starting from a reasonably sized file still improves admin speed and theme control.
Should I use WebP in Shopify?
If your theme/CDN serves WebP, great. Still keep high-quality JPEG/PNG masters.
Does Shopify CDN make compression unnecessary?
It helps delivery. You still want reasonable masters for admin speed, app limits and theme control. Oversized uploads waste time even when the storefront is optimized.
What format should I upload?
High-quality JPEG or PNG masters are safe. If the theme serves WebP, Shopify can derive it. Keep the master you can recompress.