Images for iPhone 4 retina display, sharp and crystal clear    
This topic is assigned to Victor Robu

--Admin--
Oct 28, 2011 04:43 AM
I'm sure that many of us meet the problem that your images in the app looks great on iPhone 3G generations, but is missing the crystal sharpness on the iPhone 4 retina display.

Here is how to make your images look Crystal clear on retina display:

Inserted the bellow code in your HTML page:

<meta name="viewport" content="width=device-width, initial-scale=1.0, 

maximum-scale=1.0, user-scalable=no">



<style type="text/css">

  

  #someDiv 

  {

    background-image: url(samplebg.png);

    background-repeat: repeat;

    width: 190px;

    height: 142px;

    

  }

  

  @media only screen and (-webkit-min-device-pixel-ratio: 2)

    {

    #someDiv 

    { background-image: url(samplebg2x.png);

      -webkit-background-size:190px 142px;  

      background-repeat: repeat;

    }

  }

</style>



<div id="someDiv" style="width: 100%; min-height: 380px; 

text-align: center; padding-top:150px; " align="center">

  

  <div style="background-color:#ffffff; color:#000000;">

Sample design for iPhone 4</div>

  

</div>



To create a good design for both devices you need to create two different images with different size and resolution:
1. one for iPhone that support retina display
2. the same image, but scaled-down/2 for iPhone 3G generation


In above sample code I used a seamless background pattern with 380px x 283px size. I named it samplebg2x.png (the prefix 2x is used for a convenience for retina display images). 
After that the same image was scaled down/2 to 190px x142px and I named it samplebg.png I will use it for iPhone 3G generation.

To have a page with a background image, I implemented a CSS class uploading samplebg.png image with 190px x142px size, this class works for 3G iPhone generation:

#someDiv 

  {

    background-image: url(samplebg.png);

    background-repeat: repeat;

    width: 190px;

    height: 142px;

    

  }


Let's look on our images:
1) iPhone 3G generation 

2) iPhone with retina display
http://seattleclouds.com/imagebucket/iPhone4_before.PNG

We can observe that the background-image on iPhone with retina display looks blurry.

For this reason I added a new CSS class, using like background-image the samplebg2x.png with 380px x 283px size, but we need to set this size in CSS style scaled-down (i.e 190px x 142px).



@media only screen and (-webkit-min-device-pixel-ratio: 2)

    {

    #someDiv 

    { background-image: url(samplebg2x.png);

      -webkit-background-size:190px 142px;  

      background-repeat: repeat;

    }

  }


Now let's take a look on both devices:

1) iPhone 3G generation

2) iPhone 4 with retina display

Voila :) now our background-images look very sharp on both devices. 



    1