Optimizing Images for Shopify. Should You Compress Before Uploading?
Have you ever wondered if compressing your images before uploading them to Shopify is necessary? I thought I had the answer until a Reddit discussion made me rethink everything. In this post, I’ll explore whether you need to compress your images before uploading them to Shopify and how the platform handles image optimization.
According to Shopify
Shopify says you don’t need to manually compress images before uploading. They recommend uploading the best-quality images available because their system automatically optimizes images using liquid image filters, provided your theme uses them.
Discovery
During my research, I found valuable information in Shopify’s documentation:
Shopify compresses images using an automated image service that processes uploaded assets upon URL request and delivers them via a CDN. This process is similar to services like ImgIX and Netlify Image CDN, ensuring your Shopify store images remain fast and responsive.
Testing
Test images from left to right: Ubrella, Sunset, Citrus, Birds, Colors, Abstract
To find the best source image type for Shopify, I conducted a series of tests with six images: three JPGs (Umbrella, Sunset, Citrus) and four PNGs (Abstract, Birds, Colors, Colors with transparency). I uploaded JPGs at 100%, 75%, and 50% quality, and PNGs as 24-bit lossless. By placing these images in a theme and modifying their formats using Shopify’s liquid filters, I could observe the impact on file size and quality.
{{ image_obj | image_url: width: 500, height: 500, crop: 'center' | image_tag: width: 500, srcset: nil }}
{{ image_obj | image_url: width: 200, height: 300, crop: 'center', format: 'pjpg' | image_tag: width: 200, srcset: nil }}
Results
The results confirmed Shopify’s advice: uploading high-quality JPG images and letting Shopify handle the compression is usually the best approach. Notably, JPG images with gradient backgrounds benefited slightly from pre-compression, but the difference was minimal.
Based on my tests, JPG is the best image format for Shopify due to its balance of quality and file size. PNGs should be used only when transparency is required, as they can quickly exceed Shopify’s file size limits (20MB).
Info | WxH | Source (B) | Shopify (B) | Difference (%) |
|---|---|---|---|---|
Umbrella 100% | 3024x4032 | 1507423 | 693918 | 117.23 |
Umbrella 75% | 3024x4032 | 2118139 | 719088 | *109.63 |
Umbrella 50% | 3024x4032 | 1043231 | 776996 | *94.01 |
Sunset 100% | 4608x2963 | 2831860 | 2284188 | 23.98 |
Sunset 75% | 4608x2963 | 3569354 | 2198679 | *28.80 |
Sunset 50% | 4608x2963 | 2172390 | 2171609 | *30.40 |
Citrus 100% | 4038x3712 | 3414883 | 2314338 | 47.55 |
Citrus 75% | 4038x3712 | 4530507 | 2413428 | *41.50 |
Citrus 50% | 4038x3712 | 2700665 | 2612792 | *30.70 |
Abstract | 2880x3600 | 15304122 | 3719002 | 311.51 |
Abstract PJPG | 2880x3600 | 15304122 | 2995122 | 410.97 |
Birds | 3511x5309 | 14654123 | 762250 | 1822.48 |
Birds PJPG | 3511x5309 | 14654123 | 1137455 | 1188.33 |
Colors | 4000x4793 | 6543609 | 2156442 | 203.44 |
Colors PJPG | 4000x4793 | 6543609 | 2071693 | 215.86 |
Colors Alpha | 4000x4793 | 7350606 | 2070952 | 254.94 |
Colors Alpha PJPG | 4000x4793 | 7350606 | 2092925 | **251.21 |
** Difference does not include transparency.
Additional observations include:
- JPGs with gradient backgrounds see minimal benefits from pre-upload compression.
- PJPG format is effective only for PNGs with solid colors, as it doesn’t improve other image types and removes transparency.
- Shopify ensures effective compression, even when images are cropped.
Conclusion
In conclusion, both Shopify’s guidance and my tests indicate that uploading high-quality images without manual compression is the best practice. This ensures optimal performance and quality, leveraging Shopify’s robust image optimization capabilities.
