Tjyylli

Below is an image on imgur.com that is 513x147.

If I view it (https://i.stack.imgur.com/HtVSr.png) in a web browser (Chrome or Firefox), it shows up as a slightly resized image, displayed on my screen as approx 642x183 pixels, even though I double-checked to make sure the web browser is displaying at 100% zoom.

If I download it to my PC and open it in an image editor like IrfanView or Windows Paint, it shows up in the correct size and looks nice and crisp.

If I plugin my PC into an external monitor, the same size difference is present (image editor smaller than browser), but now the image editors display it in what looks like a smaller size than normal, whereas the browser windows look fine. (This gets really weird in an image editor; if I take a screenshot of a full-screen window, then paste into the image editor and display at "100%" then it doesn't fill the entire screen.)

What's going on? I'm running Windows 10 on a Lenovo P51 with 1920x1080 display. I've tried external monitors with 1920x1200 resolution and 2560x1400.

For example, here's a screenshot of running IrfanView on my 1920x1200 monitor, after pasting a screenshot of the browser window at full screen. Note that IrfanView claims it is showing the image at 100% but it doesn't fill the screen.

I think I found it: Windows 10 has a per-monitor scaling settings. My laptop screen has it set at 125% (presumably because it's high-resolution on a small monitor) whereas my monitors are set at 100%.

Doesn't explain why the two types of programs display differently, though. (It seems like an interaction between the program and the OS. Maybe IrfanView + Paint query the OS to find "the scaling ratio" of my entire system and aren't programmed to handle multiple displays with different scaling ratios... not sure why the browsers get a different scaling factor.)

Web browser's primary emphasis is consistent display of all of the elements of a web page, and so will adjust these according to parameters unique to the engine and browser.

Image editor's primary emphasis is to accurately display graphical information in image form so that decisions can be made regarding necessary modifications to those images.

Different browsers use different rendering engines and different parameters to display (render) images in sites. There is often automatic resizing going on to a greater or lesser extent.

This is a normal behavior, and a lot of web design is focused on the extensive efforts necessary to make websites display consistently across the common browsers, and often there are significant modifications that must be made to the site's style sheets or design framework to allow for a consistent UI across the various browsers.

When you factor in different screens, you're also dealing with scaling, where visual elements in Windows are adjusted to fill different numbers of pixels based on the physical size of the screen relative to the number of pixels that comprise it.

If you look at the source of your question, you will see that there is a style= clause with width and height parameters which override the dimensions of the image:-

<a href="https://i.stack.imgur.com/HtVSr.png" rel="nofollow noreferrer">

<img src="https://i.stack.imgur.com/HtVSr.png" alt="enter image description here"

    style="width: 513px; height: 147px;">

</a>

The SU submission process has reproduced the image dimensions in the style= clause, but another web-site may not do so. The fact that different browsers exhibit the same scaling suggests that this is the reason for your observation.

Note that SU will scale large in-line images with reduced style= dimensions to prevent panning or cropping.