Mobile Product Picture Resolution

Technical Q&A
1

The Resolution for variants inside a product are very bad quality on mobile. The collection pictures aswell as the product pictures are fine, when clicking onto a product, the first variants quality is fine, however any variant you click on afterwards will be very noticeably worse quality then the initial. Even if you cycle back to the first variant the quality is bad too. The same is for every product, clicking onto the product doesn’t affect the quality however after you click to another variant every image automatically adjust to a worst quality after that. I don’t think its a resolution issue as the quality is originally fine.

Im currently on the Dawn 15.2.0 version
the store link is https://teyvatrelics.com/
This issue only seems to happen on a mobile device as when viewing the store from a mobile perspective on pc its fine.

Any suggestions or solutions would be appreciated, thanks.

2

Hi there! I checked your store and noticed the variant image quality drops on mobile due to Shopify’s adaptive image resizing (prioritizing load speed over resolution). To fix this:

  1. Optimize variant images: Ensure all variant files are 2000x2000px+ (Shopify’s recommended size) to retain quality during compression.

  2. Edit your theme code: In Dawn’s product-media.liquid, replace {{ image | image_url: width: 1400 }} with {{ image | image_url }} to force full-size images.

  3. Test lazy loading: Disable it temporarily in theme.liquid to see if it’s causing delayed HQ loads.

This should stabilize image quality across variants

3

Hi, I’ve tried changing my product images to 2000x2000px there was no improvement, When looking for {{ image | image_url: width: 1400 }} I found

{%- if media.preview_image.width >= 550 -%}{{ media.preview_image | image_url: width: 550 }} 550w,{%- endif -%}
{%- if media.preview_image.width >= 1100 -%}{{ media.preview_image | image_url: width: 1100 }} 1100w,{%- endif -%}
{%- if media.preview_image.width >= 1445 -%}{{ media.preview_image | image_url: width: 1445 }} 1445w,{%- endif -%}
{%- if media.preview_image.width >= 1680 -%}{{ media.preview_image | image_url: width: 1680 }} 1680w,{%- endif -%}
{%- if media.preview_image.width >= 2048 -%}{{ media.preview_image | image_url: width: 2048 }} 2048w,{%- endif -%}
{%- if media.preview_image.width >= 2200 -%}{{ media.preview_image | image_url: width: 2200 }} 2200w,{%- endif -%}
{%- if media.preview_image.width >= 2890 -%}{{ media.preview_image | image_url: width: 2890 }} 2890w,{%- endif -%}
{%- if media.preview_image.width >= 4096 -%}{{ media.preview_image | image_url: width: 4096 }} 4096w,{%- endif -%}
{{ media.preview_image | image_url }} {{ media.preview_image.width }}w

i also found src=“{{ media.preview_image | image_url: width: 1445 }}”

when changing {{ media.preview_image | image_url: width: 1445 }} to {{ image | image_url }} there was no improvement on the image quality for mobile.

also when looking for lazy loading inside theme.liquid there was nothing that exists there.

I have tried with the free theme Craft and the image quailty on mobile is fine I assume its a problem with the Dawn theme