Preview Issues :: New iMac Retina 5K, 27-inch, 2019

[nelly_egdesign]

Hi folks,
I've just purchased a new iMac (Retina 5K, 27-inch, 2019).
3.7 GHz Intel Core i5
64 GB 2667 MHz DDR4
Mac Fusion.
Radeon Pro 580X 8 GB

When I export files as JPEG/PNG at screen resolution maximum quality, then preview them in Preview, they are fuzzy. When I do the same on my old mac with the same file, it's crisp as. I've spoken to Adobe, Apple and an Apple Tech and no one seems to know what is going on. Has anyone experienced anything similar?

 

[DeltaMac]

You said that you export the files as JPEG/PNG.
What app are you using for the export?

If you compare the files that you export from the old Mac, are those exported files larger than those exported by the new iMac?

 

[Chancha]

It has to do with the retina screen. On a retina screen equipped mac, depending on the specific app and its settings, they behave differently when displaying an image. The fuzziness issue happens when the app respects the image's resolution as to match with the "user interface" res, other than the native retina res.

For example, by default the iMac 5K screen is set at "Looks like 2560x1440" scaled UI res. If you have a JPEG that is at the same 2560x1440 dimension, opening this file in an app it might be displayed at 1:1 100% which fills up the whole screen, this effectively is using a 2x2 grid of pixels on the panel to display only one pixel of color information in your image. If you open the same file in an app that respects retina (true res of your display panel), such as Photoshop, the image should only fill up quarter of the 5120x2880 screen at 1:1 100%.

 

[nelly_egdesign]

It has to do with the retina screen. On a retina screen equipped mac, depending on the specific app and its settings, they behave differently when displaying an image. The fuzziness issue happens when the app respects the image's resolution as to match with the "user interface" res, other than the native retina res.

For example, by default the iMac 5K screen is set at "Looks like 2560x1440" scaled UI res. If you have a JPEG that is at the same 2560x1440 dimension, opening this file in an app it might be displayed at 1:1 100% which fills up the whole screen, this effectively is using a 2x2 grid of pixels on the panel to display only one pixel of color information in your image. If you open the same file in an app that respects retina (true res of your display panel), such as Photoshop, the image should only fill up quarter of the 5120x2880 screen at 1:1 100%.

Hey Chancha, that sounds exactly right. When I open the file in Photoshop it's smaller than it would normally be at 100% on preview. This sounds like quite an issue though to me, how am I suppose to preview files and check clarity at screen resolution, for instance to check if files are the correct resolution to upload to web? I also notice that other images like Email Signature JPEGS and some web files aren't crisp when viewing. I realise it can be from the files not being the correct resolution but have noticed this so much with new 5K screen and it's so annoying. I feel like I can't do my job properly on a brand new computer!!!
[doublepost=1563234130][/doublepost]

You said that you export the files as JPEG/PNG.
What app are you using for the export?

If you compare the files that you export from the old Mac, are those exported files larger than those exported by the new iMac?

Mainly Indesign. If I export from new computer or old computer and view both files in preview on my old Mac, they both look crisp. If I open them both in Photoshop and view at 100%, new Mac the image is smaller. So Chacha's comment must be correct but this is so annoying because I don't know how i'm going to be able to check images are crisp and at perfect screen resolution.

 

[Chancha]

Yes, being retina is both the advantage and disadvantage of modern Macs as a result. You get to see a lot of pixel depth, which is useful when working on visuals that are higher than the screen's res (which is normal nowadays, like 40MP+ files from DSLR). But when displaying a dimension way lower than that, especially with pre-HiDPI era pixel pitch, there is no reliable way to reproduce sharpness by displaying 2x due to anti-aliasing and dithering are employed by apps and the OS when they do the upscaling behind the scene.

I myself ran into a similar situation in the past, when I got my first retina MBP I was taken back by this issue at first. In old days with a "LowDPI" display you can trust it to be a constant, as long as you sit far enough from it before pixel-peeping, it is a reliable tool to gauge image sharpness and also expect other viewer's displays to behave similarly (the web standard resolution of 72DPI era). Ever since I got the rMBP my workflow had that part missing, sometimes when I export something like a website banner, I had to make sure a secondary LowDPI monitor is available somewhere, or I have to move the resulting files to an old Mac to view them to verify sharpness.

After that I mainly use a 2017 iMac 5K, permanently having a 27" 2560x1440 wide gamut monitor sitting next to it, together with the built-in retina screen they solve all problems. But obviously this is not a setup possible for everyone.

Sometimes when I work on the road with my secondary Mac which is a 2018 MBP13", of course only with the built in display available, the method to check sharpness is to... move my face very close to the screen, almost to the point of able to seeing the pixels, then look at the images at 1:1 pixel pitch.

 

[nelly_egdesign]

Yes, being retina is both the advantage and disadvantage of modern Macs as a result. You get to see a lot of pixel depth, which is useful when working on visuals that are higher than the screen's res (which is normal nowadays, like 40MP+ files from DSLR). But when displaying a dimension way lower than that, especially with pre-HiDPI era pixel pitch, there is no reliable way to reproduce sharpness by displaying 2x due to anti-aliasing and dithering are employed by apps and the OS when they do the upscaling behind the scene.

I myself ran into a similar situation in the past, when I got my first retina MBP I was taken back by this issue at first. In old days with a "LowDPI" display you can trust it to be a constant, as long as you sit far enough from it before pixel-peeping, it is a reliable tool to gauge image sharpness and also expect other viewer's displays to behave similarly (the web standard resolution of 72DPI era). Ever since I got the rMBP my workflow had that part missing, sometimes when I export something like a website banner, I had to make sure a secondary LowDPI monitor is available somewhere, or I have to move the resulting files to an old Mac to view them to verify sharpness.

After that I mainly use a 2017 iMac 5K, permanently having a 27" 2560x1440 wide gamut monitor sitting next to it, together with the built-in retina screen they solve all problems. But obviously this is not a setup possible for everyone.

Sometimes when I work on the road with my secondary Mac which is a 2018 MBP13", of course only with the built in display available, the method to check sharpness is to... move my face very close to the screen, almost to the point of able to seeing the pixels, then look at the images at 1:1 pixel pitch.

It just seems so backwards that it's even happening! I don't suppose you'd have an idea of whether the computer would still be exporting at the correct resolution? and just not previewing crisp?? I have been using my old Mac to view files before uploading. It's so not right!!!!

 

[mikehalloran]

It just seems so backwards that it's even happening!

Yea... you don't understand so it must be backwards. Right.

You can change the resolution in System Preferences/Displays. Use one of the 5 default views for best results. If you don't like any of them, the Option key lets you override the defaults.

 

[Chancha]

Yea... you don't understand so it must be backwards. Right.

You can change the resolution in System Preferences/Displays. Use one of the 5 default views for best results. If you don't like any of them, the Option key lets you override the defaults.

I am afraid you may have misunderstood him / the issue discussed. We are focusing on the need of proofing image sharpness for LowDPI usage, which is inherently difficult on HiDPI screens by nature. Those 5 "visual" resolution options in System Preferences that you brought up, are all done with dithering / anti-aliasing that are arbitrary and exclusive to Macs running specific version of macOS. This means the results are not sufficient to give you an idea how the image would look on other devices with different scaling logic, on both software and hardware sides.

IMO we are in a transitional era of screen image preparation, maybe some point in the future we can expect all devices equipped with HiDPI screens, such that image sharpness becomes insignificant due to the sheer amount of pixel information where whatever dithering / anti-alaising on the client side would not matter.

 

[nihil0]

how am I suppose to preview files and check clarity at screen resolution, for instance to check if files are the correct resolution to upload to web?

Export the file with @2 at the end of name. For example Picture1@2.jpg. This will tell Preview to render it at Retina resolution. But also the file needs to have double of pixels. Then you will see how it will look at normal display.

For example

Picture1.jpg will have resolution 1000x1000 px
Picture1@2.jpg will have resolution 2000x2000px

@2 version will look on your Retina display the same as non-@2 version on non-Retina display.

 

[nelly_egdesign]

Export the file with @2 at the end of name. For example Picture1@2.jpg. This will tell Preview to render it at Retina resolution. But also the file needs to have double of pixels. Then you will see how it will look at normal display.

For example

Picture1.jpg will have resolution 1000x1000 px
Picture1@2.jpg will have resolution 2000x2000px

@2 version will look on your Retina display the same as non-@2 version on non-Retina display.

Thanks for your reply, and excuse the ignorance - but is the purpose of viewing at double the pixels just to check image quality? Or to get screen resolution correct do I need to be exporting at double the pixels when I'm preparing image files for the likes of Facebook posts? Also I tried the @2 and it didn't change the Preview view!
[doublepost=1565752213][/doublepost]

Yea... you don't understand so it must be backwards. Right.

You can change the resolution in System Preferences/Displays. Use one of the 5 default views for best results. If you don't like any of them, the Option key lets you override the defaults.

Preview showing images at 100% view when exported at 72DPI and the image is fuzzy - is backwards. Not sure if you're a gamer or graphic designer but it's not great for working with images when you need to check clarity at screen resolution - and I mean 99% of the population screen resolution - not Retina Display.
[doublepost=1565752292][/doublepost]

I am afraid you may have misunderstood him / the issue discussed. We are focusing on the need of proofing image sharpness for LowDPI usage, which is inherently difficult on HiDPI screens by nature. Those 5 "visual" resolution options in System Preferences that you brought up, are all done with dithering / anti-aliasing that are arbitrary and exclusive to Macs running specific version of macOS. This means the results are not sufficient to give you an idea how the image would look on other devices with different scaling logic, on both software and hardware sides.

IMO we are in a transitional era of screen image preparation, maybe some point in the future we can expect all devices equipped with HiDPI screens, such that image sharpness becomes insignificant due to the sheer amount of pixel information where whatever dithering / anti-alaising on the client side would not matter.

Yes I agree, I think in another few years this won't be an issue!

 

[nelly_egdesign]

Export the file with @2 at the end of name. For example Picture1@2.jpg. This will tell Preview to render it at Retina resolution. But also the file needs to have double of pixels. Then you will see how it will look at normal display.

For example

Picture1.jpg will have resolution 1000x1000 px
Picture1@2.jpg will have resolution 2000x2000px

@2 version will look on your Retina display the same as non-@2 version on non-Retina display.

@2x - yes I see what you mean, if I export at 144DPI then it shows crisp as and If I am to take a screen snapshot, even though the file is actually 1200px wide, the screen snap is indeed 600px so thank you so much for showing me that - but my question still remains - how should I export files for web, or for client's facebook posts - at 72DPI which will look crap on my screen (or with the @2x it will look half the size)?? Or do I need to double the resolution? I'm worried if I export at 72DPI then anyone who views the website images on retina display, the images will look fuzzy :/

 

[idktbh]

download quickres and choose 1440p low res

 

[nihil0]

@2x - yes I see what you mean, if I export at 144DPI then it shows crisp as and If I am to take a screen snapshot, even though the file is actually 1200px wide, the screen snap is indeed 600px so thank you so much for showing me that - but my question still remains - how should I export files for web, or for client's facebook posts - at 72DPI which will look crap on my screen (or with the @2x it will look half the size)?? Or do I need to double the resolution? I'm worried if I export at 72DPI then anyone who views the website images on retina display, the images will look fuzzy :/

For web you should exactly do that - export it as double size and then tell website to render it at normal size. At my photo portfolio, all my pictures are uploaded 2268px wide but I tell my website to render them at 1134px wide. That means that both retina and non-retina users will see exact same and sharp picture. The downsize is that picture is 1 MB instead of 500 kB.

On the other hand, I upload my photos to my Facebook Page at 960px wide (PNG file) and they are blurry on my retina screen but I checked on laptop with Full HD resolution and they look sharp. Unfortunately, untill Facebook implements retina compatibility, there is nothing you can do with that.

 

[nelly_egdesign]

For web you should exactly do that - export it as double size and then tell website to render it at normal size. At my photo portfolio, all my pictures are uploaded 2268px wide but I tell my website to render them at 1134px wide. That means that both retina and non-retina users will see exact same and sharp picture. The downsize is that picture is 1 MB instead of 500 kB.

On the other hand, I upload my photos to my Facebook Page at 960px wide (PNG file) and they are blurry on my retina screen but I checked on laptop with Full HD resolution and they look sharp. Unfortunately, untill Facebook implements retina compatibility, there is nothing you can do with that.

Really insightful reply, thanks so much

 

[Chancha]

For web you should exactly do that - export it as double size and then tell website to render it at normal size. At my photo portfolio, all my pictures are uploaded 2268px wide but I tell my website to render them at 1134px wide. That means that both retina and non-retina users will see exact same and sharp picture. The downsize is that picture is 1 MB instead of 500 kB.

On the other hand, I upload my photos to my Facebook Page at 960px wide (PNG file) and they are blurry on my retina screen but I checked on laptop with Full HD resolution and they look sharp. Unfortunately, untill Facebook implements retina compatibility, there is nothing you can do with that.

If you do a "double density" trick described above, it will depend on both your website image engine and also the clientside browser's image rendering behaviour to achieve sharpness (or not). So while it is a good suggestion, it is not a fool-proof solution.I do not think there exists a user agent flag in the browser that can tell the serverside what PPI the client screen is at, so you can't prepare say 2 or more versions for given situations either.

Also, the bandwidth required for 2x density is actually 4x, which can be a sizable concern for image heavy layouts.

@2x - yes I see what you mean, if I export at 144DPI then it shows crisp as and If I am to take a screen snapshot, even though the file is actually 1200px wide, the screen snap is indeed 600px so thank you so much for showing me that - but my question still remains - how should I export files for web, or for client's facebook posts - at 72DPI which will look crap on my screen (or with the @2x it will look half the size)?? Or do I need to double the resolution? I'm worried if I export at 72DPI then anyone who views the website images on retina display, the images will look fuzzy :/

I don't seem to be able to replicate the 2@ behaviour via Preview, but if I understand the mechanics correctly, that is still only a visual hack than a real render since dithering is involved. But yes I do think it is close and good enough under the current constraints. So overall these are pretty helpful solutions.

 

[nihil0]

If you do a "double density" trick described above, it will depend on both your website image engine and also the clientside browser's image rendering behaviour to achieve sharpness (or not). So while it is a good suggestion, it is not a fool-proof solution.I do not think there exists a user agent flag in the browser that can tell the serverside what PPI the client screen is at, so you can't prepare say 2 or more versions for given situations either.

Also, the bandwidth required for 2x density is actually 4x, which can be a sizable concern for image heavy layouts.

I have Wordpress website so maybe it somehow already contains instructions on how to render those images. I also tested it on Firefox on Windows on full HD screen and it was working as intended.