How can you disable image compression on mobile version?

Store Design
1

All the images I upload via the image elements from shopify get blurry on mobile while looking fine on desktop. How can I solve this? If important, I’m using the Dawn theme.

3

Hi @cvv
Can you please share the store URL. So i can check and guide you.

4

Sure, the store url is exivonutrition .com, the pw is jdienri8476684

5

Hi @cvv
Thank you for the URL

Can you point out any specific sections on store where it get blurry

If possible share me screenshots of that sections so i can check it.

6

Currently I am facing the issue on one specific product page.

Screenshot 2025-08-11 124338
Screenshot 2025-08-11 124338814×913 86.7 KB

That payment section is the image.

7

Hi @cvv

You can follow the steps below to fix this issue
Go to your Online Store

  1. Click on “Themes.”
  2. Select “Edit code”
  3. Search image-with-text.liquid
  4. Open the file,
  5. Check below screen shot remove the mentioned sizes it should look like this 
    1.  {%- assign widths = '535, 750, 1070, 1500' -%}

      image
      image1462×811 74.4 KB

8

Thanks for the tip, but I tried it and it didn’t work.

Screenshot 2025-08-11 131645
Screenshot 2025-08-11 1316452017×1221 332 KB

9

Hi @cvv,

Please add image and send me the link. I will check it

11

Hi namphan,

here is the image:

Your payment information is protected with bank-level security and fraud detection. Additional payment methods are available at checkout. (5)
Your payment information is protected with bank-level security and fraud detection. Additional payment methods are available at checkout. (5)5000×1000 211 KB

The link to the specific productpage is https://exivonutrition.com/products/ashwagandha-and-black-pepper-supplement-60-capsules?selling_plan=692401930564&variant=55301578260804

12

But I recommend to paste the link into the search engine, because for some reason I am unable to send you the link that directly leads to the page when clicking on it.

13

Hi @cvv,

Please go to Actions > Edit code > sections > image-with-text.liquid file and change code here:

Screenshot
Screenshot2090×1280 463 KB

Code:

{{
                section.settings.image
                | image_url: width: section.settings.image.width
                | image_tag: sizes: '100vw', widths: widths, fetchpriority: fetch_priority
              }}
1 Like
14

Thank you so much, that did a great job.

15

Just a warning – this will actually apply to all you “image with text” sections and will negatively affect desktop Pagespeed score causing “..properly size your images” recommendation.

1 Like
16

Hi @cvv,

It’s my pleasure :blush: