Landscape product photos are blurry but portrait ones are fine

Solved

Landscape product photos are blurry but portrait ones are fine

bigmountainsguy
Tourist
4 1 0

Hey everyone -

 

I'm currently using Dawn and there's a page where I'm displaying a collection of all of my photography prints. Within the product grid, the photos in portrait orientation are sharp but the photos in landscape orientation are blurry.

 

Previously, both portrait and landscape orientation photos were blurry. I fixed it by going into Snippets > card-product.liquid and replaced lines that started with 'sizes=' to the following:

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

 

So I managed to fix the blurriness for portrait orientation product photos but not landscapes. Any ideas?

 

URL: https://shop.bigmountainsguy.com/collections/all-prints

Accepted Solutions (2)

bigmountainsguy
Tourist
4 1 0

This is an accepted solution.

I fixed it by removing this block of lines.

Screenshot 2024-05-01 at 00.12.41.png

View solution in original post

tim
Shopify Partner
3911 395 1440

This is an accepted solution.

Here is the default theme code https://github.com/Shopify/dawn/blob/3f4284a1284c7c2bf3708a2f9f3c5a3bd69d0597/snippets/card-product.... :

srcset="
  {%- 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 -%}
  {%- 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,{%- endif -%}
  {{ card_product.featured_media | image_url }} {{ card_product.featured_media.width }}w
"
src="{{ card_product.featured_media | image_url: width: 533 }}"
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)
"

 

which is obviously bull**bleep** because it's hard-coded for 4-per-row for screens wider than 990px, 3-per-row for between 990 and 750 and 2 per row when less  than 750, and allowance for padding is hard-coded too.

 

Since you always have single product per row, your code

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

goes in right direction, but not quite.

 

Considering how your padding is set, it should be:

sizes="
  (min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 }}px,
  (min-width: 750px) calc(100vw - 100px),
  calc(100vw - 30px)
"

Currently on screen wider than 1200px, your image is shown 1100px wide, but width calculation produces 1070, which is 30px less than necessary.

 

However, second problem is how your srcset is done -- the widest sizes it provides are 1066pixels and then it is immediately original width of your images, which is almost 5500 for landscapes.

 

So currently, for screens wider than 1200px theme shows the image of original size. Which is a significant resize and may indeed look blurry. Your portrait images are originally about 3500px-wide, so it's less of a resize.

 

So I'd add width of 1100 to srcset and then provide for double pixel density for Retina-like screens too:

srcset="
  {%- 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 -%}
  {%- 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 >= 1100 -%}{{ card_product.featured_media | image_url: width: 1100 }} 1100w,{%- endif -%}
  {%- if card_product.featured_media.width >= 1440 -%}{{ card_product.featured_media | image_url: width: 1440 }} 1440w,{%- endif -%}
  {%- if card_product.featured_media.width >= 2200 -%}{{ card_product.featured_media | image_url: width: 2200 }} 2200w,{%- endif -%}
  
  {{ card_product.featured_media | image_url }} {{ card_product.featured_media.width }}w
"

 

This should provide proper'ish sizing and avoid loading images which are unnecessary large.

 

Hopefully, this will make them look better.

 

 

 

If my post is helpful, consider liking it -- it will help others with similar problem to find a solution.
I can be reached via e-mail tairli@yahoo.com

View solution in original post

Replies 4 (4)

bigmountainsguy
Tourist
4 1 0

This is an accepted solution.

I fixed it by removing this block of lines.

Screenshot 2024-05-01 at 00.12.41.png

tim
Shopify Partner
3911 395 1440

This means that system will always serve the original size image, even on smallest screens.

Basically it means loading image sizes that are 10 times larger. Try opening your site via mobile service now.

 

Your PageSpeed will degrade because of this.

 

If my post is helpful, consider liking it -- it will help others with similar problem to find a solution.
I can be reached via e-mail tairli@yahoo.com

tim
Shopify Partner
3911 395 1440

This is an accepted solution.

Here is the default theme code https://github.com/Shopify/dawn/blob/3f4284a1284c7c2bf3708a2f9f3c5a3bd69d0597/snippets/card-product.... :

srcset="
  {%- 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 -%}
  {%- 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,{%- endif -%}
  {{ card_product.featured_media | image_url }} {{ card_product.featured_media.width }}w
"
src="{{ card_product.featured_media | image_url: width: 533 }}"
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)
"

 

which is obviously bull**bleep** because it's hard-coded for 4-per-row for screens wider than 990px, 3-per-row for between 990 and 750 and 2 per row when less  than 750, and allowance for padding is hard-coded too.

 

Since you always have single product per row, your code

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

goes in right direction, but not quite.

 

Considering how your padding is set, it should be:

sizes="
  (min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 }}px,
  (min-width: 750px) calc(100vw - 100px),
  calc(100vw - 30px)
"

Currently on screen wider than 1200px, your image is shown 1100px wide, but width calculation produces 1070, which is 30px less than necessary.

 

However, second problem is how your srcset is done -- the widest sizes it provides are 1066pixels and then it is immediately original width of your images, which is almost 5500 for landscapes.

 

So currently, for screens wider than 1200px theme shows the image of original size. Which is a significant resize and may indeed look blurry. Your portrait images are originally about 3500px-wide, so it's less of a resize.

 

So I'd add width of 1100 to srcset and then provide for double pixel density for Retina-like screens too:

srcset="
  {%- 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 -%}
  {%- 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 >= 1100 -%}{{ card_product.featured_media | image_url: width: 1100 }} 1100w,{%- endif -%}
  {%- if card_product.featured_media.width >= 1440 -%}{{ card_product.featured_media | image_url: width: 1440 }} 1440w,{%- endif -%}
  {%- if card_product.featured_media.width >= 2200 -%}{{ card_product.featured_media | image_url: width: 2200 }} 2200w,{%- endif -%}
  
  {{ card_product.featured_media | image_url }} {{ card_product.featured_media.width }}w
"

 

This should provide proper'ish sizing and avoid loading images which are unnecessary large.

 

Hopefully, this will make them look better.

 

 

 

If my post is helpful, consider liking it -- it will help others with similar problem to find a solution.
I can be reached via e-mail tairli@yahoo.com
bigmountainsguy
Tourist
4 1 0

Hey just wanted to say thank you. I saw your first comment and did see that the page speed went down significantly. I realized I need to meet at some sort of a middle ground where images are relatively sharp and doesn’t kill the speed and then I saw your 2nd comment with everything I needed! Thank you so much!