Updated: July 12, 2026
To compress Shopify product images without losing quality: resize the image to the largest dimensions your gallery actually needs, export photos as JPEG or WebP (PNG only when transparency or sharp graphic edges matter), then reduce quality gradually while inspecting the result at 100% zoom. Shopify's CDN already optimizes and re-encodes images automatically when delivering them to visitors—so your goal is a clean, appropriately sized source image, not the smallest possible file. Pre-compressing before upload gives you predictable quality control and faster admin uploads; it is not a platform requirement.
Key Takeaways
- Shopify's CDN automatically compresses and can deliver WebP or AVIF to supported browsers—manual pre-compression is optional but useful for quality control.
- Product and collection images must be smaller than 20 MB and can be up to 5000 × 5000 px or 25 megapixels. (Shopify Help: Product media types)
- For most square product images, 2048 × 2048 px is the recommended dimension that displays best in themes and supports zoom.
- Use JPEG for photos, PNG for transparent or graphic images, and WebP when you need a smaller file at similar quality.
- Around 500 KB is a practical starting point for many product images—not a hard limit. Visual quality and delivered size are the real tests.
- Alt text should be descriptive and kept under 125 characters (the hard limit is 512 characters). (Shopify Help: Adding alt text)
Does Shopify Already Compress Product Images?
Yes—Shopify's CDN handles image optimization automatically. When a shopper views your product page, Shopify resizes the image to the size needed by the page layout, compresses it, and can deliver it as WebP or AVIF if the visitor's browser supports those formats. (Shopify Help: Improving web performance)
This means you do not have to manually compress images before uploading them. Shopify itself advises that uploading a high-quality source image is preferable to uploading a heavily compressed one.
Then why compress at all before uploading?
- You control exactly what goes into your store—no surprises from server-side processing.
- Very large source files (near the 20 MB limit) can slow down your admin and import workflows.
- Pre-checking quality at 100% zoom helps you catch problems (blur, banding) before they appear on a live product page.
- If you sell on multiple channels or export images for ads, the source file is what those systems use.
Shopify Product Image Limits and Recommended Sizes
| Attribute | Hard Limit (Shopify Rule) | Recommended / Editorial Guidance |
|---|---|---|
| File size | Must be less than 20 MB | Aim for well under 20 MB; many product photos work fine at 200 KB–2 MB |
| Pixel dimensions | Up to 5000 × 5000 px or 25 megapixels | Square product images: 2048 × 2048 px |
| Formats accepted | JPEG, PNG, GIF, WebP | JPEG or WebP for photos; PNG for transparency |
| Images per product | Up to 250 media items (images, 3D models, video) | Use only what you need; prioritize your primary shot |
| Alt text length | Hard limit: 512 characters | Keep to 125 characters or fewer for screen readers and SEO |
Sources: Shopify Help: Product media types · Shopify Help: Adding product media · Shopify Help: Adding alt text
Note on "500 KB": Shopify's blog describes roughly 500 KB as a reasonable general guideline for web images, not an upload requirement. A high-detail product close-up may legitimately exceed that while still loading quickly, because Shopify delivers a smaller version to the end user. (Shopify Blog: Image size guidelines)
JPEG, PNG, or WebP — Which Format Should You Use?
| Format | Best for | File size vs. quality | Transparency | Shopify CDN note |
|---|---|---|---|---|
| JPEG | Product photos, lifestyle shots, any image with gradients or complex color | Small to medium | No | Shopify may re-encode to WebP/AVIF on delivery |
| PNG | Images with transparent background, logos, product graphics with sharp edges | Larger than JPEG for photos | Yes | Lossless; CDN may convert on delivery |
| WebP | Any image where you want smaller file size without visible quality loss | Smaller than JPEG at comparable quality | Yes (with alpha) | Widely supported; good upload choice if your editor exports it cleanly |
| GIF | Short animated previews only | Large; avoid for static images | Yes (1-bit) | Use sparingly; video is better for animation |
Decision guide:
- Product photo (clothing, electronics, food) → JPEG at 80–85% quality, or WebP
- Transparent background or flat graphic → PNG (or WebP with alpha)
- Text overlaid on the image → PNG or WebP (JPEG blurs sharp edges near text)
- Animation → consider a Shopify-hosted video instead of GIF
How to Compress Images for Shopify Step by Step
1. Back Up the Original Image
Always keep a copy of the full-resolution, unedited source file before you begin. Once you compress and overwrite the original, the quality loss is permanent. Name your archive clearly (e.g., product-123-original.png) and store it outside your Shopify admin.
2. Resize to the Required Display Dimensions
Compressing a 6000 px image down to 50 KB will look terrible. The correct order is: resize first, then compress.
- Decide the maximum size the image will ever be displayed at. For a square main product image: 2048 × 2048 px.
- For banner or hero images in your theme, check the theme's documentation for the recommended width.
- Do not upscale—if your original is 1200 px wide, do not enlarge it to 2048 px; that adds no detail and only increases file size.
3. Choose JPEG, PNG, or WebP
Use the format table above to select the right option for the image content. Export directly from your image editor (Photoshop, Affinity Photo, GIMP, Squoosh, etc.) at the target format. Do not convert a JPEG to PNG and then back to JPEG—each round-trip JPEG re-encode degrades quality.
4. Compress and Compare the Result
Reduce quality gradually:
- Start at 85% quality for JPEG or the equivalent setting in your tool.
- View the exported file at 100% zoom in an image viewer.
- Look for: soft edges on text, color banding in gradients, blocky artifacts in shadow areas.
- If none are visible, try 80%. Repeat.
- Stop when you first notice any degradation. Use the previous quality setting as your final output.
For a browser-based option before uploading, you can use LessMB to compress a copy of the image, then compare the result with your original at 100% zoom before committing to the upload.
Pre-upload checklist:
- Original backup saved
- Image resized to correct pixel dimensions
- Format chosen based on content type
- Quality compared at 100% zoom — no visible blur or banding
- File size is under 20 MB (hard limit) and reasonable for the content
5. Upload or Replace the Image in Shopify
In the Shopify admin, go to Products, open the product, and drag the compressed file into the media section, or use Add media. (Shopify Help: Adding product media)
If you are replacing an existing image, note that alt text is not automatically carried over to the new file. Update the alt text immediately after upload.
How Much Should You Compress a Product Image?
There is no single correct answer—the right level of compression depends on image content, display size, and how much zoom the product gallery supports.
Use these practical reference points:
| Image type | Starting quality | Typical file size | When to stop |
|---|---|---|---|
| Simple product photo (white background) | 80% JPEG | 80–200 KB | At first visible artifact |
| Complex product photo (texture, detail) | 85% JPEG | 200–800 KB | At first soft edge |
| Graphic or logo with transparency | PNG (lossless) | Varies | N/A — PNG is lossless |
| WebP (photos) | 80–85% | 50–300 KB | At first visible artifact |
Important: File size alone does not tell you whether compression is acceptable. A 100 KB image can look excellent or terrible depending on pixel dimensions and content complexity. Always verify quality visually at 100% zoom.
How to Check Image Quality After Upload
Once you have uploaded the image to Shopify, verify it from the storefront—not just the admin thumbnail.
Visual checks:
- Open the product page in your browser.
- Zoom into the product gallery to the maximum zoom level your theme supports.
- Check for: blurry text, color banding, soft edges on fine detail, visible JPEG blocks.
- Switch to a mobile device or use browser DevTools to simulate a phone screen.
- If the theme uses a white background, check that transparent PNG edges do not show a colored fringe.
Performance checks:
- Open Chrome DevTools → Network tab → filter by Img.
- Reload the page and look at the Size (transferred) column for each product image.
- Compare before and after if you replaced an image—the transferred size should reflect Shopify's CDN delivery, which may be smaller than your upload.
- Run Google PageSpeed Insights on the product URL and look at image-related opportunities.
Zoom and color artifact troubleshooting:
| Symptom | Likely cause | Fix |
|---|---|---|
| Image looks blurry at full zoom | Compressed too aggressively, or resized too small | Recompress at higher quality, or resize to 2048 px before compressing |
| Color banding in gradients | JPEG quality too low | Increase quality to 85–90%, or switch to PNG/WebP |
| Soft edges around text in image | JPEG artifact near high-contrast edges | Use PNG or WebP for images containing text |
| Transparent background shows white | Uploaded JPEG instead of PNG/WebP | Re-export as PNG or WebP with alpha channel |
Common Shopify Image Compression Mistakes
- Compressing without resizing first. Applying heavy compression to a 5000 px image and scaling it down later results in unpredictable quality. Resize to the target dimensions before compressing.
- Uploading blurry images and assuming Shopify will fix them. Shopify's CDN optimizes delivery but does not restore quality that was discarded during compression.
- Using PNG for all images. PNG is lossless and correct for transparency, but it produces much larger files than JPEG or WebP for photographs. Use JPEG or WebP for product photos.
- Treating 500 KB as a hard ceiling. A complex high-detail product photo may legitimately need more. Let visual quality guide you.
- Not backing up originals. Compression is destructive. Once a JPEG is re-saved at lower quality, the original pixel data is gone.
- Forgetting to update alt text after replacing an image. Alt text does not transfer automatically to a new file. Each replacement requires a manual alt text update.
- Uploading 250 images per product by default. The limit is 250, but most products benefit from 5–10 carefully chosen shots rather than dozens of redundant angles.
Shopify Product Image Checklist
Before Upload
- Original full-resolution file backed up
- Image resized to correct dimensions (e.g., 2048 × 2048 px for square products)
- Format chosen: JPEG for photos, PNG for transparency, WebP as an alternative
- Exported at 80–85% quality (or equivalent for WebP)
- Result inspected at 100% zoom — no blur, banding, or artifacts
- File size is well under 20 MB
- Filename is descriptive (e.g.,
blue-ceramic-mug-front.jpg), notIMG_3847.jpg
After Upload
- Product page opened in browser and image checked at full zoom
- Mobile view checked (DevTools or real device)
- Alt text added or updated in the Shopify product editor (under 125 characters)
- Network tab checked — transferred image size looks reasonable
- No color fringe visible around transparent PNG edges
FAQ
Does Shopify compress product images automatically?
Yes. Shopify's CDN automatically resizes, compresses, and can deliver images in WebP or AVIF depending on the visitor's browser. Pre-compressing before upload is optional—it gives you quality control and predictable source files, but it is not required by the platform. (Shopify Help: Improving web performance)
What is the maximum image file size for Shopify products?
Product and collection images must be smaller than 20 MB. The image can be up to 5000 × 5000 px or 25 megapixels. (Shopify Help: Product media types)
What is the best size for square Shopify product images?
Shopify recommends 2048 × 2048 px for square product images. This size displays well across most themes and supports the zoom feature that many themes offer. (Shopify Help: Product media types)
Should Shopify product images be JPEG, PNG, or WebP?
Use JPEG for product photos, PNG for images with transparent backgrounds or sharp graphic edges, and WebP when you want smaller files without visible quality loss. Shopify's CDN may also automatically convert and deliver a modern format regardless of what you upload.
Is 500 KB a strict Shopify image limit?
No. Around 500 KB is a practical starting point mentioned in Shopify's blog for general web images—it is not a hard upload rule or a universal target. A detailed product close-up may exceed that and still load quickly, because Shopify delivers an optimized version to end users. Use visual quality and the actual delivered file size as your final test. (Shopify Blog: Image size guidelines)
How do I compress an image without making it blurry?
Reduce quality in small increments (5–10% at a time) and inspect the image at 100% zoom after each step. Stop when you first notice blurring, color banding, or soft edges on fine detail, then use the previous quality setting as your output. Never start with the lowest quality setting and work upward—that approach re-encodes the file multiple times.
Will replacing a product image affect its alt text?
Replacing an image in Shopify does not automatically carry over the alt text from the old image. After uploading the new file, open the product editor, click the image, and update the alt text manually. Keep it descriptive and under 125 characters. (Shopify Help: Adding alt text)
How can I test whether compressed images load faster?
Open Chrome DevTools, go to the Network tab, filter by Img, and reload the product page. Compare the Size (transferred) column before and after you replace an image. You can also run Google PageSpeed Insights on the product URL and look at the image-related audit items. Shopify's own speed score in the admin (Online Store → Themes → View report) is another quick indicator.