Retina display and ppi

Question

Can I use the same resolution(ppi) and just double the image size for retina display screen? For example, use 400x800 72ppi image for 200x400 72ppi image? Will it look exactly same? How about the font sizes?

Answer 1

I have been experiemnting with this myself. Its seems odd that you can't use a high resolution image rather than a image twice the size.

So in answer to your question, yes you need to make the image tice the size. I have read that the image should be sized for 4x pixel depth eg a 200px x 300px image should be made as 400px x 600px and then in your css make the image 50%.

You may find this difficult to impliment in a fuild framework where the images resize according to the window size.

I have experimented with some CSS for a retina display image in a colum div that resizes according to the screen width. It seems to work and the divs to hold the image with the retina display image styled at 50%.

the CSS:

.columnLeft{
float: left;
width: 30%
max-width: 200px;
min-width: 100px;

}
.imageHolder{
float: left;
width: 100%

}
.imageHolder img{
width: 50%
}

the divs:

<div class="columnLeft">
    <div class="imageHolder">
       <img src="images/airline.jpg"/>
</div>

Answer 2

check out Scotts answer - https://graphicdesign.stackexchange.com/questions/13777/is-it-mandatory-to-keep-72-dpi-for-web-design-what-if-i-create-in-200dpi

Basically DPI does not matter. Web displays the pixel width and height, therefore your image must be exactly double for Device pixel Ratio of 2 (Apple call that retina).

If you are using text outside of a picture, the browser itself will create the needed pixels.

If the text is in the picture file, it needs to be double the size