Header images - displays in bad quality on mobile

Site URL: https://spinach-keyboard-w7ws.squarespace.com/

Hello!

All the header images on the site I'm building are displaying in bad quality on mobile.

It wasn't like this before. I think it happened around a week ago.

Could it be something with the new Squarespace update (when all text links also got underlined)?

I have optimised the images for web (around 500kb in size and between 1500-2000px in width)

The images are sharp on desktop (but it I shrink the browser window to "mobile size", the header image displays in bad quality)

See attached screenshots.

Hi, I have this problem too

I have the same problem. This is ridiculous. Paying for the top tier plan too. It seems to correct itself when you tilt the phone to landscape. 🤬

Squarespace support told me that the will look into the problem and find a solution👍

Oh thank god other people are having this same issue! I really hope they fix it soon - I thought I was going mad.

Same here... been looking for some way to stop this compression with no luck. 

Only happens on the very first banner image, the ones lower down on the site are performing fine.

Is there any update? I’m having the same issue.

Squarespace needs to fix this asap

Yesterday, I found a workaround to fix the bug.

<style>
@media only screen and (max-width: 780px) {
    #page section:nth-of-type(1) { 
            display: none; 
    } 
  }
@media only screen and (min-width: 781px) {  
    #page section:nth-of-type(2) { 
        display: none !important;
    }
  }
</style>

Here is what Squarespace says about the issue:

Shayler W. (Squarespace) 

Apr 20, 2021, 4:05 PM EDT 

Has anyone found a solution to this? 😞

There is no problem anymore here.

But I found a workaround to fix the bug.

<style>
@media only screen and (max-width: 780px) {
    #page section:nth-of-type(1) { 
            display: none; 
    } 
  }
@media only screen and (min-width: 781px) {  
    #page section:nth-of-type(2) { 
        display: none !important;
    }
  }
</style>

Just here to say ME TOO. Mobile images look like trash. Load time be damned I need to display these images at a higher resolution. PLEASE FIX THIS SQUARESPACE you're destroying these images with no way to adjust how they are displayed.