Do I need to create my images at twice the pixel dimensions on a 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.