Why is my image blurry when it's a high quality resolution image

Store Design
1

my image looks blurry on desktop, site page discussed: https://florezandco.net/products/florez-co-regrowth-brush

how can I make it look like how I exported the design in illustrator, it’s an image detailing with graphic points aspects of the product

looks blurry:

looks blurred
looks blurred2744×1108 310 KB

looks blurry here too, asked a friend and on his laptop it looks even blurrier than on mine, this on mine:

looks blurred
looks blurred3456×1320 264 KB

this is the original high resolution

original high quality
original high quality7200×2609 866 KB

2

That’s because you’ve stretched your image with CSS, but the image sizes parameter was not changed and browser loads image for half of the screen.

When browser loads the responsive image, it decides what size image file to load based on the sizes parameter which in your case is:

sizes="(min-width: 750px) 50vw, 100vw"

Which means – image will cover entire browser width on small screens (50vw), but if the browser is wider than 750px, image will cover only half of the browser width (50vw).

This is why your image is loaded with approximately half of the required resolution.

I understand that you want to show one image on desktop and another on mobile.

For this my suggestion would be to create 2 sections instead, each with single image – one section for desktop and another for mobile.

Desktop section would need this “Custom CSS”:

@media (max-width: 749px) {
  .banner__media,
  .banner__content {
    display: none;
  }
}

Mobile section will have this “Custom CSS”:

@media (min-width: 750px) {
  .banner__media,
  .banner__content {
    display: none;
  }
}

And you would not need other Custom CSS rules you’ve already have, because you would be able to separately control section height for desktop and mobile natively.

3

Hey there Jorge @jorgeisaacart You should try uploading images with a resolution of 72 pixels per inch and with dimensions that match the size you want them to display on your store. You can also use image editing tools like Adobe Photoshop to adjust the image quality before uploading it.

Let me know the results you get when you try this out.

4

it works in fixing the quality, you were right the previous code I had was messing the resolution. But look now it leaves a big gap space on desktop, and some space at the bottom on mobile. please check

5

Found the fix, use for hiding mobile:

@media (max-width: 768px) {
  .banner {
    display: none;
  }
}

for hiding desktop:

@media (min-width: 767px) {
  .banner {
    display: none;
  }
}
6

thanks, but it turns out it was a css code error on my part, I appreciate the help though