Low Resolution for "Image with Text" in Chrome on Multiple Websites, Including Mine

[Cindy123Li]

I've had an issue with image resolution on my website, inkawaiishop.com, since I launched it. I have two "images with text" banners that always appear low resolution in Chrome, despite trying different image resolutions. However, they look fine in other browsers like Safari. The problem seems specific to Chrome, but other Shopify websites like sanrio.com display high resolution images in Chrome. And other websiteswhich not created by shopify display high resolution images  in Chrome. I've contacted Chrome support, but they can't adjust the resolution only suggest adjusting the zoom. My friends using Shopify and Chrome are experiencing the same problem. How can I fix this? 

Note: Issue Only with "Image with Text" in Chrome. "Image Banner" works fine.

[tim]

There is an error in this section code, makes it output smaller images then necessary.

for example:

<img src="//www.inkawaiishop.com/cdn/shop/files/banner-sep-01-64f7b58919177.webp?v=1693955503&amp;width=1500"
  alt=""
  srcset="//www.inkawaiishop.com/cdn/shop/files/banner-sep-01-64f7b58919177.webp?v=1693955503&amp;width=165 165w,
          //www.inkawaiishop.com/cdn/shop/files/banner-sep-01-64f7b58919177.webp?v=1693955503&amp;width=360 360w,
          //www.inkawaiishop.com/cdn/shop/files/banner-sep-01-64f7b58919177.webp?v=1693955503&amp;width=535 535w,
          //www.inkawaiishop.com/cdn/shop/files/banner-sep-01-64f7b58919177.webp?v=1693955503&amp;width=750 750w,
          //www.inkawaiishop.com/cdn/shop/files/banner-sep-01-64f7b58919177.webp?v=1693955503&amp;width=1070 1070w,
          //www.inkawaiishop.com/cdn/shop/files/banner-sep-01-64f7b58919177.webp?v=1693955503&amp;width=1500 1500w"
    width="1500" height="693" loading="lazy"
    sizes="(min-width: 1300px) 600px, 
           (min-width: 750px) calc((100vw - 130px) / 2), 
           calc((100vw - 50px) / 2)"
  >

Pay attention to the sizes parameter. It instructs browser which width of the image to select based on screen width.

It basically says:

• If your screen is wider than 1300px, use image with width of 600px, or
• if your screen is wider then 750px, use screen-width, subtract 130px (for padding) and divide by 2, or
• use screen width, subtract 50px (for padding) and then divide by 2 

Note that when screen is wider than 1300px, the image is actually displayed 1200px wide.

So the code always loads image which is 2 times smaller than necessary,
say for screen wider than 1300px to display image 1200px wide it uses image file which is only 600px wide.

This could've been done to make your site faster by loading "lighter" image files. This could be ok for some images, but not for the ones you're using.

Or, initially image only occupied half of the section width and text was on the other half, but now your image is using full section width...

Could also be an error in the original theme code.

For your use, the sizes code should be like this (unfortunately I can't see the source code):

sizes="(min-width: 1300px) 1200px, 
           (min-width: 750px) calc(100vw - 130px ), 
           calc(100vw - 50px)"

[Cindy123Li]

Thank you for the explanation. Sanrio.com also uses Image with Text banners and wide pictures for their banners, which display well in Chrome. My website looks good in Safari and other browsers, but not in Chrome. How can I fix this issue if I want to use wide pictures like Sanrio.com?

[tim]

sanrio uses a different theme, probably Flex? That theme uses lazysizes JS library which updates sizes parameter dynamically to match current image width.

So you can't directly compare.

On my monitors Chrome and Safari show pretty similar picture -- can you tell which is which?

Have you tried to change sizes parameter as I suggested above?

Finally, since you're using Sense, you can reach out to Shopify support with this issue

https://help.shopify.com/en/manual/online-store/themes/theme-support#free-themes-from-shopify 

[Cindy123Li]

I'm not entirely sure what you mean by "change sizes parameter" as I'm not a coding expert. My current banner size is 1218x562.5px. Could you be more specific about what needs to be done? I tried resizing the image to around 600x280px and 2436x1124px. The 600x280px was even worse, and the 2436x1124px had the same outcome in Chrome. On my end, there's a significant difference in how the banner appears in Safari compared to Chrome.