4k, 5k, Retina & beyond

retina-vs-standard.jpg

TL;DR: la respuesta es muy sencilla: básicamente es una pantalla que tiene una mayor densidad de pixeles que una pantalla "convencional".

Elihú VillarausElihú Villaraus

Por: Elihú Villaraus

lectura de 8 min

en Creatividad Digital

Hace unos momentos, una persona me preguntaba si sabía cómo funcionaba una pantalla Retina.

Suponiendo que no quería saber cómo funcionaba el hardware, la respuesta es muy sencilla: básicamente es una pantalla que tiene una mayor densidad de pixeles que una pantalla “convencional”.

sony-4k-vs-hd.png

Desde hace algunos años, la necesidad de usar pantallas más pequeñas ha llevado a la industria a usar pantallas con mayor resolución. Mientras hace 15 años era bastante común tener una televisión análoga SDTV (standard definition tv), en la actualidad, un smartphone despliega más pixeles en su pantalla de 5 pulgadas que una televisión SDTV. Mientras que la televisión en 3D fue una moda pasajera, las pantallas con alta resolución de pixeles son una tendencia que irá más rápido de lo que el usuario promedio pueda consumir.

Recientemente han habido críticas sobre las consolas de videojuegos de nueva generación y su incapacidad por procesar resoluciones 4k. Por otra parte, el nuevo smartphone de Google, Nexus 6, en su “pequeña” pantalla de 6 pulgadas, tiene una densidad de pixeles equivalente a 2k: el doble que una televisión Full HD.

¿Pero cómo afecta todo esto el diseño web y el Marketing digital?

Bueno, como desarrolladores, tenemos que estar listos para este cambio. Así como alguna vez lidiamos con Internet Explorer 6, 7, 8, 9… tendremos que hacer hojas de estilo específicas para pantallas Retina, 4K, UHDTV, y gracias a la nueva iMac, 5K, ¿por qué no? En principio, tenemos que hacer una hoja de estilo que cargue imágenes en tamaño familiar (si existe el tamaño familiar para imágenes, google it) para resoluciones 4K (y etc.), y otra hoja de estilo para cargar las imágenes optimizadas para computadora de escritorio y móviles. Claro, si usas una sola hoja de estilo, afectará la experiencia de usuario: si usas el css para escritorio, las pantallas 4K tendrán gráficos pobres; si usas sólo el css para 4k, la navegación en computadoras de escritorio será poco ágil.

¿Cómo evitar que una página optimizada para 4K sea pesada?

Bueno, no hay mucha opción con las fotografías. Con iconos, dibujos, esquemas y gráficos con una paleta de colores limitada, siempre hay que guardarlos en formato PNG: pueden resultar muy ligeros sin que el tamaño afecte demasiado el peso final del archivo.

La otra alternativa, es la más hermosa de todas. Usar gráficos vectoriales de código abierto: SVG. Como siempre, el inconveniente es que Internet Explorer no los soporta muy bien y en versiones antiguas el soporte es nulo y tenemos que recurrir a hacks en el css. Pero la mayoría de exploradores actuales lo soportan. Así que, sólo basta con insertar un archivo vectorial y cambiar el tamaño según la resolución de la pantalla.

Por otra parte, Adobe proporciona una herramienta bastante útil para generar gráficos vectoriales directamente en código para copiar/pegar en HTML.

  • Desde Illustrator (estoy usando la versión CC) selecciona un gráfico básico y cópialo.
  • Abre tu editor de código favorito (o cualquier aplicación donde puedas pegar texto) y pega lo que acabas de copiar.
  • Aparecerá el código que genera ese gráfico vectorial.
  • Ahora sólo debes insertarlo en algún HTML que quieras publicar, como la siguiente imagen:
marketinc negro horizontal.svg

La herramienta es limitada: no puedes convertir gráficos muy complejos, con efectos o retículas de color, pero, vale la pena experimentar hasta dónde puedes llegar copiando y pegando código. Te garantizo que no habrá gráficos más ligeros que estos. Puedes ver nuestro nuevo logo en svg.