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.

Imagenes para retina display

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 :D

from Kabytes http://www.kabytes.com/programacion/retina-js-imagenes-en-alta-resolucion-segun-corresponda/?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+kabytes+%28Kabytes%29

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: