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

[bryan76]

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!

[Yeady123 · 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.

[bryan76]

exactly what I was looking for.  thank you!

[bryan76]

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]

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]

if you fix it help me please 

[PEDANA]

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]

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