Gabyje Posted August 25, 2023 Share Posted August 25, 2023 (edited) 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 August 25, 2023 by Gabyje Beyondspace 1 Link to comment
Gabyje Posted August 25, 2023 Author Share Posted August 25, 2023 @tuanphan I noticed your excellent help for others - any ideas would be appreciated! Link to comment
Beyondspace Posted November 14, 2023 Share Posted November 14, 2023 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, video lightbox and much more) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 No-code customisations for Squarespace (+100 Spark plugin customisations) 🥳 Freemium Squarespace Widget Templates (+1000 Elfsight 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment