100% zoom should display pixel-perfect image even if Windows scaling is set to more than 100%

[DimkaDim]

On modern 4K HiDPI monitors people set display scaling in Windows to higher than 100%, because text size is way too small in 100% (in fact, Windows automatically sets 150% scaling on 4K 32-inch monitor). That makes sense for text and interface elements, and it has to be done for all of the content inside a web page (otherwise page design and alignment of elements breaks), but it doesn't make sense for images opened in separate tabs.

When Windows scaling is set to, let's say, 150%, everything in Chrome renders in increased size: Chrome interface, web pages, pictures in web pages, pictures in separate tabs. I want to exclude pictures in separate tabs from that - I want them to still render pixel-perfect - at 100% size (when I initially open them), even if everything else is at 150%. That 150% scaling kills image sharpness and invalidates advantages of HiDPI screen by not using its full resolution.

Initially, to accomplish this, I had to use a combination of two extensions: Media DPI Scale Reset + Enhanced Image Viewer (by Sebastian Blask). This method had inconveniences (sometimes double-click, other times single click zoomed in the first time after opening a tab with an image). Viewhance is the best image viewer, so I would much prefer Viewhance to have an option to disregard Windows scaling setting, and I even think it should be the default behavior.

The idea of how to accomplish this is very simple: mediaCss.width = mOrigWidth / window.devicePixelRatio;

In other words, final_image_size = original_image_size / OS_scaling_factor or 100% size = 150% size as rendered by chrome / 1.5

It works, the image renders pixel-perfect without any blurring, I've checked that using images of test patterns and Photoshop color sampler.

I've already modified Viewhance's code for my personal use. But it's probably quite a dirty hack, and has problems. Viewhance's author would probably implement it correctly and everyone will have that feature with update then.

Below I describe how I've done that (in Chrome version of Viewhance) (it's probably unneeded, because the code is not good): file inside extension folder is includes/viewer.js, use Ctrl+F

1) after line var resizeMedia = function(mode, w) { I added _if (Math.abs(media.box.width - (mOrigWidth / window.devicePixelRatio)) < 2) { mode = MODEFIT; } The point here is to force the switch to FIT mode when the image is clicked while at 66.7%, without this it will stay at 66,7%.

2) replaced line delete mediaCss.width; with mediaCss.width = mOrigWidth / window.devicePixelRatio; This is the core idea - counteracting increased size.

3) replaced line mWidth === mOrigWidth with Math.abs(mWidth - (mOrigWidth / window.devicePixelRatio)) < 2 I had to change this line with condition because without it, images smaller than viewport didn't switch to FIT mode, only larger than viewport did.

That's it, basically just 4 lines of code. There is a small problem: occasionally it is visible that the picture first displays in 150% size and then, 0.2 seconds later, in 100% size, but I don't know whether it is possible to show it immediately in 100% size. And there is a big problem: when opening an image that is much larger than viewport directly in original size (as set in options), during first drags with LMB to pan the image, even after releasing LMB, image still sticks to mouse pointer, continues to move with it. Changing zoom mode to fit and back to original, makes this issue disappear in subsequent drags.

I've attached the modified Viewhance if anyone wants this feature now (or for testing), unpack zip (it's for Chromium-based browsers) impppjchnpfgknmbaaghfeopcgfoilac.zip

[Deathamns]

b91fdfd

New hidden value: scaling It has a special value, *, which will achieve the result you want. Otherwise it's a float.

[DimkaDim]

Thank you very much, been testing it for 3 weeks, works great!

To clarify what needs to be done for anyone who needs this as well (which, I suppose, is anyone with non-100% Windows scaling): You should unpack extension file as zip and in file "defaults.json" line "scaling": null, replace with line "scaling": "*",

Then load that folder in chrome://extensions/ in developer mode in Chrome Dev, Chrome Canary, Cent browser or Slimjet (official release version of Chrome will be nagging you to disable customized extension).

[Deathamns]

You should unpack extension file as zip and in file "defaults.json"

There is an export/import feature #42 in Options/Info, you should use that instead. In this case simply paste {"scaling": "*"} into the textbox and press the Import button.

[DimkaDim]

Thank you, this worked