Dawn Theme - Image On Mobile Look Blurry

Hi @ben,

The image itself has bad quality if you try to zoom it, try to upload HD photos and check again, if you got blurry images, feel free to post again so we can check the issue origin

Kind regards,
Katrine

Hi @plaktheme,

I upload pictures with text that are vectorized, pictures with HD quality, same result. It becomes blurry on mobile.

Also, I would appreciate if you can remove the picture in your last message as a concern of rights.

Thanks,

Ben

Posted by: @ben

Hi @plaktheme,

 

I upload pictures with text that are vectorized, pictures with HD quality, same result. It becomes blurry on mobile.

 

Also, I would appreciate if you can remove the picture in your last message as a concern of rights.

 

Thanks,

Ben

A way to fix this is by doing these changes :

• From your Shopify admin, click Online store > Actions > Edit code
• Open the file image-with-text.liquid
• Change this code

<img
srcset="{%- if section.settings.image.width >= 165 -%}{{ section.settings.image | img_url: '165x' }} 165w,{%- endif -%}
{%- if section.settings.image.width >= 360 -%}{{ section.settings.image | img_url: '360x' }} 360w,{%- endif -%}
{%- if section.settings.image.width >= 535 -%}{{ section.settings.image | img_url: '535x' }} 535w,{%- endif -%}
{%- if section.settings.image.width >= 1070 -%}{{ section.settings.image | img_url: '1070x' }} 1070w,{%- endif -%}
{%- if section.settings.image.width >= 1500 -%}{{ section.settings.image | img_url: '1500x' }} 1500w,{%- endif -%}
{{ section.settings.image | img_url: 'master' }} {{ section.settings.image.width }}w"
src="{{ section.settings.image | img_url: '1500x' }}"
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)"
alt="{{ section.settings.image.alt | escape }}"
loading="lazy"
width="{{ section.settings.image.width }}"
height="{{ section.settings.image.height }}"
>

• To this one

<img
srcset="{%- if section.settings.image.width >= 165 -%}{{ section.settings.image | img_url: '' }} 165w,{%- endif -%}
{%- if section.settings.image.width >= 360 -%}{{ section.settings.image | img_url: '' }} 360w,{%- endif -%}
{%- if section.settings.image.width >= 535 -%}{{ section.settings.image | img_url: '' }} 535w,{%- endif -%}
{%- if section.settings.image.width >= 1070 -%}{{ section.settings.image | img_url: '1070x' }} 1070w,{%- endif -%}
{%- if section.settings.image.width >= 1500 -%}{{ section.settings.image | img_url: '1500x' }} 1500w,{%- endif -%}
{{ section.settings.image | img_url: 'master' }} {{ section.settings.image.width }}w"
src="{{ section.settings.image | img_url: '' }}"
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)"
alt="{{ section.settings.image.alt | escape }}"
loading="lazy"
width="{{ section.settings.image.width }}"
height="{{ section.settings.image.height }}"

>

• Click Save

Here an A/B test of an image quality on mobile view

Before

After

Please note that this code is specific to the section (Image with text ) only, more advanced changes need to be done to make the theme adapted to HD image.

In case you don't know it yet, unlike the free theme Dawn, Plak theme is extremely performed for HD images.

Kind regards,
Katrine