My pictures loses their quality when uploaded

Store Design
,

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:

  1. 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

  2. Image Size Selection:

    • Double-click uploaded images in the backend editor
    • Select “Original size” from formatting options instead of default compressed versions

  3. Code Modification:

    • Add img_url: 'master' parameter to image div code to bypass compression
    • Example: <img src="{{ section.settings.image | img_url: 'master' }}">

Ongoing Frustration:
Users express significant dissatisfaction with Shopify’s lack of user control over compression settings, calling it outdated for 2024 internet speeds.

Summarized with AI on October 24. AI used: claude-sonnet-4-5-20250929.
17

update: See solution that WORKS below! : D

Upload as an SVG and the resolution issue is resolved :folded_hands: