this is NOT an accepted solution. I’ve reduced a 800KB image down to 230KB and it’s STILL being turned into sludge. This isn’t acceptable. it’s 2024, nobody has potato internet, and if they do they’re not my target audience.
Topic summary
Core Issue:
Shopify’s automatic image compression is causing uploaded images to appear pixelated and blurry, particularly affecting artists and designers selling visual products. Users report that even optimized images (100-150KB JPEGs at 85% quality) still suffer from aggressive compression.
Official Guidance (Limited Success):
- Export as JPEG instead of PNG
- Optimize images to 100-150KB at 85% quality
- Shopify won’t further compress images already optimized to 85%
However, multiple users confirm this approach doesn’t resolve the problem in 2024.
Working Solutions:
-
SVG Upload Method (Most Popular):
- Upload images as SVG files to preserve original quality
- Note: Figma exports may require removing specific code rows (
<pattern>tags and</defs>) for proper mobile display
-
Image Size Selection:
- Double-click uploaded images in the backend editor
- Select “Original size” from formatting options instead of default compressed versions
-
Code Modification:
- Add
img_url: 'master'parameter to image div code to bypass compression - Example:
<img src="{{ section.settings.image | img_url: 'master' }}">
- Add
Ongoing Frustration:
Users express significant dissatisfaction with Shopify’s lack of user control over compression settings, calling it outdated for 2024 internet speeds.
3 Likes