Is there a way to disable the aggressive image compression? - Sense Theme srcset problem

[akolea]

Wow. Ok, reading some of these threads and the suggestions for image size/resolution. I think it was the "Make sure your image is less than 4k square and less than 20mb" Seriously, no one should be uploading any images above 1mb. 20 mb is completely out of this world for web let alone any screens. Its all going to downres at that size. 

I imagine Shopify put their aggressive image compression into place for people that constantly upload images straight out of the camera without cropping and compressing. I get it, people that don't know web design assume the higher the resolution (size/weight) the better right? Bigger is always better right? 

How do we disable this. I feel like this definitely needs to be a setting to disable the aggressive compression. I am also noticing an issue with the srcset on the Sense theme. It seems to be taking the 360px images and blowing them up to the 720px size. This on top of the over compression of my already compressed images makes a nice hamburger soup but not the intended results for my professionally shot product photography. 

I did see a note that if we want to use images that are not over compressed to host them somewhere else. Is that the only solution? 

[LitCommerce]

Hi @akolea,

Please go to snippets > card-product.liquid file and change code here:

beforeafter

Code:

<img
                src="{{ card_product.featured_media | img_url: 'master' }}"
                alt="{{ card_product.featured_media.alt | escape }}"
                class="motion-reduce"
                {% unless lazy_load == false %}loading="lazy"{% endunless %}
                width="{{ card_product.featured_media.width }}"
                height="{{ card_product.featured_media.height }}"
              >

              {%- if card_product.media[1] != nil and show_secondary_image -%}
                <img
                  src="{{ card_product.media[1] | img_url: 'master' }}"
                  alt="{{ card_product.media[1].alt | escape }}"
                  class="motion-reduce"
                  loading="lazy"
                  width="{{ card_product.media[1].width }}"
                  height="{{ card_product.media[1].height }}"
                >
              {%- endif -%}

Hope it helps!

[Bison]

THANK YOU THANK YOU THANK YOU

[marcjames]

Thank you for this! I was going crazy trying to figure out why none of the images would load clearly.

[rene94]

Hi I did this and it worked on my products page when you click on a product it's still blurry, it's more noticable on mobile could you help with this please?

[rene94]

website is https://t6qvm18822usukl1-74826613002.shopifypreview.com

using dawn theme, thank you