Lightbox image container responsive sizing without affecting image quality. Can it be done?

Ryncwn

Once again I must bow and beg you code-savvy geniuses for assistance. Please forgive me if this has been dealt with elsewhere but I have spent an hour searching through the archives and cannot find anything. I have also contacted SM support but received a generic reply that appeared to avoid answering the question.

Smugmug Lightbox display settings currently affect the detail and resolution of images in the lightbox but not the image container dimensions.
I would love to display my lightbox images at a responsive 70% of the browser screen, whilst still seeing maximum sharpness and resolution in the image. The display size would be set to a setting that allows all the clearest detail ( ie iPadx4 or higher ) but wouldn't have to fill the entire screen.
I have seen this done on other websites outside of the Smugmug platform and would love to be able to do this on my site too.

Does anyone think this is possible?

I tried coming up with a bit of CSS in case I got lucky, but it didn't work.
Maybe something along the lines of...
/* Adjusting lightbox image size /
.sm-lightbox-image-container img {
max-width: 70%;
max-height: 70%;
margin: auto; / Centers the image horizontally */
}

I tried using .sm-lightbox-image too but that didn't help.

Thanks in advance for any enlightenment.

rht

Can we get to see your site at all?

One of the annoying things with Smugmug is that it has a fair few "automatic" features that make styling the site more difficult.

Allen

That last Curly bracket "}" outside the */ "comment end" will interfere with your CSS.

Ryncwn

@rht said:
Can we get to see your site at all?

One of the annoying things with Smugmug is that it has a fair few "automatic" features that make styling the site more difficult.

Hi @rht, thank you very much for responding. Yes, my site is www.ryancowan.com
Thank you. ( if you need to see a gallery lightbox, then you could use this one https://www.ryancowan.com/1/Commercial/ARC/Oxford/Showcase1/Showcase2/n-mcrKXg )

Jtring

As far as I can tell, there is no general, responsive solution.

First, let me write up how I believe SmugMug handles sharpness. Free free to comment if this doesn't match your understanding. SmugMug uses a computation-intensive algorithm to create display copies of varying reduced sizes from your uploaded version. The sharpness of those copies matches the upload pretty well, although there are times I've thought the display copies might be just a very little over-sharpened in comparison. To get from the display copy (like the X4 size you mention) to what actually shows on the screen, SmugMug relies totally on the scaling algorithm in the browser on the user's computer. That final size depends on the physical size of the user's monitor, the viewport size on the screen, and any CSS that adjusts the size of the image. And that final resizing step is done on the fly so it has to be done quickly with a fairly simple algorithm. As a result, that step does not necessarily preserve the original sharpness. Different browsers use different algorithms. My personal, informal observation is the Firefox maintains sharpness better than the Chromium-based browsers (e.g., Chrome, Edge) in most cases, but that's just an impression, not the result of any pixel-peeping or measurement. I think SmugMug expected that by having several display copy sizes, the downscaling would not be that large and the sharpness loss wouldn't be that significant. Sometimes that's true and sometimes not. I've observed that downscaling by just a few pixels can produce horrible sharpness degradation while larger downscaling can be quite acceptable. It all depends on the the mysterious processes inside the browsers.

So what can be done? As noted, in general, nothing.

I use an odd mitigation on my site. I upload, using Lightroom, at a resolution limited to 1320 is the vertical dimension. I apply Lightroom's "standard" output sharpening to manage the downsampling from my original to that output size. As far as I can tell, Lightroom matches the sharpness of the downscaled upload and the sharpness of the original pretty well. On a QHD screen (2560 x 1440) or larger, with SmugMug Lightbox taking up the full screen, the uploaded image shows directly, without any further size reduction or change in sharpness. So any user on a larger screen sees the sharpness I intended. Alas, this approach is not responsive. Folks using a 4K monitor will see a fairly small image. Worse, folks with a smaller monitor will be back to the browser scaling. But at least for one class of users, my intended sharpness is available on an image that fills the screen with some matting/margin around it. (And it just so happens I own a QHD monitor.)

rht

@Ryncwn said:

@rht said:
Can we get to see your site at all?

One of the annoying things with Smugmug is that it has a fair few "automatic" features that make styling the site more difficult.

Hi @rht, thank you very much for responding. Yes, my site is www.ryancowan.com
Thank you. ( if you need to see a gallery lightbox, then you could use this one https://www.ryancowan.com/1/Commercial/ARC/Oxford/Showcase1/Showcase2/n-mcrKXg )

I had a look at the lightbox when opening one of the images and it seemed okay.

I was using two 5K screens (5120x2880 with scaling set on both to 2560x1440) on 2019 Mac Pro. The quality when I resized the browser up and down was fine.

If I set it to be at 5120x2880 (no scaling) then naturally your largest size image takes only a tiny portion of the screen. Not much can be done about that without doing hacks which will stretch the image size without showing image quality higher than your allowed maximum.