What methods are taken to ensure that mobile web images are rendered properly in all mobile devices?

Using CSS, and two different instances of images, I am able to achieve the results I want to see on two different mobile devices. For devices using a screen width of 320, I implement the images as image1.png. For the newest devices, such as the iPhone4 (Retina Display) I implement the images as image1@2x.png. This requires a normal.css stylesheet as well as a hirez.css stylesheet which is called by using

<link href="theme/hirez.css" rel="stylesheet" type="text/css"
    media="only screen and (-webkit-min-device-pixel-ratio: 1.5)" />

However, these new Amoled / Super Amoled phones are rendering these 2x images very poorly; it makes all 2x images appear pixellated.

I am trying to figure out what I am doing wrong... I have 2 sets of images for each filename, and calling the correct css sheet.开发者_Python百科.. any help would be greatly appreciated.

you should simply use the high res image and display it at 50% of it's height and width on the page.