Looks like no one’s replied in a while. To start the conversation again, simply ask a new question.

Blurred images on Retina display

Dear everyone,

I have two 27' iMac, one from 2010 and a brand new Retina one.

The topic is :

Editing some pics on photoshop for my website on the Retina display but the pictures look a bit unclear, like a low resolution...
Editing the exactly same pictures on my old iMac and the pictures look perfect !

Same size, same resolution, same photoshop.

To be sure, I saved both pics for the web on both iMacs and then, open them up with the preview app on both screens.

Same point, perfect on old screen and a bit unclear or blurred on the Retina !


Does anybody knows why ?


It only happens on pictures, all texts and stuffs are supa clear on the Retina display but I've noticed that most of the web sites I visit are displaying unclear pictures too !

So I guess the problem doesn't come from the way I save my pics or the computer I use.


looking forward to read you guys.


Jules.

iMac with Retina 5K display, iOS 9.1

Posted on Dec 6, 2015 3:34 AM

Reply
Question marked as Best reply

Posted on Dec 6, 2015 7:57 AM

On the regular iMac, an image that is 400 pixels might appear to be about 3 inches long on that screen. However, on your Retina iMac, that image would only be about an 1.5 inches. This is because the Retina iMac has double the resolution, but the same screen size. That makes things look great. The downside is, it can also make things look small. In order to avoid that, the Retina iMac automatically stretches everything out so a 400 pixel image on the regular iMac looks the same size on the Retina display. If you have stretched an image out, you know it can get blurry. The solution to optimize your images for your iMac’s Retina Display is to use higher resolution images. If you take an image that twice as big as it needs to be on a traditional monitor and squish it down for display on your website, it will look sharp for normal users. Then, when it’s stretched out for someone on a Retina iMac, you’ll be displaying it at its original size – and it will still look perfect. There are ways to check the zoom level of the web browser and provide different versions of images based on that. HTML5 offers tools to help with this. Another solution is using vector-based SVG graphics.

3 replies
Question marked as Best reply

Dec 6, 2015 7:57 AM in response to jules_cesure

On the regular iMac, an image that is 400 pixels might appear to be about 3 inches long on that screen. However, on your Retina iMac, that image would only be about an 1.5 inches. This is because the Retina iMac has double the resolution, but the same screen size. That makes things look great. The downside is, it can also make things look small. In order to avoid that, the Retina iMac automatically stretches everything out so a 400 pixel image on the regular iMac looks the same size on the Retina display. If you have stretched an image out, you know it can get blurry. The solution to optimize your images for your iMac’s Retina Display is to use higher resolution images. If you take an image that twice as big as it needs to be on a traditional monitor and squish it down for display on your website, it will look sharp for normal users. Then, when it’s stretched out for someone on a Retina iMac, you’ll be displaying it at its original size – and it will still look perfect. There are ways to check the zoom level of the web browser and provide different versions of images based on that. HTML5 offers tools to help with this. Another solution is using vector-based SVG graphics.

Dec 6, 2015 8:06 AM in response to Dr.Mac.

Thx for that very helpful answer !I noticed that a 100% 800px picture was 2x smaller than the same picture on the classic iMac, in photoshop.
I was wondering why and I now understand. So, I was saving my pictures for my web site ( save for the web mode in PS ) in 800px wide... Should I save the pics in 800px with higher DPI or save it "for the web" in 1600px ( saving for the web uses 72 DPI, I think ) ?

Dec 6, 2015 8:59 AM in response to jules_cesure

I run into this situation frequently. I continue to upload the smaller photo size to my websites in order to keep the file size low. If you are having problems editing your photos on the iMac 5K screen you can temporarily change the resolution of your screen. Use the System Preferences app.

System Preferences > Displays > Change the resolution.

Your iMac 5K is most likely set at the Default resolution. Clicking on larger text will result in a larger image in the photo editing software. When you have completed your photo editing work, return the display to the default resolution.

Blurred images on Retina display

Welcome to Apple Support Community
A forum where Apple customers help each other with their products. Get started with your Apple ID.