Jump to content

Low image quality in lightbox view

Recommended Posts

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!

Edited by Gabyje
Link to comment
  • 2 months later...
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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.