Advertisement


Do I need to create my images at twice the pixel dimensions on a retina display?


Question

I just got a new Macbook Pro with Retina and I'm confused about how to attack my PSD's.

If I'm designing a site which has 14px font size, should I be creating it at 28px in Photoshop to see what it will look like in CSS on a standard display?

Or if my website should have a 60px tall header, should I make it 120px in Photoshop?

I guess I'm confused because the CSS stays the same, but I'm wondering if I should be doubling up on everything in Photoshop to get what it would look like in CSS on a non-retina display?

2014/04/18
1
6
4/18/2014 4:22:00 PM

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.

2014/04/21
5
4/21/2014 2:46:00 PM