Shopify reduces image quality of image banner photo

kitchencrafted · ‎08-09-2023

Hello, guys! For some reason shopify reduces the image quality of my image banner, can someone help me, please?

My site: https://fddd3f.myshopify.com/

Password: asd321

Link to photo: https://postimg.cc/xJZwqZPS/6ddb048d

PageFly-Noah · ‎08-09-2023

Hi @kitchencrafted

This is Noah from PageFly - Shopify Page Builder App

Please help me to follow the steps below to fix this issue

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: go to image-banner.liquid and replace the code here:

By this code:

<img
        src="{{ section.settings.image | img_url: 'master' }}"
        alt="{{ section.settings.image.alt | escape }}"
        loading="lazy"
        class="{{ image_class }}" 
        width="{{ section.settings.image.width }}"
        height="{{ image_height }}"
      >

And here:

By this code:

<img
        src="{{ section.settings.image_2 | img_url: 'master' }}"
        alt="{{ section.settings.image_2.alt | escape }}"
        loading="lazy"
        class="{{ image_class_2 }}" 
        width="{{ section.settings.image_2.width }}"
        height="{{ image_height_2 }}"
      >

Hope this can help you solve the issue

Best regards,

Noah | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!

PageFly - #1 Page Builder for Shopify merchants.

All features are available from Free plan. Live Chat Support is available 24/7.

kitchencrafted · ‎08-09-2023

Hi! Thanks for your reply. I don't find these codes in my image-banner.liquid section

PageFly-Noah · ‎08-09-2023

Can you help me by take a full screenshot in the image-banner file when you search for : {{ section.settings.image_2 please?

Please let me know if it works by giving it a Like or marking it as a solution!

PageFly - #1 Page Builder for Shopify merchants.

All features are available from Free plan. Live Chat Support is available 24/7.

kitchencrafted · ‎08-09-2023

I messaged you on private

kitchencrafted · ‎08-09-2023

This is the issue im facing

https://community.shopify.com/c/shopify-design/separate-banner-mobile-and-desktop-dawn-2-0-adding-2n...

PageFly-Noah · ‎08-09-2023

Hi, i have replied the private message, please help me check it

Please let me know if it works by giving it a Like or marking it as a solution!

PageFly - #1 Page Builder for Shopify merchants.

All features are available from Free plan. Live Chat Support is available 24/7.

quentinhro · ‎11-06-2024

Shopify by default reduce the quality with "srcset" attributed in all img. Add this to remove it in your theme.liquid (at the send of <head> html tag)

  <script>
      document.addEventListener("DOMContentLoaded", () => {
          document.querySelectorAll("img").forEach(img => {
              img.setAttribute("srcset", "");
          });
      });
    
    </script>

Shopify reduces image quality of image banner photo

Shopify reduces image quality of image banner photo

Community Blog Articles