how to set image for ipad application that support retina display

问题

i need to update my application so it can support retina display in New iPad, but i still have some doubt about it. Is it right that we have to create a new image that support the resolution for retina display and still keep the last image for the application without retina display support? If yes, so our app will have a big size, right? Is there any way to make it just one? Maybe just use the high resolution image, but resize them for the regular application (the application that did not support retina display). Can somebody help me?

回答1:

You have to create two images. one for old resolution and one for retina display. If i remember, you have only to add @x2 on retina images:

mypicture.jpg  (old display)

mypicture@x2.jpg  (retina display)

I hope, this way is similar to the iphone.

回答2:

For web you can still use the @2x naming convention. Declare the background image and set the size. In the retina display media query call the high-res image.

figure{background-image:url(../img/imageName.png);background-size:57px 57px;}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
  only screen and (-o-min-device-pixel-ratio: 3/2),
  only screen and (min--moz-device-pixel-ratio: 1.5),
  only screen and (min-device-pixel-ratio: 1.5) {

figure{background-image:url(../img/imageName@2x.png);}

}

There are server side solutions too, here's one: Link

来源：https://stackoverflow.com/questions/9920353/how-to-set-image-for-ipad-application-that-support-retina-display