Retina.js: Imágenes en alta resolución según corresponda

Retina.js es un script open source para facilitar el trabajo de servir imágenes en alta resolución solo a dispositivos con la capacidad de hacerlo. Ahorrando transferencia y tiempos de descarga al no desperdiciar ancho de banda enviando imágenes en alta resolución a dispositivos que no pueden visualizarlas de forma nativa.

El funcionamiento es muy sencillo, cuando el usuario carga la pagina, retina.js chequea si el dispositivo cuenta con un retina display, en caso afirmativo realiza la verificación en el servidor si la imagen se encuentra en alta resolución, de encontrarla el script automáticamente añade el modificador (@2x).

Por ejemplo la imagen en el documentos se ve así:

<img src="/images/my_image.png" />

Si el script detecta un retina display y la misma imagen en alta resolución alojada en el servidor, modificara la ruta a:

"/images/my_image@2x.png"

Como instalar retina.js:

<script type="text/javascript" src="/scripts/retina.js"></script>

Simplemente con asignar la ruta al script el mismo realizara su trabajo sin inconvenientes, no hace falta inicializar el script ni nada similar. Más fácil imposible 😀