Image with Text section Images are blurry in Dawn

Store Design
1

Hi guys,

When I upload an image to the Image-with-Text section of my homepage, the image is showing blurry. I have tried different formats and sizes and all end up looking blurry.

www.reporting.io

Thanks!

2 Likes
2

@jackreports

yes, please send that section code

3

Hi @jackreports ,

Please go to image-with-text.liquid file and change code here:

before
before1329×694 82.6 KB

after
after1305×523 57.4 KB

Code:

Hope it helps!

2 Likes
4

Hi thanks so much. I changed as you said and it seems it has improved. Although still a little blurr.

I have attached original side by side with on site.

New Project (4).png
New Project (4).png1228×731 310 KB

Appreciate your help!

5

Hi @jackreports ,

I checked and the image already shows the original image, so it won’t be possible to edit the code to show it more clearly. Can you redesign the image with a smaller size (1109 × 775 px) and a better resolution? I think it will display well.

If it helped you solve your issue, please mark it as a solution. Thank you and good luck.

6

Hey, i tried to find the code snippet in the file, but I could not find it. I updated to the latest version of DAWN theme. I am having the same issue with blurry images

7

Default code in the latest version of the DAWN theme:

{%- if section.settings.image_behavior == 'ambient' -%}
            {%- assign widths = '198, 432, 642, 900, 1284, 1800' -%}
            {%- capture sizes -%}
              (min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | divided_by: 1.6667 }}px,
              (min-width: 750px) calc((100vw - 130px) / 1.667), calc((100vw - 50px) / 1.667)
            {%- endcapture -%}
          {%- else -%}
            {%- assign widths = '165, 360, 535, 750, 1070, 1500' -%}
            {%- capture sizes -%}
              (min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | divided_by: 2 }}px,
              (min-width: 750px) calc((100vw - 130px) / 2), calc((100vw - 50px) / 2)
            {%- endcapture -%}
          {%- endif -%}

Updated code:

Code changed about Line 27

Captura.PNG
Captura.PNG1494×506 41.1 KB

There have been many updates. I see the default code much more optimized, even so the new code allows images and gifs to not lose resolution or quality, regardless of the size of the device.

I hope it helped you!

8

Thank you very much

1 Like
9

I have struck a balance between image quality and page load performance. By the way, I am using 4k image files. I’m telling you this because I’ve been experiencing charging issues on mobile devices.

With this new code you will have enough quality and better performance for all kinds of image resolutions and devices.

Replace the code:

For this new code:

I am using this code in my store. Now it works much better!

1 Like
10

Thank you! the previous answer was making my image too crisp lol, this code works like a charm. Cheers

1 Like