: Do I need to create my images at twice the pixel dimensions on a retina display? I just got a new Macbook Pro with Retina and I'm confused about how to attack my PSD's. If I'm designing

@Rivera951

Maybe the same size with 150dpi of resolution, it will be up and ready.

Vote Up Vote Down

@Pope1402555

I think you are asking about how to design whilst using a retina display, rather than asking how to design for retina displays. You don't need to change anything about the dimensions you choose.

If you create a 120px header on your retina display, it will appear as 120px high on a non-retina display - you don't need to change your behaviour because you're using a retina display.

Mac OS X scales everything you see behind the scenes, so when you create a 100x100px image in photoshop it is actually occupying 200x200 pixels on your display. If you double the pixels yourself, you'd have a 200x200px image displaying at 400x400px - which is not your goal.

If you want some proof of this, try creating a 100x100 image in photoshop, then use CtrlShiftCmd4 to take a screenshot of it. Now CtrlV in a new layer, the screen shot will be twice the dimensions of the image.

If you want to design for retina displays, any advice given regarding dimensions has nothing to do with what sort of display you are using.



Just to try and clarify my point:


I'm wondering if I should be doubling up on everything in Photoshop to get what it would look like [...] on a non-retina display?


To produce something that looks like it would on a non-retina, you produce exactly what you did before.

To produce a double resolution graphic, that only retinas can fully display (although of course can be scaled by a browser on a non-retina), you would indeed double the resolution.

But my point is that you would have to do that even if you weren't using a retina display right now.

Vote Up Vote Down

@Shakeerah625

You're right - at this moment in time, there is no easy way around retina displays other than to double the resolution of your PSDs and work with 2x as many pixels.

It's actually a lot easier than it sounds, and lends itself well to a non-destructive working process (e.g. using Photoshop polygons for standard shapes, vectors for solid icons and compound shapes, implementing layer effects and blending modes, using Smart Objects for raster graphics etc). I'm a big proponent of avoiding rasterization unless you have no other choice, just in case of instances like this where your work needs to be scaled or resized - it's always good to be prepared for these things!

In terms of CSS implementation, see cockypup's answer for more detail.

Best of luck, there's nothing to it. :)

Vote Up Vote Down

@Alves566

If you are asking:

"I just got a retina display and noticed how blurry some web graphics look even when they are saved at the actual size they are used. Should one save images for the web twice the size because there are retina displays out there?"

Then this is my answer:

You are correct. You should make your images for the web twice the size you actually need them but not because you have now a retina display but because there are devices out there with retina displays like yours that will be used to browse the website you are creating. But you should set the dimensions of your images in CSS at the actual size (not the double size). For example


You need a 20x20 icon
design it and save it as a 40x40 image
when you use it on the web page, indicate using CSS that it is a 20x20 image


The image will be displayed as a 20x20 image but since retina has a higher density it will use 4 "physical" pixels (2x2) to display each of the "conventional" pixels.

When the page is viewed on screens with regular density, the browsers will down sample the image so they can display every "conventional" pixel using only one "physical" pixel. The image will still be 20x20. The difference will be (most of the time) unnoticeable.

If the difference is noticeable due to the down sampling introducing artifacts I suggest using media queries in to CSS to provide different images depending on the resolution of the display.

Physical and conventional are not standard terms. I made them up.

Vote Up Vote Down