Optimización y flujo de trabajo para retina displays
Buenas,
Las pantallas de alta densidad cada vez están más presentes y el paradigma de los 72dpi de tan sólo hace cinco años está obsoleto. En éste nuevo contexto, debemos tener en consideración, cuando preparamos un proyecto, diseñamos y desarrollamos una página web, éste factor.
Hace un tiempo que, para los proyectos web, vengo desarrollando una solución de "compromiso", entre la burrada de píxeles por pulgada que puede ofrecer una pantalla como la de un iPad Air o Nexus5 (por citar sólo dos ejemplos con los que he podido trabajar) y la de los monitores de sobremesa de la inmensa mayoría de ordenadores. Así, preparando las fotos entre 150 y 200dpi parace un término medio, aunque –aquí viene el drama– los tiempos de carga aumentan considerablemente.
Además, no sólo las imagenes sufren un cambio de calidad y flujo de trabajo, los gráficos tales como pictogramas, botones, etc. en el medio web, pueden aprovecharse del formato SVG ante el PNG que usábamos hasta ahora. Y ésto también puede contemplarse en beneficio de la experiencia de usuario, que, no lo olvidemos, también es diseño y que como profesionales debemos atender.
Me encuentro que algunos themes (sobretodo de Wordpress) empiezan a tener preinstalados plug-ins que contemplan el tratamiento de las imagenes dependiendo de la fuente de salida, es decir, del dispositivo con el que el usuario interacutará con la página. Se les cataloga de "retina ready".
La cuestión es que no entiendo cómo terminan de funcionar a nivel de optimización. El cargar dos o tres versiones de las fotos y que un script –si es que es un script, quizás es totalmente del lado del servidor y me he equivocado de foro :)– se encargue de ofrecer unas u otras dependiendo de las características del dispositivo, a nivel teórico, lo comprendo. Pero qué contextos o escenarios hacen que se escojan unas frente a las otras. Por ejemplo, si tengo un iPhone5S, pero estoy en el metro, sin 3/4G y entro en una web "retina ready", el intérprete (el móvil) va a tener capacidad para visualizar la mejor de las versiones, pero el factor red telefónica va a jugar en contra de su descarga y, por extensión, de la experiencia.
Lo pregunto para ver si el proceso es mejorable e, incluso, extrapolable a otros flujos de trabajo que no pasen por el tratamiento de las imagenes mediante el popular CMS, es decir, su inclusión en proyectos diseñados y programados desde cero.
Alguien con experiencia sobre el tema puede iluminarnos?
Haciendo el mono por Google, he llegado aquí. Quizás sea un buen punto de partida. Quizás no.
Saludos y muchas gracias! :)
luishj
Usa un preprocesador CSS para generar el código automáticamente y listo.
Y respeta los 72 dpi para todas las imágenes, incluyendo retina. Lo único, hazlas al doble de tamaño en ancho y alto. Al fin y al cabo hablamos de pixeles CSS.p
gerardus
Justo ésta semana los de SM han publicado éste artículo: http://mobile.smashingmagazine.com/2014/02/03/one-solution-to-responsive-images/
gerardus
Sudemos pues :)))
Con decentes te refieres a un poco más de 72dpi o simplemente que no se "nos vaya la mano" con la optimización del guardado para web y que conserven cierta nitidez?
asdfasdf-1
Hola Gerard,
Este es uno de los temas más complejos y, por ahora, irresueltos en diseño web, adaptativo o no. Debes saber lo siguiente:
1. No hay una solución definitiva
2. No hay una solució óptima
3. Por ahora solo podemos detectar: las dimensiones del navegador, del dispositivo o bien las capacidades del navegador
4. Cualquier solución requiere, en mayor o menor medida, de JavaScript (no hay, ni habrá, soluciones fiables solo a nivel de servidor)
Lo primero que hay que decir es que cualquier intento de servir imágenes de mayor resolución a los dispositivos que lo toleran debe aplicarse como extra, pero nunca como opción por defecto. Los dispositivos de mayor densidad no requiren imágenes de mayor densidad, solo las aceptan para mejorar (dicen) la experiencia de usuario, así que castigar a todos los usuarios com imàgenes de mayor peso solo porqué en algunos dispositivos esto va a molar más, es una mala práctica. De entrada, deberiamos servir siempre imágenes lo más pequeñas y ligeras posibles, y valorar mediante algun "script" si vale la pena servirlas de mayor resolución, y servirlas en caso afirmativo.
Las imágenes pueden ser de dos fuentes: de hojas de estilo (CSS) o como parte del HTML. En el primer caso, lo mejor es que por defecto todas las imágenes sean "normales", y mediante una "media-query" servir otras para dispositivos con mayor densidad, por ejemplo así:
<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="/css/iphone.css" />
Esta hoja de estilo tan solo deberia modificar las rutas de las imágenes. Aquí hay una compilación.
Para las imágenes del HTML, con ejectuar un script que evalúe si vale la pena servir imágenes de mayor resolución y que modifique las rutas de estas sería suficiente. Hay que decir que hay mucahs variables y muchos pros y contras, y personalmente solo usaría un script que modificara las rutas una vez las imágenes de menor resolución ya están cargadas, para por lo menos assegurar que el contenido se carga un poco más rápido. Evidentemente, esto implica duplicar los archivos descargados, lo cual puede ser un problema en algunos casos.
Hay una solución intermedia pero que, como no, tiene sus contras: Adaptive">http://adaptive-images.com/">Adaptive Images. És un script PHP que después de un pequeño código de JavaScript sirve las imagenes segun el tamaño máximo al que puede llegar el navegador. El problema és que requiere que de entrada se sirvan imágenes lo más grande posibles, lo cual és un problemón si el script falla.
Como ves, es un tema complicado cuya solución caldria valorar en cada situación. En general, mi postura acostumbra a ser sudar la polla (con perdón) de las pantallas de retina y servir imágenes decentes para la mayoría de dispositivos. No luce tanto, pero es lo más adecuado a la mayoría de situaciones. En el caso del CSS es distinto, porque podemos apuntar fácilmente a dispositivos concretos sin necesidad de liarla.
ponchi
Yo he usado una solución para cargar los carruseles de banners si no estamos en dispositivos móviles, usando este script de php que detecta el tipo dispositivo carga un tipo de imágenes u otras. Respecto a las conexiones no se si hay algún tipo script.
Todo lo que quieras averiguar sobre el dispositivo y conexión para cargar un tipo de imágenes u otras tendrá que ser un script del lado del servidor porque sino te cargará todas y no resuelves el problema que planteas
gerardus
Genial Samuel! Gracias :)
Sí, conozco a Smashing pero gracias por el link.
Y totalmente de acuerdo con tu posdata.
samuelvgm
No hay solución óptima para servir una imagen dependiendo de la resolución/densidad del dispositivo. Y a día de hoy, mucho menos para detectar el ancho de banda del mismo.
En este enlace analizan las ventajas/inconvenientes de cada aproximación y creo que responden las dudas que planteas aquí.
http://mobile.smashingmagazine.com/2013/07/08/choosing-a-responsive-image-solution/
Si no conocías Smashing Magazine, es la biblia, síguelos :)
PD: Aunque tu haces referencia a pantallas retina, realmente esto es un problema que esta ligado a las imágenes en el ámbito "responsive".