An image does not display in Chrome but displays in Firefox

[cokernel]

I received a report that the image https://exploreuk.uky.edu/catalog/xt7s4m919f0r_1_24 does not display in the item viewer but its thumbnail shows up in search results.

I investigated and the image does not display in Chrome but it does in Firefox, and confirmed this with the reporter.

The image should display in both browsers.

I did not observe any error messages but will take a closer look.

[cokernel]

visibility.csv

I had a hypothesis that the images might be "too big" somehow for the combination of OpenSeadragon and Chrome. I set up a dev environment and used Selenium to visit each item in the University of Kentucky campus scenes scrapbook and save a screenshot. Then I manually classified the items as "visible" or "blank" and produced a CSV of the results, together with size (in bytes), width and height (in pixels), document identifier, and file path within the AIP. I had been hoping for a clear cutoff (e.g., "all images above this size have problems displaying and none below do") but that does not appear to be the case.

[cokernel]

I don't currently believe it is a CSP or CORS issue, but if someone can provide evidence for this, I would appreciate it.

[cokernel]

I want to make sure I mention that Chrome is loading the reference image over the network just fine.

[Nealium104]

My first instinct was limits to canvas size. From MDN, it linked this which is a report of browser canvas area limits. It includes results for when published and a codepen to run limits for various devices.

The large image in the issue description has dimensions of 21904x14355, which exceed the max area for chrome which is ~16k x ~16k. Firefox is just over at ~23k x ~23k.

[Nealium104]

I also did a little spot checking of items in the visibility.csv and got differing results. I've verified the following are loading correctly in both chrome and firefox (though I do not have empirical evidence, they do seem to load a bit more slowly):
https://exploreuk.uky.edu/catalog/xt7s4m919f0r_3_16
https://exploreuk.uky.edu/catalog/xt7s4m919f0r_3_13
https://exploreuk.uky.edu/catalog/xt7s4m919f0r_3_21

[cokernel]

I noticed that some did take a while to display and had some hope that even the largest images might eventually display. For my testing I used driver.implicitly_wait(5) and slept 3 seconds between requests.

[Nealium104]

What actually concerns me is that phones will have a significantly smaller limit to canvas size. Much of the limestone work makes the size much more mobile friendly. That demo site claims 4,096 x 4,096 (16,777,216) for iOS Safari. So folks with iPhones might not be able to reasonably use the viewer for much of the catalog, depending on how common it is to have images above 16 megapixels (MP). My camera prints out 24.2 MP. 😬

[cokernel]

I suspect that we will not be able to resolve this in the short term without modifying the DIP builder to force a size cap on "reference images", which defeats the purpose of them being reference images.

When we have time and resources for this, I strongly suggest we evaluate serving images with an IIIF image server. Some options are mentioned here: https://iiif.io/get-started/image-servers/

OpenSeadragon, our image viewer, can consume IIIF tiles. I believe this would mitigate issues with image display even on devices with small max canvas sizes — theoretically we would only be requesting a bit more than would fit on the device display at any given time. https://openseadragon.github.io/examples/tilesource-iiif/

As for the Internet Archive BookReader (now called OpenLibrary BookReader), I don't know how things stand with our current stale modified fork. I did find an adapter for this specific purpose. It does not appear to have been updated in 11 years, but it might also not need to be: https://github.com/aeschylus/IIIFBookReader

[cokernel]

I also want to mention here that it would be worth gathering the range of image sizes for our current collection, preferably with a time component so we can visualize trends. It is possible to query the images directly for this information but this is also available in the Solr server, with appropriate queries, or from the MIP store which feeds the Solr server. A scatter plot or heatmap (aka "two-dimensional histogram") might be appropriate.