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
14pxfont size, should I be creating it at
28pxin Photoshop to see what it will look like in CSS on a standard display?
Or if my website should have a
60pxtall header, should I make it
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?
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 20×20 icon
- design it and save it as a 40×40 image
- when you use it on the web page, indicate using CSS that it is a 20×20 image
The image will be displayed as a 20×20 image but since retina has a higher density it will use 4 “physical” pixels (2×2) 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 20×20. 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.