Different Images for Desktop vs Mobile Pixilation Issue

[WK100]

Hey There! I am wanting to display different Image Banners for users on Desktop vs Mobile. I am using the following code within ‘section-image-banner.css’ to do so:

.banner__media:first-child {
width: 100%;
}
.banner__media+.banner__media {
display: none;
}
@media screen and (max-width: 749px) {
.banner__media:first-child {
display: none;
}
.banner__media+.banner__media {
width: 100%;
display: block !important;
}
}
@media screen and (max-width: 749px) {
.banner__content::before{
padding-bottom: 150% !important;
}
}

This code is working great to get the different images to display but the issue is that it makes the desktop image pixelated and low quality vs what is should look like. The mobile version works great. See below:

High Quality (what it should look like):

Low Quality (what it currently looks like):

Anyone got any ideas to fix this pixilation issue that I am having on the desktop version?

Link to website: https://539htluqdx2s5kuo-81877893427.shopifypreview.com

[DitalTek]

Hi,

To solved issue you can add further css to your site.

@media only screen and (min-width: 768px){
  .banner .banner__media > img{
     object-fit: contain;
  }
}

[Dan-From-Ryviu]

Hi @WK100

You can solve the issue with quality of image by go to your Online store > Themes > Edit code > open image-banner.liquid file, find this line of code

assign widths = '375, 550, 750, 1100, 1500, 1780, 2000, 3000, 3840'

Change to this

assign widths = '375, 550, 750, 3000, 3000, 3000, 3000, 3000, 3840'