La pantalla del iphone 4 es revolucionaria ya que es el primer dispositivo mobil que utiliza una densidad de pixeles superior a cualquier otra. Es gracias a ésto que la lectura es mucho más fina.

Ahora el problema es que en general cuando uno crea gráficos para pantallas, especialmente para la web lo hace en 72 dpi cuando los nuevos gráficos para retina debieran ser en 326.

Otro problema es que todavía hay dispositivos sin la nueva pantalla retina, lo que se traslada a que necesitamos duplicar la cantidad de gráficos: los comunes y los de mayor densidad de pixeles. Aún más necesitamos una manera de decidir cual mostrar, osea detectar que es un dispositivo con retina y mostrar los gráficos correspondientes de lo contrario seguir usando los gráficos comunes.

Con éste problema en mente encontré un plugin de jQuery que soluciona éste problema. Su implementación es súper sencilla.

<script src="js/jquery.retina.js" type="text/javascript"></script> 
<script type="text/javascript">  
     $(document).ready(function() { 
          $('img').retina(); 
     }); 
</script>
más información:

http://troymcilvena.com/post/998277515/jquery-retina