Creating images for Mac Retina screens

October 27, 2017 7:27 AM

I've been creating images for web pages since the early days of the internet but I'm having trouble wrapping my head around creating them for retina screens.

I have a publication in InDesignCC that needs to end up on the web with each page being a separate image of no more than 560px width. The images have to appear crisp and clear on all devices, including those with Retina screens. I've been exporting them as individual 72 dpi png files, then using Photoshop to size then down to 560px. They look fine on normal screens but fuzzy on retinas. Given my workflow (InDesign => Photoshop), what am I doing wrong and how can I improve my product so that they look perfect on all screens? Could my problem be not in the images but in the website coding? Hmm...

posted by Jamesonian to Computers & Internet (3 answers total)

Pixels ain't pixels any more.

Although your page layout will be correct for images specified as 560px wide, on a Retina display they will actually be 1120 of the physical display screen's hardware pixels wide, and unless they actually contain 1120 pixels worth of detail they're going to look blurred.
posted by flabdablet at 7:40 AM on October 27, 2017 [2 favorites]

Best answer: In other words, generate images that are 1120 pixels wide instead of 560, and have your CSS set up to render them at 560px. On a non-Retina display, this will cause them to get scaled to 50% before being displayed; on a Retina display, they will display at full resolution.

Images formatted this way will be slower to fetch because they contain four times the data. Here are some useful suggestions for ways to offset the negative effects of that.
posted by flabdablet at 8:26 AM on October 27, 2017 [3 favorites]

retina.js is one straightforward way to do it without inflating your pageload for non-retina users. You'd have to create two versions of each asset though.
posted by neckro23 at 10:51 AM on October 27, 2017 [1 favorite]