Soporte para pantallas tipo retina | Adrenalina

Soporte para pantallas tipo retina

Publicado Por | 20 junio , 2014 | Desarrollo Web, Diseño web | No Comments
retina-display

Qué es Retina?

“Retina” es el nombre de marca de Apple para sus pantallas con el doble de densidad, aunque otros fabricantes están y han creado pantallas parecidas. Esta tecnología la podemos encontrar en iPhones, iPads, MacBook Pros y otros dispositivos.

Por ejemplo, el MacBook Pro 15″ tiene una resolución de 2,880×1,800. A esta escala, la mayoría de personas a una distancia normal las aplicaciones y los websites son demasiado pequeños.

Por tanto, el dispositivo revierte a un resolución estándar de 1,440×900, pero los pixels sobrantes pueden usarse para que las fuentes y los gráficos se vean más nítidos.

Cuál es el problema?

Las imágenes de mapas de bits con una resolución estándar pueden visualizarse pixeladas en una pantalla Retina. Una fotografía de tamaño 400×300 se ampliará a 800×600, sin embargo no ganará más detalles ni nitidez. Esto podemos notarlo especialmente cuando lo comparamos con fuentes nítidas o con imágenes de alta resolución.

La realidad

Actualmente, este sistema sólo está disponible en dispositivos de alta gama. Es decir, estamos hablando que el porcentaje de gente usando este tipo de dispositivos es muy bajo.

Dicho de otra manera, si no estamos desarrollando para el 1% de usuarios que usan ie6/7, tampoco debería preocuparnos en exceso por la gente usando pantallas tipo Retina. Especialmente cuando ellos pueden ver de forma normal la web.

Dicho esto, eventualmente este tipo de pantallas estarán en todos los dispositivos. Por lo que, no hay razón para, por lo menos, tenerlo en cuenta y planear a largo plazo. Vamos a ver algunas opciones por orden de recomendación:

1. Uso de SVGs y efectos CSS3

La clave aquí es el uso de Scalable Vector Graphics que como su nombre indica..son escalables! No importa quan grande un svg se muestra, siempre se verá nítido porqué está definido usando vectores (lineas y formas) en lugar de pixels individuales.

El formato SVG no es practico para fotografías pero es perfecto para logos, diagramas y gráficos. El principal incoveniente que tiene este formato es que no tiene soporte en ie8 y anteriores, pero siempre podemos proporcionar un PNG al que volver.

Por otro lado, también podemos substituir algunas imágenes por completo con css3. Por ejemplo, títulos, degradados o sombras pueden ser reproducidos usando únicamente css3. Estos se renderizarán a mejor calidad, resultando en menos peticiones http y un uso mejor de ancho de banda.

2. Uso de Iconos Webfonts

Al igual que los SVGs las fuentes son vectores. Es decir, también son escalables y por tanto podemos usar fuentes que contengan iconos. Son perfectos para pequeñas formas usadas frecuentemente como sobres de email, teléfonos, logos sociales, etc. Y están soportados en todos los navegadores incluyendo ie6+.

Existen multitud de fuentes con iconos, tanto comerciales como gratuitas. O incluso se puede crear un pequeño set de iconos con algunas aplicaciones online.
Or you can use a hosted font service such as We Love Icon Fonts.

3. Usar imágenes de alta resolución, en algunos casos

Retina dispone de 4 veces más pixels que las pantallas normales. Si tienes una imagen de 400×300, necesitas usar una de 800×600 como alternativa para que se muestre correctamente.

Sin embargo, el archivo de alta resolución puede no ser necesariamente 4 veces más grande. Cada imagen es diferente pero si contiene grandes bloques del mismo color o detalles poco importantes, puede ser práctico usar una imagen de 800×600 y dejar que el navegador la redimensione.

4. Usar substitución de imágenes con CSS

Habrá ocasiones en las que la versión de alta resolución ocupará 4 veces el espacio que la versión estándar. En este caso podremos usar técnicas de reemplazo de imágenes. La siguiente media query puede ser usada:

#myimage {
width: 400px;
height: 300px;
background: url(lo-res.jpg) 0 0 no-repeat;
}
@media
screen and (-webkit-min-device-pixel-ratio: 1.5),
screen and (-moz-min-device-pixel-ratio: 1.5),
screen and (min-device-pixel-ratio: 1.5) {
#myimage {
background-image: url(hi-res.jpg);
}
}

Los inconvenientes:

Deberemos crear y mantener dos conjuntos de imágenes.
Algunos navegadores descargarán las dos imágenes.
En algunos casos, en los que el dispositivo se descarga la imagen desde una conexión lenta, puede ser contraproducente incrementar el tiempo de carga.

5. Uso de JavaScript para sustitución de imágenes

La detección de pantallas de halta densidad puede ser detectada mediante el siguiente código:

var isRetina = (
window.devicePixelRatio > 1 ||
(window.matchMedia && window.matchMedia(
"(-webkit-min-device-pixel-ratio: 1.5),
(-moz-min-device-pixel-ratio: 1.5),
(min-device-pixel-ratio: 1.5)").matches)
);

Una vez detectada la pantalla podemos:

Ir imagen por imagen, extraer la url y cargar mediante ajax una imagen de más resolución. En caso de éxito, substituir la imagen con la nueva.

Con este sistema, las imágenes se descargarán dos veces, pero la segunda ocurrirá en segundo plano después de la carga de la página.

Autor: Lluis Torns

Estudiamos y analizamos su negocio en profundidad, definimos objetivos y planteamos la estrategia de marketing más adecuada centrándonos en conseguir cada uno de los objetivos propuestos. Solicita Presupuesto Ahora

Uso de cookies

En este sitio web utilizamos cookies propias y de terceros para mejorar nuestros servicios, para que usted tenga la mejor experiencia de usuario y analizar su visita. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.