Shopify themes, liquid, logos, and UX
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/
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!
Where do i have to paste this ??
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>
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.
Where do i have to paste this ??
Hi @Sohayl67
Are you going to paste the code to your theme? Since it's about the image loading time actually. And it does not affect much on the user experience. Then you can disregard it. Or you can consider using the speed up app to improve the site loading time further.
Thank you!
Best,
Daisy - Avada Support Team.
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.
Find Global Growth Opportunities For Your Business with Shopify AcademyLearn how to exp...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025