Why are my multicolumn images appearing too blurry?

Solved

Why are my multicolumn images appearing too blurry?

hitesh01
Tourist
22 0 1

multicolumn images are too blurry

store:https://www.aesthetixme.shop/

theme: craft

hitesh01_0-1707131956311.png

hitesh01_1-1707131983496.png

 

 

Accepted Solution (1)
Spac-es
Shopify Partner
406 119 153

This is an accepted solution.

Alright! So, to do that, you'll first need to find the file name, it should be something like multicolumn-image.liquid or similar. Once you're in, you'll need to delete the code responsible for the resolutions; this should be located at the beginning of the document and might look something like this:

{%- liquid
  if section.settings.image_behavior == 'ambient'
    assign half_width = '60vw'
    assign full_width = '120vw'
    assign stacked_sizes = '(min-width: 750px) 60vw, 120vw'
    assign widths = '450, 660, 900, 1320, 1800, 2136, 2400, 3600, 7680'
  else
    assign half_width = '50vw'
    assign full_width = '100vw'
    assign stacked_sizes = '(min-width: 750px) 50vw, 100vw'
    assign widths = '375, 550, 750, 1100, 1500, 1780, 2000, 3000, 3840'
  endif
-%}

When you do that, you'll notice lines of code highlighted in orange in the document; you can delete these lines as well.

Hope you can manage it, and if you have any doubts, feel free to ask me!

 

Before:before.PNG

After: after.PNG

 

Any donation is welcome! https://www.buymeacoffee.com/spacescoffee Thanks in advance!

View solution in original post

Replies 3 (3)

Spac-es
Shopify Partner
406 119 153

In Shopify themes, many people face the same issue, which is image resolution. This is largely because these resolutions are tightly adjusted and edited by code for web optimization and SEO positioning. However, in certain stores or sections like your sample image, this code does more harm than good. To enhance the resolution, you would need to remove the source code. It might affect the store's speed when loading these images, but it would improve their resolution. I can't pinpoint exactly which file and code to remove at first glance. I could do it, but you would have to grant me access to your store's code.

Any donation is welcome! https://www.buymeacoffee.com/spacescoffee Thanks in advance!
hitesh01
Tourist
22 0 1

I comfortable with code

You just tell me I will remove the code

Thank you

Spac-es
Shopify Partner
406 119 153

This is an accepted solution.

Alright! So, to do that, you'll first need to find the file name, it should be something like multicolumn-image.liquid or similar. Once you're in, you'll need to delete the code responsible for the resolutions; this should be located at the beginning of the document and might look something like this:

{%- liquid
  if section.settings.image_behavior == 'ambient'
    assign half_width = '60vw'
    assign full_width = '120vw'
    assign stacked_sizes = '(min-width: 750px) 60vw, 120vw'
    assign widths = '450, 660, 900, 1320, 1800, 2136, 2400, 3600, 7680'
  else
    assign half_width = '50vw'
    assign full_width = '100vw'
    assign stacked_sizes = '(min-width: 750px) 50vw, 100vw'
    assign widths = '375, 550, 750, 1100, 1500, 1780, 2000, 3000, 3840'
  endif
-%}

When you do that, you'll notice lines of code highlighted in orange in the document; you can delete these lines as well.

Hope you can manage it, and if you have any doubts, feel free to ask me!

 

Before:before.PNG

After: after.PNG

 

Any donation is welcome! https://www.buymeacoffee.com/spacescoffee Thanks in advance!