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

Exactly, it’s the same image? This is what was confusing me.

It looks fine on Product page but is blurred beyond belief on Collection page!

How is this acceptable?? How do others using Shopify successfully navigate this?

I literally can’t show my collection page (which hosts all the art prints like a gallery) because of this..

For the monthly fee we pay is disgraceful.

1 Like