Image Banner Stretches and Looks Blurry on Large Monitor - Dawn Theme

Solved

Image Banner Stretches and Looks Blurry on Large Monitor - Dawn Theme

bryan76
Trailblazer
253 7 49

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!

Accepted Solution (1)

Yeady123
Explorer
61 7 9

This is an accepted solution.

  1. 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 way, the browser can choose the best image for the screen size, ensuring the highest quality display of your images on all devices.
- Was my reply helpful? Click "Like" to let me know!
- ----Was your question answered? Mark it as an Accepted Solution
You can get in touch with me via WhatsApp on +88013-13075440
Email: shahinkhan2424ft@gmail.com

View solution in original post

Replies 7 (7)

Yeady123
Explorer
61 7 9

This is an accepted solution.

  1. 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 way, the browser can choose the best image for the screen size, ensuring the highest quality display of your images on all devices.
- Was my reply helpful? Click "Like" to let me know!
- ----Was your question answered? Mark it as an Accepted Solution
You can get in touch with me via WhatsApp on +88013-13075440
Email: shahinkhan2424ft@gmail.com
bryan76
Trailblazer
253 7 49

exactly what I was looking for.  thank you!

bryan76
Trailblazer
253 7 49

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!

TFC2
Visitor
1 0 0

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

Dh7oom
New Member
10 0 0

if you fix it help me please 

PEDANA
Visitor
2 0 0

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

PEDANA
Visitor
2 0 0

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