7

I don't often put images in my questions or answers, and when they are large, I edit them for size first.  But I've noticed that small ones are displayed much bigger than their actual size. The most recent was shown in SE bigger than my screen when its actual size in pixels is smaller than my screen.  Apparently, it was "zoomed" to the width of the answer's content box.

Relevant post: https://travel.stackexchange.com/a/185389/12555

Specs:

  • Mac laptop screen: 1680x1050
  • Image file: 766x1286
  • On screen in Safari: 1232x?? (Can't measure height because it exceeds full screen window space.)

"Inspect element" shows no dimensions in image tag but says width is 617.21875px AND 100% of container (which?)

Screenshot of same image in sandbox along with actual size in graphics editor:

screenshot of two identical images with different apparent sizes

20
  • 6
    Can you please link to some example of this? Dec 30, 2023 at 16:12
  • 1
    No repro, can't see any bug and you didn't give enough details. I just uploaded a rather small image here and it's showing in its original size just fine. The only thing I can think of, is that you're browsing via a mobile device with a small screen, hence the images take the whole width. But nothing SE can do about it, try browsing from PC, laptop, or tablet which have wider screen. Dec 30, 2023 at 17:22
  • 1
    Based on "most recent" I suspect that you are referring to this post since it's your most recent post before this one. Looking at the image I don't think it's been resized larger because it would be pixelated. In fact the real size of the image is larger than what is displayed in your answer. It's constrained by the width of the post area so it's resized by the browser to be smaller. Dec 30, 2023 at 18:26
  • @CaveJohnson ah, nice find. I've suggested edit to make the image actually smaller, while linking to the original. Dec 30, 2023 at 18:31
  • Anyway, no bug here. The image you uploaded is indeed 1286 pixels height, as you say yourself. If your screen is less than that, it will indeed be bigger. I don't understand what you want SE to do. If you can explain, feel free to edit and I'll retract my close vote, or cast reopen vote if it's closed until then. Dec 30, 2023 at 18:32
  • In shadow wizard's example, the properties show the width as the same as he states, but the browser displays one exactly double in size. But in mine, the width property is larger but not double, and smaller than what is actually displayed, which is the same width as the text. If I grab it from the browser (save image) I get the same dimensions as the image I uploaded.
    – WGroleau
    Dec 30, 2023 at 18:36
  • The image I uploaded is the size I said it is, which is smaller than the image displayed. And when I download the image from SE, I get the same size as uploaded.
    – WGroleau
    Dec 30, 2023 at 18:39
  • Where are you getting the 1232 number? Can you perhaps take a screenshot of your inspector showing this value? Dec 30, 2023 at 18:47
  • I also can't repro. For what it's worth this is what I see in Chrome (with post included): i.stack.imgur.com/2UaNs.jpg. Intrinsic size is 766x1286 (original size). While rendered size is 653x1097 which is actually smaller than original. Dec 30, 2023 at 18:53
  • Regarding your update: Isn't the editor scaling the image size down? It doesn't look like it's actually 766x1286 for your screen resolution. Dec 30, 2023 at 18:56
  • The 1232 is not from the inspector. It's from cropping a screenshot to the edges of the image. The inspector says width 617.21875px \n 100% .container
    – WGroleau
    Dec 30, 2023 at 18:56
  • 4
    Another option is that your retina screen is responsible for showing all images twice as big, I saw it mentioned few times around here but never figured how exactly this works. Still, nothing SE can do about. Dec 30, 2023 at 18:57
  • 2
    I think Shadow is on to something. If your screen resolution height is actually 1050, and your image height is 1286, the image should be taller than your screen. It probably has to do with your mac having a retina display and your screen resolution actually being a lot more than 1050. The browser displays the image as a natural size (same as what non-retina users would see) instead of what is capable with your retina display. Either way it's not SE that is resizing it. You can probably replicate this in any HTML page where you insert your image. Dec 30, 2023 at 19:09
  • 1
    @ShadowWizardLoveZelda done Dec 30, 2023 at 20:58
  • 1
    Voted to reopen. This doesn't 'need details or clarity' - it merely needs an understanding of the underlying problem, which is real.
    – Tetsujin
    Dec 31, 2023 at 10:03

2 Answers 2

5

I cannot determine whether this is ultimately a browser issue or a Stack Exchange issue, I don't have the chops to delve that far. It does reproduce on every browser I have access to. It is not, however, an Imgur issue, nor an Apple/Retina issue.
It happens because the DPI is not being handled correctly.

For anyone not aware of how SE handles original uploaded images when inlined, it will reduce the apparent size of any image to a maximum display size of 650px wide. It will not enlarge any image.
This breaks perceptually if an uploaded image was saved at 144 DPI rather than the standard 72, but still the maximum displayed size on screen will be 650px.

I thought initially that Imgur may be stripping the DPI tags on upload, but this seems not to be the case. Imgur doesn't strip the DPI value, I have tested random uploads from other users [on Windows] where the DPI value survived uploading to Imgur, and have now confirmed this for myself from two different Macs.
Exiftool shows this information as x/y values, like this:-

X Resolution                    : 72
Y Resolution                    : 72

I don't know the provenance of the OP's images - The one from the referenced post says it comes from an HP device running Windows, with a CRT display, rather than anything from Apple. It contains no DPI data at all.

Link for future reference, as the image has been replaced in the current version of the question - https://i.stack.imgur.com/H4Wo3.jpg

The screenshot in the question above is from an Apple device, but the DPI data is rather odd:-

X Resolution                    : 1
Y Resolution                    : 1   

I have checked old & new Mac screenshots on my own Machines. An old non-Retina Mac doesn't include DPI metadata in a screenshot, but as it's using the default 72 DPI anyway, this is not a problem. A new Retina iMac saves the non-standard 144 DPI in the metadata.
This survives upload to Imgur, but seems to be ignored by the browser, so appears double size, on both retina & non-retina Macs, also on a non-retina Windows VM.
Example retina screenshot you can test. It appears here double size, yet the DPI information is still present :-

enter image description here

When dragged back to my desktop off the page, this shows in exiftool as

X Resolution                    : 144
Y Resolution                    : 144

For comparison, the same image grabbed via remote desktop on an older non-retina Mac, at 72 DPI. No DPI values were saved in the original screenshot, but Imgur hasn't added any either.

enter image description here

I already proposed that this issue be looked at when we lose imgur next year - Stack Exchange’s image hosting arrangement with Imgur is ending - advance notice

3
  • The JFK image I uploaded was taken with a fully updated iPhone 6 on 10 March 2019. Its tagged resolution is 72 DPI. It is obviously not the original, as it currently has no make & model tags. However, the original also is tagged 72 DPI. If the one displayed here has no resolution tags, they were removed happened during or after upload. The stuff about Windows and HP appears in most ion not all of my images, but they pertain to the profile, not to the camera. (A bit surprising that Apple doesn't have their own.)
    – WGroleau
    Jan 1 at 2:32
  • 1
    The exif tags will be from whatever it was last edited on. Apple embeds everything from the computer or phone type - a huge amount of very detailed data, far too much to go into here. If you run that through Photoshop's 'Save for Web' pretty much all of that is thrown away, including even the manufacturer & DPI values. Whatever you're editing with is swapping Apple data for MS & HP. It seems your own Mac is displaying at 144 dpi even though the photo wasn't taken at that, which then surprises the user when viewed on a retina screen purporting to be set as 1680x1050 but is actually 2560x1600
    – Tetsujin
    Jan 1 at 9:03
  • 1
    Really, the issue is two-fold - 1) the DPI is being mishandled, compounded by 2) You didn't realise that's what a retina screen does; it halves the apparent resolution & doubles the pixel density. Your screenshot, btw, is a whopping 2290x1732 & ought to be 144dpi - but isn't. Ordinarily I would edit & resize any image that size in a post, but as the entire point of the post is based on incorrect data in pictures, it ought to stay as is, just this once.
    – Tetsujin
    Jan 1 at 14:17
3

In your post you specified that your screen resolution has a height of 1050. If your screen resolution height is actually 1050, and your image height is 1286, the image would actually be taller than your screen.

It probably has to do with your Mac having a retina display and your screen resolution actually being a lot more than 1050, and the DPI of the image not being handled correctly. See Tetsujin's answer for more details.

6
  • 1
    You deserve the rep, but it's fine, you can still get badges for this good answer. :) Dec 30, 2023 at 21:07
  • "same as what non-retina users would see"—but if they see twice the size in their browsers, perhaps Apple has misjudged how to handle it.
    – WGroleau
    Dec 31, 2023 at 7:10
  • 1
    This misses the actual issue. Yes, it's caused by using a retina display, but the issue is that the DPI is lost in translation…somewhere.
    – Tetsujin
    Dec 31, 2023 at 10:07
  • 1
    @Tetsujin Fair enough. Updated it to be more agnostic. Jan 2 at 19:35
  • @WGroleau feel free to accept Tetsujin's answer since it has more details. Jan 2 at 19:35
  • @CaveJohnson, talked me into it! :-)
    – WGroleau
    Jan 3 at 19:35

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .