Graphics for retina display?

[cpuin]

Hi,

before post here i read a lot about this, but unfortunately i didn't understand it very well.

I want to prepare web design in PSD than slice it to HTML and CCS.
Before do that i want to be sure i understand everything right.I have tried with a picture and simple HTML to see the result, but it's not what i would like to see.

The questions are:
1.How to prepare pictures for retina normal and for retina display in same time?
2.What should be the size (1000x800 px for instance) of the pictures.If i prepare them in pixelmator (photoshop) at 1000x800 how they're going to look in normal and in retina display?
3.Why normal pictures appears bigger in retina display?
4.I read about different approach for website support for retina display, but no one was quite good.I mean i one of them i should prepare two versions of one pictures (one for retina and one for normal).What i want i s prepare one quality picture for Retina and if the computer is normal to resize it.How?

Any advices and recommendations?

 

[Apple Key]

There are various ways to prepare files for a retina display.

First, what you want to do is prepare your files at twice the resolution that you want them to display at. Let's say right now you have a 50 x 50 image. This image should be changed to 100 x 100 for a retina displays.

Next, you need to either implement a javascript solution that checks if the display is retina and then will load the retina images, or you can just use images which are twice as large and specify the size as half that in the HTML code.

Example:

Size you want your image displayed at: 50 x 50
Actual image size: 100 x 100
Your HTML:

<img sc="myimage.jpg" width="50" height="50" alt ="My Image" />

 

[cpuin]

There are various ways to prepare files for a retina display.

First, what you want to do is prepare your files at twice the resolution that you want them to display at. Let's say right now you have a 50 x 50 image. This image should be changed to 100 x 100 for a retina displays.

Next, you need to either implement a javascript solution that checks if the display is retina and then will load the retina images, or you can just use images which are twice as large and specify the size as half that in the HTML code.

Example:

Size you want your image displayed at: 50 x 50
Actual image size: 100 x 100
Your HTML:

<img sc="myimage.jpg" width="50" height="50" alt ="My Image" />

Thank you for the answer.
I still have some problem.There is a different limiting with width="50%" and for instance width="50" ( the exact pixels half of the picture size).

Also, what are the requirements for Retina display good looking image???
Resuliution, DPI etc.

 

[Apple Key]

Thank you for the answer.
I still have some problem.There is a different limiting with width="50%" and for instance width="50" ( the exact pixels half of the picture size).

Also, what are the requirements for Retina display good looking image???
Resuliution, DPI etc.

I'm not sure exactly what you mean. Are you referring to a background image?

The DPI doesn't really matter when it comes to the images. You just need to ensure that he dimensions are 2 times larger than normal.

It might help if you put together an example page with an issue you are having.