Search…

X3 Photo Gallery Support Forums

Search…
 
Herman K
Topic Author
Posts: 9
Joined: 27 Feb 2019, 18:20

Zoomed images in portrait orientation have incorrect resolution

28 Feb 2019, 02:32

Hi,
probably it is relevant for other image sizes and display resolutions too, but in my case conditions are the following:

1) Upload any image with width = 1666, height = 2500 without any resizing
2) Open popup viewer on any 1920x1200 or 1920x1080 display
3) Click zoom
Image will have correct size but it is upscaled from lower resolution (800x1200) and looks blurry:
bug3.PNG
bug3.PNG (20.04 KiB) Viewed 258 times
It works fine on 4K display.
Also zoom works perfect for horizontal images with same dimensions (2500x1666) on any display.

Thanks.
 
User avatar
mjau-mjau
X3 Wizard
Posts: 11619
Joined: 30 Sep 2006, 03:37

Re: Zoomed images in portrait orientation have incorrect resolution

28 Feb 2019, 05:57

Hi. Some more info provided please: What is the link? I tried from your screenshot, but that subdomain is either down, or not accessible.

I see in your screenshot that your image was resized to 800 px width and 1200 px height, which would correct. If your screen is only 1200 or 1080 px height, then it can't display quality higher than that. Now why you are able to zoom IN to 1666 x 2500, I can only check if you have a link. This is not how X3 works, and it well never (I have to emphasize that word) upscale an image, unless there is something related to high-DP displays or browser/OS zoom. Also unclear where you get that screenshot from.
 
Herman K
Topic Author
Posts: 9
Joined: 27 Feb 2019, 18:20

Re: Zoomed images in portrait orientation have incorrect resolution

28 Feb 2019, 06:20

Here is the link:
http://test.niflheimr.is/test/

It is fresh test installation of x3, but behavior should be same on any other environment.

Screenshot is from firefox - right click on image and "view image info"

Here how it looks on entire screen, first is default view, second after clicking zoom.
img1.jpg
img1.jpg (326.89 KiB) Viewed 249 times
img2.jpg
img2.jpg (488.35 KiB) Viewed 249 times
 
Herman K
Topic Author
Posts: 9
Joined: 27 Feb 2019, 18:20

Re: Zoomed images in portrait orientation have incorrect resolution

28 Feb 2019, 06:24

And it is not resized during upload - in panel I can view original size without upscaling from 800px.
This is direct link to the image that panel displays http://test.niflheimr.is/content/test/DSC03650V1.jpg without adding any w800 to url.
Attachments
Capture.JPG
Capture.JPG (293.89 KiB) Viewed 249 times
 
User avatar
mjau-mjau
X3 Wizard
Posts: 11619
Joined: 30 Sep 2006, 03:37

Re: Zoomed images in portrait orientation have incorrect resolution

28 Feb 2019, 06:48

Thanks for the detailed reply. I will test later in 1920 x 1080, but I'm thinking this might be a bug ... In the cases where the X3 popup determines that it is useful to serve a downsized version of the image, it doesn't update width/height values internally, which causes the zoom mechanism to think image size is that of the original.

PS! The panel popup will always serve the non-resized original, because this is mostly useful for the owner.

I will post back here shortly.
 
Herman K
Topic Author
Posts: 9
Joined: 27 Feb 2019, 18:20

Re: Zoomed images in portrait orientation have incorrect resolution

28 Feb 2019, 07:04

In the cases where the X3 popup determines that it is useful to serve a downsized version of the image
As far as I remember previous version after zooming in also showed vertical images as resized versions from w800 urls, but without upscaling to original resolution.
But in fact I think that it always was strange that zoom factors for vertical and horizontal images are different. After zooming in images are usually expected to be seen as original image in 100% scale, like panel does or like it works for horizontal images.
 
User avatar
mjau-mjau
X3 Wizard
Posts: 11619
Joined: 30 Sep 2006, 03:37

Re: Zoomed images in portrait orientation have incorrect resolution

28 Feb 2019, 07:53

Herman K wrote:As far as I remember previous version after zooming in also showed vertical images as resized versions from w800 urls, but without upscaling to original resolution.
Yes, previous versions also served scaled down images for smaller screens. However, there were lots of optimizations in latest release, but it seems I overlooked something. Ultimately, resized calculations are calculated after the popup opens now, with faster code, instead of being calculated on page load. The issue will be fixed.
Herman K wrote:But in fact I think that it always was strange that zoom factors for vertical and horizontal images are different.
What do you mean zoom factors are different for vertical and horizontal images? There is no zoom "factor". When clicking the zoom button, an image should zoom into it's original loaded dimensions, regardless of vertical or horizontal.

Both vertical and horizontal images may be served resized, but if you are viewing from a desktop, chances are MUCH higher that a vertical image will get resized, because it does not match the aspect of the screen. A vertical images long side has to fit inside your horizontal display's short side.
Herman K wrote:After zooming in images are usually expected to be seen as original image in 100% scale, like panel does or like it works for horizontal images.
First of all, there is no difference between horizontal images and vertical images. The only reason you may think so, is because your 1920 x 1080 px screen is downsizing some vertical images, but not horizontal images. A visitor on a small 1024 x 800 px screen would be served downsized horizontal images also. I hope you see the reason that there is much bigger chance for vertical images to be served downsized on your horizontal aspect desktop.

Also, if you want ZOOM to "original" image instead of the loaded image, that would cause a WAIT after clicking zoom, while the original image was loaded. Besides, why would a visitor on a 1024 X 800 px screen (or mobile device) need to wait for a 900 KB 2500 x 1666 image, when their screen cannot handle more than 1024 X 800? The downsized image will be less than 25% file size of the original, and this is useful content optimization for smaller screens, which also may be on slower connections. Don't you want your images to load fast?

It would be counter-productive to always load original images, regardless of screen size, just IN CASE the visitor is going to zoom. That would be slow, overkill and unproductive. It's logical to load a "best" image size, where the image is displaying fully visible, into the visitors screen. That is how 99% will be viewing it. I don't know many visitors who actually use the zoom button ... I certainly don't. Perhaps if I was purchasing an image and wanted to see the details ... If not, I want to see the entire image. Point being, it's generally a bad idea to blindly load full original image, with quality excessive of what the display is capable of displaying.

About the panel popup. It's safe to conclude that speed and image size optimization is not crucial for the panel user and website owner. Besides, it makes sense that the website owner always wants to review the original image they uploaded.
 
Herman K
Topic Author
Posts: 9
Joined: 27 Feb 2019, 18:20

Re: Zoomed images in portrait orientation have incorrect resolution

28 Feb 2019, 08:33

What do you mean zoom factors are different for vertical and horizontal images? There is no zoom "factor". When clicking the zoom button, an image should zoom into it's original loaded dimensions, regardless of vertical or horizontal.
Yes, after clicking it should, and it does not does so and continues using scaled down version instead for zoomed view, so zoom button in previous version was useless for vertical images, it did almost nothing - increased just a bit pixels more, in this version it correctly resizes <img> element, but does not replaces its src with original full size image link.

I totally agree with you that serving scaled down images for regular viewing without zooming is better, I do not argue with that. Point is that I expect to see original image by clicking zoom on any device regardless of screen sizes, aspect ratios e.t.c., without it purpose of zoom button is unclear.
 
User avatar
mjau-mjau
X3 Wizard
Posts: 11619
Joined: 30 Sep 2006, 03:37

Re: Zoomed images in portrait orientation have incorrect resolution

28 Feb 2019, 10:18

Herman K wrote:Yes, after clicking it should, and it does not does so and continues using scaled down version instead for zoomed view, so zoom button in previous version was useless for vertical images, it did almost nothing - increased just a bit pixels more, in this version it correctly resizes <img> element, but does not replaces its src with original full size image link.
First of all, just to clarify, current version has a BUG which you are currently experiencing with your vertical image. It is supposed to zoom in to the size of the loaded image, NOT the dimensions of the original uploaded image, which are WRONG for the loaded image.
Herman K wrote:I totally agree with you that serving scaled down images for regular viewing without zooming is better, I do not argue with that. Point is that I expect to see original image by clicking zoom on any device regardless of screen sizes, aspect ratios e.t.c., without it purpose of zoom button is unclear.
Of course, as you must understand, what you are asking for here is that when the "zoom" button is clicked, a "loading" dialog would first appear. Only after the original image is fully loaded, would the zoom effect apply (as opposed to having the zoom effect apply instantly like now). This would be further complicated on touch devices that use "pinch" to zoom.

Furthermore, the amount of "zoomability", even for original images, is relative to the original image vs display size. For example, an original image size 1600 px would not have any zoom at all on a 1920 px display (it's already displaying at full size), while on a 1024 px display, there would be at least 50% zoomability for the same image. So as you must understand, the amount of zoom available is always arbitrary ... It might be a lot, very little, or nothing at all, depending on the display size vs the original image size.

The last option of course, is to always load the full size original image, even on small screens. This of course may lead to the visitors having to load 100 MB of data, on small mobil devices, when swiping through 100 images, instead of 25 MB of data where images are optimized for the display.

As for "the purpose of the zoom button", I see your point, but the idea is to be able to zoom loaded images to their actual size, since they will always be scaled down slightly in the browser to fit the viewport (unless the original image is smaller than display size). The zoom button is of course optional and personally I don't use it or see others using it much either. It's optional behavior for the popup mechanism to zoom in the current image to it's actual size. This is how modern popups normally work (for example Photoswipe, see demo) ... To incur a DIFFERENT image (larger) to load after clicking zoom, would require some disrupting behavior of having to wait for an image to load before the zoom applies.

With the above in mind, I'm not sure what you are suggesting? I haven't seen any other popup/gallery function like this, unless they are blindly loading full original images into all devices, regardless of display size. Perhaps they might have a "Download" button (which X3 also has), that always triggers the original image, but this does not translate into dynamic "zoom" functionality directly from the zoom button.

At best, I can only think of a solution where the "original" image would start loading AFTER zoom is clicked. While the original image is loading, the intermediate image would display at original image dimensions, but it would appear blurry of course. When the original image is loaded, it would replace the blurry image.

Happy to hear your thoughts, but please understand the logical implications of such behavior.
 
Herman K
Topic Author
Posts: 9
Joined: 27 Feb 2019, 18:20

Re: Zoomed images in portrait orientation have incorrect resolution

28 Feb 2019, 17:30

Thank you for such detailed replies.
Of course, as you must understand, what you are asking for here is that when the "zoom" button is clicked, a "loading" dialog would first appear. Only after the original image is fully loaded, would the zoom effect apply (as opposed to having the zoom effect apply instantly like now). This would be further complicated on touch devices that use "pinch" to zoom.
Well, when I first time saw that loaded image is resized to original dimensions I thought that you tried to implement some kind of such behavior in new version, but it turned out that no.
So as you must understand, the amount of zoom available is always arbitrary ... It might be a lot, very little, or nothing at all, depending on the display size vs the original image size.
Well, yes, it is arbitrary if we talk about ratio between screen resolution and image resolution. But on the other hand maximum zoom (and if there is no zoom slider, single button is expected to zoom as much as possible) usually means displaying original image pixels to device pixels 1:1, and usually called "Full Size" or "100%" this is how almost every image viewer software works. - if image is lesser than screen then no zoom is available, if image is greater then will be displayed crop from it, and crop size depends on screen resolution, but amount of details that can be seen is always the same on any device, on smaller resolution screens just more panning will be required.
I haven't seen any other popup/gallery function like this, unless they are blindly loading full original images into all devices, regardless of display size.
OneDrive for example uses downscaled images for optimal performance like here, and replaces image with another larger ones, up to original image, when zoom is changed.
With the above in mind, I'm not sure what you are suggesting?
...
To incur a DIFFERENT image (larger) to load after clicking zoom, would require some disrupting behavior of having to wait for an image to load before the zoom applies.
...
At best, I can only think of a solution where the "original" image would start loading AFTER zoom is clicked.
Yes, I'm suggesting that after clicking + button replacing loaded optimal image with original to have ability to view full size by zoom like in cloud and desktop image viewers. But I see that according to your explanations such thing was not considered in initial gallery design, and probably is not very easy to implement, so summing up this is just "nice to have feature".

Today I had written prototype of custom script for adding it to Custom Code in settings which does something like this - it hooks zoom button click and replaces image link, it is hastily written weird workaround that I will gradually rewrite, check and improve, but it basically does such thing, perhaps it may be enough for me.
Code
function x3_load_page(){
    $(document).bind('DOMNodeInserted', function(event) {
      var btn = document.getElementsByClassName("pswp__button--zoom");
      if(btn.length !== 0)
      {
        btn[0].onclick = function(e) 
        { 
          var img = Array.from(document.getElementsByClassName("pswp__img"));
          img.forEach(function(item) {
            if(item.src !== undefined && item.parentElement.className.includes("pswp__zoom-wrap"))
            {
              var index = item.src.indexOf("/render/");
              if (index > 0)
              {
                var lastIndex = item.src.indexOf("/", index + 8);
                var firstPart = item.src.substring(0, index);
                var lastPart = item.src.substring(lastIndex);
                item.src = firstPart + "/content" + lastPart;
              }
            }
          });
        };
      }  
    });
  }
 
User avatar
mjau-mjau
X3 Wizard
Posts: 11619
Joined: 30 Sep 2006, 03:37

Re: Zoomed images in portrait orientation have incorrect resolution

01 Mar 2019, 02:41

Herman K wrote:Well, when I first time saw that loaded image is resized to original dimensions I thought that you tried to implement some kind of such behavior in new version, but it turned out that no.
Just a coincidental side-effect of the bug, which mistakingly bases the "zoom" on the original image's dimensions, instead of it's own dimensions.
Herman K wrote:Well, yes, it is arbitrary if we talk about ratio between screen resolution and image resolution. But on the other hand maximum zoom (and if there is no zoom slider, single button is expected to zoom as much as possible) usually means displaying original image pixels to device pixels 1:1, and usually called "Full Size" or "100%" this is how almost every image viewer software works. - if image is lesser than screen then no zoom is available, if image is greater then will be displayed crop from it, and crop size depends on screen resolution, but amount of details that can be seen is always the same on any device, on smaller resolution screens just more panning will be required.
Yes. Pointless to debate back and forth, and I don't disagree with you. The popup as is, will simply zoom to the loaded images 1:1 pixel size.
Herman K wrote:Yes, I'm suggesting that after clicking + button replacing loaded optimal image with original to have ability to view full size by zoom like in cloud and desktop image viewers. But I see that according to your explanations such thing was not considered in initial gallery design, and probably is not very easy to implement, so summing up this is just "nice to have feature".
Yes, it would be nice if it always "zoomed-to-original-uploaded", although there are several logical issues to resolve. I don't rate X3 website on same level as OneDrive, which is a "hosted" application, which takes full control of all your files/names, and resizes on their servers as they want, without any server restrictions on memory. Also, desktop applications only have to deal with the original image in the first place, and resizing simply happens in real-time based on the original ... As opposed to the web, where we first need to LOAD an appropriate image size into browser. Also, just for reference, I can't see this feature implemented in any self-hosted gallery website application.

Before implementation, I would have to plan properly based the following scenarios:
  • Loading of zoomed version would incur a "wait" after zoom click, in which case the "blurry" intermediate image would display until the original is loaded. Loading would have to be aborted if user navigates to a different image before the "original" is loaded.
  • We wouldn't want to simply "replace" the image, as that would remove the intermediate image while the original is loading. We need to create a new layer, or inject the original image after it's loaded.
  • I am not convinced that it is always the best choice to load the original images on zoom for ALL devices. From your perspective, you have planned your original image sizes appropriately. Many X3 users have not thought about this scenario. Some originals might be massive, and a mobile user simply might not want to incur a 2MB additional load just because they pinch the display slightly.
  • The zoom button does not display on touch mobile devices, who will instead pinch to zoom. Therefore, the replacement would have to happen on zoom event, not just on zoom button click.
  • For clear reference, including this feature would mean locking the zoom value to original image dimensions (basically like the bug does). That means the image will display as blurred until original is loaded.
I may sound negative, but I have to consider all scenarios. All in all, it seems like a very good idea. I will look into it shortly, while also fixing the bug. Thanks for all the feedback!
Code
function x3_load_page(){
    $(document).bind('DOMNodeInserted', function(event) {
      var btn = document.getElementsByClassName("pswp__button--zoom");
      if(btn.length !== 0)
      {
        btn[0].onclick = function(e) 
        { 
          var img = Array.from(document.getElementsByClassName("pswp__img"));
          img.forEach(function(item) {
            if(item.src !== undefined && item.parentElement.className.includes("pswp__zoom-wrap"))
            {
              var index = item.src.indexOf("/render/");
              if (index > 0)
              {
                var lastIndex = item.src.indexOf("/", index + 8);
                var firstPart = item.src.substring(0, index);
                var lastPart = item.src.substring(lastIndex);
                item.src = firstPart + "/content" + lastPart;
              }
            }
          });
        };
      }  
    });
  }
I can't see anything wrong with the inner code itself, although from my side I will have to implement it properly with a few more scenarios in mind.
  • The popup may include THREE images (two invisible images preloaded on either side of current image), and it seems your code will trigger replacement on all three on zoom click.
  • The above code will not work on touch devices.
  • I don't think it would work properly, because you would also need to feed the popup with info that the loaded image has increased in size to original. The popup will need to adjust it's internal mechanics that control the layout of the zoomed image.
I would probably recommend you to wait, although you clearly have technical abilities. I will look into it.
 
User avatar
mjau-mjau
X3 Wizard
Posts: 11619
Joined: 30 Sep 2006, 03:37

Re: Zoomed images in portrait orientation have incorrect resolution

05 Mar 2019, 10:53

Popup ZOOM always show ORIGINAL
The suggested feature to always show "original" image on zoom has now been added to X3.27.6. In cases where downsized images have been loaded into the popup, "zoom" event will cause the original image to load, effectively replacing the downsized image. The zoom event triggers on zoom button click, touch spread and double-tap (mobile devices, or if image click is set to "zoom" in popup settings).

In most cases, original size images will already be loaded into the popup, in which case no changes will occur on zoom. Resized images may on occasion be served to small mobile devices or to low-res desktops, especially vertical aspect images on horizontal aspect desktop displays. For optimal performance, it's vital to serve downsized images on devices incapable of showing higher detail (until zoomed).
 
Herman K
Topic Author
Posts: 9
Joined: 27 Feb 2019, 18:20

Re: Zoomed images in portrait orientation have incorrect resolution

10 Mar 2019, 04:39

Wow, Thanks! It is wonderful.