Blurry product images on first load Studio Theme

Store Design
1

Hi. I’m pretty new to Shopify but having issues with blurry product images on mobile. I’m using the Studio theme version 2.0.

Product thumbnail blurry. However when I click on the product image and then go back the image is then sharp. Any idea how I can get the image sharp when page first loads? What could be causing this?

Thanks.

2

Hi @Jamesvoce ,

It will be better if you can show us the store link so we can take a look at the issue. However, my presumption is that maybe your image files are too large that theme couldn’t load it from the start. Especially on mobile, some browsers, like Safari of iPhone can automatically optimize the image if the file is too large.

My advice is that you can try to optimize all the images and re-upload it, then check again. You can easily use some online tools to optimize images, one of my favorite is tinypng.com in case you need.

Hope this suggestion can help you solving the matter.

3

Hi. Thanks for this. I don’t think this is the issue as when I click back the image is sharp. If you view any 0agea with products on (book covers) you’ll see images are blurry. Click on one and go back and the image is sharp. At least that’s what I’m seeing on mobile.

Here’s my temp link as I would like to sort image issue before mapping domain.

https://james-voce.myshopify.com

4

I’m seeing a few (4-5) posts in regards to this issue with the Studio theme. I’ll try to state concisely what’s happening here as it seems to be the most recent along with this entry:

https://community.shopify.com/post/1618468

  • The blurred images seem to only appear on the Collection Pages and the Featured Collection homepage widget. The images that load into the Product Pages and some of the other homepage widgets do not seem to be affected.
  • I have experimented with 2000 pixel, 1000 pixel, and 500 pixel-wide uploaded images (all squares) in the product. All appear blurry on the Collection Page.
  • The blurriness is CORRECTED (oddly) if you click into the product and then go back to the Collection Page. As if the Product Page is loading a better version and the Collection Page says “Cool - I’ll use that one now.”
  • Exploring what size product image is getting loaded initially, I’m getting a Rendered Size of 558x558, with an Intrinsic Size of 360x360 - which I have to assume is causing the blurriness. Clicking on the product, and then going back to the collection page gives me a Rendered Size of 558x558 with an Intrinsic Size of 635x635 (nice and clear). So - it would seem to me that the collection pages are initially loading a product image FAR too small for the container. Note that my uploaded image for this test is 1050x1050.
  • I’m definitely not a code genius…but it looks like card-collection.liquid is not pulling in the correct image in it’s “if” statement selector. For example, this should be what my site is pulling in: {%- if card_collection.featured_image.width >= 1000 -%}{{ card_collection.featured_image | image_url: width: 1000 }} 1000w,{%- endif -%} but it seems to be erroneously pulling in {%- if card_collection.featured_image.width >= 330 -%}{{ card_collection.featured_image | image_url: width: 330 }} 330w,{%- endif -%}

You can see the example here:

https://m2rjzo242enknvzo-59349860404.shopifypreview.com

Pushkin2022

If anyone has any insight - would appreciate. Thanks.

5

I was having this issue and was able to solve it for myself:

Go into the “Customize Theme” website builder. Select the featured collection that is displaying the blurry photos. Under “Product Card” in the left-hand menu, change the Image Ratio to “Adapt to Image”.

Not sure if this is the cause of the problem for other folks, but I thought I’d post this possible solution here.