Image scaling confusion

[nemofish]

I have been working on web images for the last 8 years on a 2k (2560x1140 native) monitor and the images I see in Photoshop and uploaded to the web were always the same.

I have just updated to a 4k monitor, but running it scaled at the same resolution - I assumed this would keep things equal but the images in Photoshop are now super tiny and they double in size when I upload to the web.

I am so confused. Is there any workaround or explanation why it does this?

 

[bogdanw]

That view is with zoom 100% (⌘1) in Photoshop?

 

[nemofish]

Yes.

 

[bogdanw]

I’ve just switched my 4K monitor to 2560x1440 and I see the same difference in Photoshop vs Safari.
The simplest solution is to run the monitor at its native resolution (3840x2160).

 

[nemofish]

My old eyes would not take that as a solution, lol.

 

[nemofish]

This appears to be more of an issue with browsers, as I understand photoshop will keep pixels as pixels.

I don't understand why browsers don't honor this?

 

[bogdanw]

It seems to be the other way

‎Free Ruler

‎Features: Horizontal and vertical rulers. Choose from pixel, millimeter, and inch units (press U to cycle). Float rulers above other applications (press F to toggle). Move windows independently or as a group (press G to toggle). Show or hide the shadow behind rulers (press S to toggle). Align...

apps.apple.com

 

[nemofish]

It seems to be the other way

‎Free Ruler

‎Features: Horizontal and vertical rulers. Choose from pixel, millimeter, and inch units (press U to cycle). Float rulers above other applications (press F to toggle). Move windows independently or as a group (press G to toggle). Show or hide the shadow behind rulers (press S to toggle). Align...

apps.apple.com

No, for some reason web browsers display images at 200% - this is why logos etc look so bad on retina screens unless web designers produce a file that is 200% the size, then display at 50% on the web.

The image in photoshop is correct in terms if pixel width/height. You can measure this based on pixel width of the display resolution.

 

[bogdanw]

On my system, with the monitor at 2560x1440, the Free Ruler app shows that Photoshop is displaying the image at 300 pixels when 100% zoom is selected.

 

[nemofish]

Isn't that because your'e scaling down by 50%? You're doubling the size of everything but for Photoshop, a pixel is still a pixel so it would appear half the size.

 

[bogdanw]

 

[nemofish]

that's without scaling though isn't it?

If you apply ANY kind of scaling that would be 300px

 

[bogdanw]

I see two solutions to your problem:
- set the monitor to the default resolution (3840x2160), all working as expected
- set the monitor to 2560x1440 and view the images at 200% in Photoshop
⌘2 is not allocated, so you can set it as a shortcut for zoom 200%

 

[nemofish]

Thanks, I agree.

I think my best solution is option #3 which is to go back to a QHD monitor and run it at full resolution.

Unfortunately

 

[decksnap]

No, for some reason web browsers display images at 200% - this is why logos etc look so bad on retina screens unless web designers produce a file that is 200% the size, then display at 50% on the web.

The image in photoshop is correct in terms if pixel width/height. You can measure this based on pixel width of the display resolution.

It’s the other way around. On the web, designers provide @1x (normal) size graphics for standard screens or @2x graphics for retina/hi dpi. The 2x asset is scaled down by half for standard 72dpi screens and show at 2x for hidpi.