Shopify themes, liquid, logos, and UX
I have a high resolution which has text in the image itself. when I go to the site a large monitor the image looks very blurry. I have realized that this is due to Shopify's Dynamic Image Resizing. Since the largest screen size Shopify's Dawn Theme has in it's code is 1500w larger monitors need to stretch the image to fit the large screen making a perfectly good image look blurry. Does anyone know how to add larger screen size to the code so that images will have more pixels on large screens?
Thank you!
Solved! Go to the solution
This is an accepted solution.
Yes, you can add larger screen sizes to the code of your Shopify theme in order to avoid the blurring of images on large screens. You can do this by editing the CSS of your theme to add media queries that target specific screen sizes and adjust the size of images accordingly.
Here's an example of how you could add a media query for screens larger than 1500px:
@media (min-width: 1500px) {
.your-image-class {
max-width: none !important;
}
}
This will prevent the image from being resized on larger screens and will keep the image at its original size. You'll need to replace .your-image-class
with the actual class of your image element in the HTML.
Additionally, you can also add high-resolution versions of your images by using the srcset attribute in the <img>
tag. For example:
<img
srcset="your-image-1500.jpg 1500w,
your-image-2000.jpg 2000w,
your-image-2500.jpg 2500w"
sizes="(min-width: 1500px) 2500w,
(min-width: 1000px) 2000w,
1500w"
src="your-image-1500.jpg"
alt="Your image description">
This is an accepted solution.
Yes, you can add larger screen sizes to the code of your Shopify theme in order to avoid the blurring of images on large screens. You can do this by editing the CSS of your theme to add media queries that target specific screen sizes and adjust the size of images accordingly.
Here's an example of how you could add a media query for screens larger than 1500px:
@media (min-width: 1500px) {
.your-image-class {
max-width: none !important;
}
}
This will prevent the image from being resized on larger screens and will keep the image at its original size. You'll need to replace .your-image-class
with the actual class of your image element in the HTML.
Additionally, you can also add high-resolution versions of your images by using the srcset attribute in the <img>
tag. For example:
<img
srcset="your-image-1500.jpg 1500w,
your-image-2000.jpg 2000w,
your-image-2500.jpg 2500w"
sizes="(min-width: 1500px) 2500w,
(min-width: 1000px) 2000w,
1500w"
src="your-image-1500.jpg"
alt="Your image description">
exactly what I was looking for. thank you!
Can you help me find the correct code for ".your-image-class"? I just changed the image and there are several codes for each image.
Thank you!
Hi,
Can you please break down these steps a little simpler? I have no coding experience but would like the same fix please.
Thanks in advance
if you fix it help me please
Hi,
Can you please break down these steps a little simpler? I have no coding experience but would like the same fix please.
Thanks in advance
Hi Can you pls help me in where to add these codes. As i do not have coding knowledge. Pls breakdown the steps. Thank you so much
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024