Low image quality in lightbox view

Hi,

I faced an issue with the lightbox mode and wondered if anyone could help me.

When I click on my photos to see them in lightbox, their quality is really poor. I upload 2048px 96ppi images, about 1-2MB size each of them. 

To avoid reduction/increase image quality I tried different resolutions like 1500x999px, 2500px on the long side, etc. - didn't help. I have also tried using a few custom CSS, they did not help much either. Read almost every article and forum in google related to this topic - nothing. Maybe someone could help me? I am really devastated that lightbox reduces my image quality as I am a professional photographer and the whole point of my website is to show high-quality images. And now I cannot!

Maybe there is other option or working CSS. Any help is appreciated!

@tuanphan I noticed your excellent help for others - any ideas would be appreciated!

On 8/26/2023 at 3:28 AM, Gabyje said:

Hi,

I faced an issue with the lightbox mode and wondered if anyone could help me.

When I click on my photos to see them in lightbox, their quality is really poor. I upload 2048px 96ppi images, about 1-2MB size each of them. 

To avoid reduction/increase image quality I tried different resolutions like 1500x999px, 2500px on the long side, etc. - didn't help. I have also tried using a few custom CSS, they did not help much either. Read almost every article and forum in google related to this topic - nothing. Maybe someone could help me? I am really devastated that lightbox reduces my image quality as I am a professional photographer and the whole point of my website is to show high-quality images. And now I cannot!

Maybe there is other option or working CSS. Any help is appreciated!

Squarespace images are optimized when you upload them and will be produced into 7 sizes 100 300 500 750 1500 2500, on mobile they will be likely served as the smaller version of the image, that may cause the blurry.

https://support.squarespace.com/hc/en-us/articles/206542517-Formatting-your-images-for-display-on-the-web?platform=v6&websiteId=615d0bdeb9e47e1e585827d3#toc-how-do-my-images-resize-for-different-devices-

I've addressed this issue on my plugin Lightbox Studio, where it will try to display the max size of images at 2500w, even when it is mobile, if you have a budget, consider checking it here , it also help your customer to pinch zoom to enlarge the images on mobile

PS: if you are having a site, please share URL so I can make a dedicated playground for your site to check plugin in action