Stop shopify compressing images when I use the colour swatch on the collection page

Shopify Discussion

Topic summary

A user is experiencing image quality issues on their Shopify store’s collection page. When switching between color swatches, the images become blurry due to compression.

Potential Cause:

  • The theme’s code may be loading low-resolution images when color variants are selected.

Current Status:

  • Another user has offered to help diagnose the issue and requested the store URL (and password if applicable) to investigate further.
  • The discussion remains open, awaiting the store details to troubleshoot the compression problem.
Summarized with AI on November 2. AI used: claude-sonnet-4-5-20250929.
1

How do I stop shopify compressing images? When I switch the colours on my collection page, it makes the images blurry

2

Hello @user2237
It might be the theme’s coding that’s adding low-resolution or blurry images. Can you share your store URL? If it’s password-protected, please share the password as well.

3

Please, do not expect that people will know your theme, shop address and any modifications you may have applied on your theme.

It’d be a good habit to share this data when asking questions in the forum.
Some screenshots are also welcome.

These are significant because it’s not Shopify “applying compression” but rather your theme is requesting files which are not properly sized.

This, for example, may happen because you’ve stretched your collection page from limited width section to full-bleed with CSS modifications, but theme code is unaware of this…

Fixing this would require theme code edit which is impossible to suggest without knowing your theme and its code.

Be also aware of “solutions” suggesting to use “master” images, or images which are too big – this will penalize your site speed ratings.

2 Likes
4

Shop address: flamontana.com

Password: asdf1234

here is an image showcasing the issue

image (70)
image (70)1000Ă—479 104 KB

1 Like
5

@user2237 try to modify this liquid file snippets > card-product.liquid
delete lines 66,67,68

{%- if card_product.featured_media.width >= 165 -%}{{ card_product.featured_media | image_url: width: 165 }} 165w,{%- endif -%}
{%- if card_product.featured_media.width >= 360 -%}{{ card_product.featured_media | image_url: width: 360 }} 360w,{%- endif -%}
{%- if card_product.featured_media.width >= 533 -%}{{ card_product.featured_media | image_url: width: 533 }} 533w,{%- endif -%}

So now you will have high resolution images with rest of codes

{%- if card_product.featured_media.width >= 720 -%}{{ card_product.featured_media | image_url: width: 720 }} 720w,{%- endif -%}
{%- if card_product.featured_media.width >= 940 -%}{{ card_product.featured_media | image_url: width: 940 }} 940w,{%- endif -%}
{%- if card_product.featured_media.width >= 1066 -%}{{ card_product.featured_media | image_url: width: 1066 }} 1066w

6

I tried just now, still no luck unfortunately

7

The code I’d look at is this:

There 3 occurrences in this file – change all of them.
This line basically says – if your screen is this width, you need to load that size image.

sizes="
  (min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 130 | divided_by: 4 }}px, 
  (min-width: 990px) calc((100vw - 130px) / 4), 
  (min-width: 750px) calc((100vw - 120px) / 3), 
  calc((100vw - 35px) / 2)"

For the way your collection page looks now you need to make it:

sizes="
  (min-width: 990px) calc((100vw - 32px) / 5), 
  calc((100vw - 8px) / 2)"

Can even make it:

sizes="(min-width: 990px) 20vw, 50vw"

This would load images a bit bigger than needed, but it’s not precize anyway.

1 Like
8

@user2237 It was the card-variant-swatch-custom.liquid file which overrides the srcset on click

2 Likes
9

Which is not a default snippet file for Dawn based themes dawn/snippets at main · Shopify/dawn · GitHub.
This is why upfront critical information matters.

1 Like