고해상도 모바일 대응 이미지 해상도 처리 방법

모바일 웹페이지 마크업후 고해상도 기기(갤럭시S, 아이폰4이상 등등.. 최신기기)에서 이미지가 뭉그러져 보이는 현상이 생깁니다.
이는 기기 해상도가 높기 때문인데요.

li{list-style:none; float:left; width:57px;}
.icon{display:block; width:57px; height:57px; background:url(x1.jpg) no-repeat 0 0; -webkit-background-size:100px 100px;}
@media screen and(-webkit-min-device-pixel-ratio:1.5){.ico{background-image:url(x1_5.jpg);}}
@media screen and(-webkit-min-device-pixel-ratio:2.0){.ico{background-image:url(x2.jpg);}}