What's your biggest current challenge? Have your say in Community Polls along the right column.

Low Quality Issue With my pictures and Slides pictures On Dawn theme 15.0.2

Low Quality Issue With my pictures and Slides pictures On Dawn theme 15.0.2

Sohayl67
Explorer
89 0 21

Hello i have an issue with my slides and and image on my mobile version , indeed on my slide and all other pictures   are low quality but on desktop they are perfect , i don't know why . I need help please ; My themse is Dawn 15.0.2 and My store link is here : https://7968dc-f5.myshopify.com/

 

Replies 6 (6)

websensepro
Shopify Partner
1289 145 166

Hello @Sohayl67 ,

img {
  max-width: 100%;
  height: auto;
  image-rendering: auto; /* Ensures the best quality rendering */
}

@media screen and (max-width: 767px) {
  img {
    image-rendering: -webkit-optimize-contrast; /* Improves clarity on some mobile browsers */
  }
}

Thanks!
 

Need a Shopify developer?
Hire us at WebSensePro
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel or buy us a Cofee here

Free Shopify Beginner Tutorial
Sohayl67
Explorer
89 0 21

Where do i have to paste this  ??

websensepro
Shopify Partner
1289 145 166

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
img {
  max-width: 100%;
  height: auto;
  image-rendering: auto; /* Ensures the best quality rendering */
}

@media screen and (max-width: 767px) {
  img {
    image-rendering: -webkit-optimize-contrast; /* Improves clarity on some mobile browsers */
  }
}
</style>


Need a Shopify developer?
Hire us at WebSensePro
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel or buy us a Cofee here

Free Shopify Beginner Tutorial

DaisyVo
Shopify Partner
988 126 141

Hi @Sohayl67 

 

I hope you are well. 

 

Upon our checking, when the page first opens and is still loading, the images may not load in time. The slider transitions to the next image quickly, so while the image is still loading, it may appear slightly blurry. However, once the loading is complete, the images are perfectly clear, so there’s no need to worry about this.

 

Thank you!

 

Best,

Daisy - Avada Support Team. 

Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

Avada SEO & Image Optimizer - The #1 SEO solution
Sohayl67
Explorer
89 0 21

Where do i have to paste this ??

PageFly-Richard
Shopify Partner
4801 1085 1753

Hi @Sohayl67 

 

This is Richard from PageFly - Shopify Page Builder App

 

Please add this code to your theme.liquid above the </head> to get this solved

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

Step 2: click on theme.liquid and paste the code above the </head>

 

<script>

document.querySelectorAll("#MainContent img").forEach(img => {
    img.removeAttribute("srcset");
});

</script>

 

 

Hope this can help you solve the issue 

 

Best regards,

Richard | PageFly 

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


➜ Optimize your Shopify store with PageFly Page Builder (Free plan available) 


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