How to convert an image to retina display?

Question

I have an 40px by 20px image with 72 Pixels / Inch.

I would like to create a Retina display version.

What should I do? Double the size? Change the resolution?

And in which format should I save it? PNG? JPG? ...

I am using this image on a web site ...

Answer 1

In your image editor, double the size of your image to 80px by 40px.

In your markup set the width to 40 and height to 20.

<img src="example.png" width="40" height="20" />

You should save as png if you need transparency or the image is line art. Save photographs as jpg.

Answer 2

My answer is convert your image into SVG

Do you have Illustrator? If so save your image as SVG (and have a png as a fallback if you want).

<img src="images/logo.svg" alt="" />
<img src="images/logo.png" alt="" />

As long as you use Modernzr which can work to get svg friendly in most browsers.

You can see it here how it's done: http://toddmotto.com/mastering-svg-use-for-a-retina-web-fallbacks-with-png-script/

Hope it helps :)