29 de mayo de 2012

¿Trabajo con imágenes en alta o en baja entonces?

A raíz de la popularización de las publicaciones digitales y de los diferentes modelos de tableta que existen en el mercado, aparece de manera sistemática una pregunta en casi todos los cursos que comparto: "Entonces… ¿tengo que trabajar con las imágenes en alta o en baja, o ambas… o qué?"

La respuesta a esta pregunta puede ser más o menos simple dependiendo si queremos ser rigurosos o expeditivos. "Trabaja siempre con imágenes en alta", puede ser una respuesta para despachar una incómoda interrupción y seguir con un temario.


Una imagen digital tiene un número de píxels que tendrá que repartir dentro del área de impresión (en papel o pantalla) que le digamos. Si este área no coincide en píxels con la de la imagen, ésta se remuestreará.



Ahora bien, si queremos entender el trasfondo de la cuestión de manera sólida en lugar de expender recetas exprés, estaremos obligados a detenernos un tiempo en esta cuestión, que aunque no es difícil, es algo compleja.

Empecemos por definir algún concepto que nos será de utilidad, aunque probablemente ya sean conocidos por la mayoría de vosotros:

Resolución real de una imagen: es la cantidad de puntos o píxels que tiene una imagen por unidad de tamaño física. Pueden ser píxels por centímetro cuadrado, puntos de impresión por milímetro cuadrado… lo más usual es emplear el dpi (Dots Per Inch, o puntos por pulgada) y el ppi (Pixels Per Inch, o píxeles por pulgada).

 La primera unidad hace referencia a la resolución de una imagen en la impresión en papel, ya que informa sobre la densidad de puntos impresos por unidad de longitud del papel, mientras que la segunda sería el equivalente en el entorno de la pantalla. 

 En realidad, el dato más básico en cuanto al tamaño de una imagen digital no es tanto la resolución si no su tamaño real, desprovisto de la información de cómo o dónde irá impresa es imagen. Y el tamaño real es sencillamente su anchura por altura medidas en píxels. Por ejemplo, una fotografía digital de 1200x800 px. La información sobre su resolución solamente aparecerá en cuanto especifiquemos cuál será tu tamaño de impresión, en centímetros, milímetros o pulgadas.

Aspecto del detalle de la ventana de Vínculos de Adobe InDesign donde nos informa de la resolución real de una imagen colocada ("PPI reales") y la resolución que resultará una vez que la hemos encajado en su tamaño de impresión ("PPI efectivos")

Resolución efectiva de una imagen: es la resolución en dpi o ppi de una imagen digital una vez especificado el contexto del área de impresión que ocupará. Es decir, una imagen de 1200x800 px de tamaño tendrá una resolución de unos 300 dpi/ppi si la encajamos en un marco de impresión de unas dimensiones de unos  10 x 6,7 cm. La misma imagen encajada en un recuadro de 20 x 14 cm estará a 150 dpi/ppi de resolución.

Estos términos no son fáciles de visualizar cuando trabajamos en papel donde, una vez fijados los tamaños, éstos no varían. Por ejemplo, podemos decidir maquetar un documento de papel en tamaño A4 (210x297 mm) y dentro insertar esa imagen de 1200x800 px que, si queremos que aparezca en "alta resolución" (300 dpi), dicha imagen tendrá que ocupar un rectángulo de aproximadamente 10 cm de anchura por 6,7 cm de altura. En otras palabras, casi la mitad de la anchura de la hoja de papel por casi un tercio de su altura. Sencillo de imaginar.

Ahora bien, cuando abordamos una publicación digital, la cosa se complica. ¿Por qué? Pues fundamentalmente por la diversidad de soportes de hardware, lo que implica diversidad de pantallas y resoluciones. Diversidad en tamaño físico y por lo tanto, en resolución, en este caso en ppi (píxels por pulgada).

Páginas web, Apps, Revistas digitales, Libros electrónicos... todos estos productos de edición digital pueden verse afectados por los cambios en las resoluciones dependiendo en qué dispositivo las vea el lector final.

Como muestra, podemos citar una breve relación de tamaños físicos de pantalla vs. tamaño el píxels y por lo tanto resoluciones, para algunos los dispositivos móviles más populares del mercado ahora mismo:
  • iPhone 4S.  pantalla de 3.5" , 960x640 px (326 ppi)
  • Samsung Galaxy S3. pantalla de 4.8", 1280x720 px (306 ppi)
  • iPad 1 y 2. pantalla de 9.7", 1024x768 px (132 ppi)
  • Nuevo iPad. pantalla de 9.7", 2048x1536 px (264 ppi)
  • Samsung Galaxy Tab. pantalla de 7", 1024x600 px (170 ppi)
Es fácil apreciar la gran disparidad de tamaños y resoluciones. ahora bien ¿qué sucede con los contenidos bitmap, es decir, con las imágenes? ¿se verán bien? ¿se verán "pixeladas"?

La respuesta es: DEPENDE. Y, por desgracia, depende de varios factores, algunos a priori que no podemos controlar del todo. Pero que nadie se alarme: hay soluciones.

Podemos ilustrarlo con el caso más popular a día de hoy: la divergencia de resoluciones entre los iPads 1 y 2 (1024x768 px) y el Nuevo iPad (2048x1536 px). A partir de ahora, hablaremos de resoluciones 1024 y 2048 respectivamente para hacer referencia a los iPads 'viejos' y el Nuevo iPad. En el caso de las aplicaciones ("apps"), el nuevo iPad simplemente adapta los contenidos a la nueva resolución, aprovechando que la proporción de aspecto es la misma y el tamaño físico de la pantalla es el mismo (9.7"). Esto hace que las imágenes de una app que, en el iPad 1 y 2 se veían bien, en el Nuevo iPad se vean "mal", o sea, pixeladas.

¿Qué quiere decir que una imagen se ve pixelada?  Pues que el ojo humano es capaz de resolver los píxels individuales de esa imagen. Es decir, podemos distinguir los pixels uno a uno y eso hace que las curvas y figuras de esa imagen no se vean suaves si no con ese efecto rasgado o de "diente de sierra".

Tanto en el iPhone 4 como en el Nuevo iPad, el principal argumento de venta de Apple fue el de la Retina Display. ¿Qué quiere decir esto? Precisamente que la densidad de píxels por pulgada de esas pantallas es tan elevado que hace que el tamaño del píxel sea tan pequeño que el ojo humano no es capaz de resolver los píxels individuales.

En este punto hemos llegado al meollo de la cuestión. La clave está en este concepto: el tamaño del píxel. Y éste es un tema puramente de optometría.

A más grande es el tamaño real de una pantalla, más lejos la situamos de los ojos (autor: Ignacio Lirio)


Está claro que las unidades de medir imágenes digitales son los píxels. Pero el ojo humano ¿en qué unidades ve? ¿en milímetros? ¿en puntos? La respuesta es que nuestros ojos ven ángulos. Grados, minutos de arco, segundos de arco... ya que el tamaño de un objeto a nuestra vista depende obviamente de a qué distancia se encuentre:

Es por eso que en el caso de una pantalla que es físicamente pequeña, como la del iPhone, la resolución para que sea Retina Display es mayor (326 ppi) que para el iPad (236 ppi). Un tablet con una pantalla más grade habría que leerlo a más distancia y bastaría una resolución menor (150 ppi quizá) para que su resolución fuera "Retina".

 Esto es así porque el iPad tiene una pantalla de mayor tamaño físico y por lo tanto se suele situar a una distancia mayor de los ojos para leer que en el caso de un iPhone. A mayor distancia del plano de enfoque, mayor puede ser el tamaño del píxel para que no seamos capaces de resolverlo.

Geometría de la resolución de píxels de una pantalla a la vista. La columna de cuadrados representa los píxels de la pantalla. El ojo humano no puede resolver los píxels contiguos si la distancia entre ellos es menor de un valor límite ("Retina"), que está relacionado con su tamaño angular según la expresión de la imagen. (autor: Ignacio Lirio)

Ahora bien, ¿En qué afecta esto a la hora de diseñar o maquetar documentos digitales?

Depende del entorno. No es lo mismo una página web que un libro EPUB, o una App. En el caso particular de una página web y el iPhone/iPad (es decir, navegador Safari), éste — Safari — adapta automáticamente el contenido de toda la página HTML al tamaño estándar del denominado viewport, que son 980px de anchura.  Esto quiere decir que el tamaño relativo de impresión de nuestras imágenes de nuestra página web será variable, por lo que la resolución efectiva de las imágenes también lo será. 

Así que, según cómo hayamos hecho la maquetación CSS, la imagen que ocupaba 500 px de anchura en el iPad 1 y 2 ocupará 1000 px (el doble) de anchura en el Nuevo iPad, o 250 px (la mitad). O sea, que por más que desde Photoshop o similar hayamos creado esa imagen a una resolución determinada, puede ser que según donde se vea y en qué contexto se vea, esa resolución acabe siendo enriquecida o empobrecida.

En el caso de las Apps que se escalan proporcionalmente del iPad antiguo al nuevo, este cambio de tamaño es proporcional y es justo el doble.

Esto quiere decir que una imagen cuadrada que en la maquetación de la App a 1024x768 px (iPad 1 y 2) está diseñada para ocupar un área de 500 x 500 px, en el nuevo iPad ocupará la misma área proporcional (no dejará márgenes en blanco, el diseño no fluye...) y por lo tanto ocupará un área de 1000 x 1000 px. Esto es confortable para el usuario que verá que la misma imagen ocupa la misma proporción de su campo visual. Ahora bien, este aumento proporcional se hace a costa de los píxels de la imagen. Y aquí es donde entra la idea central de resolución real vs. resolución efectiva.

El cuadrado de 500 x 500 px es el marco que cobija a nuestra imagen. Esto no quiere decir que nuestra imagen tenga que tener exactamente 500 x 500 px. Esto solamente sería así si la imagen tuviera una resolución real de 132 ppi, la del iPad 1 y 2 a 1024.

Photoshop trabaja a una resolución de pantalla estándar de 72 dpi, que se puede cambiar en las Preferencias del programa.


Cuando hay un cambio de entorno, en este caso a una pantalla igual de grande pero con el doble de resolución, se produce un remuestreado de la imagen. Esto quiere decir que hay que representar dicha imagen pero esta vez en un área proporcional de 1000 x 1000 px, para que ocupe exactamente la misma área en pulgadas.

 Si la imagen original medía precisamente 500x500 px, para poder rellenar el mismo espacio el tamaño del píxel tendrá que ser el doble. Ahora bien, si la imagen original estaba encajada en un marco de 500 x 500 px pero realmente era un archivo de, por ejemplo, 2000 x 2000 px ; la imagen tiene suficientes píxels como para poder representarla dentro de una caja de 1000 x 1000 px sin tener que aumentar el tamaño de cada píxel, por lo que podremos visualizar la imagen con el tamaño del píxel de la imagen idéntico al tamaño del píxel de la pantalla. Entonces, si la pantalla está en alta resolución, la imagen, también.

Regresando al plano más práctico, el del diseñador sentado delante de su Nuevo Documento en Photoshop: a la hora de crear imágenes para maquetar en digital, en pantallas... ¿qué cifras pongo en los campos de tamaño de documento campo "resolución"? 


En este ejemplo, se está creando una imagen de 6x3 cm, a la resolución del nuevo iPad (264 ppi). Esto generará una imagen de unos 560x280 px.

La respuesta puede ser: Ajusta el tamaño de tu imagen en unidades físicas: centímetros, milímetros o pulgadas, según el tamaño real que quieres que ocupen. Hay dos resoluciones de iPad ¡pero un mismo tamaño de pantalla! y ajusta la resolución a —por lo menos— 264 ppi , que es la resolución de la pantalla del Nuevo iPad, la máxima.

De este modo tendrás una imagen con unas dimensiones en píxels suficiente para que se vea de manera óptima en ambas pantallas o resoluciones, ocupando el tamaño de maquetación en cm o mm que le des, sin temer porque el tamaño del píxel de la imagen se vea magnificado al punto que los lectores lo puedan distinguir.

13 comentarios:

  1. La resolución del nuevo iPad es de 264 ppi. Lo ideal sería poner la imagen de Photoshop a esta resolución. Supongo que es un baile de números, pero con el lío de tamaños, densidad de píxeles y demás… sólo hace falta 'el genio maligno' de las erratas para añadir más confusión. Un saludo.

    ResponderEliminar
  2. Efectivamente 'Deivis' ésa es la resolución, que es justo el doble que la del iPad 1 y 2 (132ppi). Gracias por el aviso, que he visto era un lapsus acarreado durante todo el artículo. Ya está corregido. Una pregunta: ¿entonces te parece confuso este post?

    ResponderEliminar
    Respuestas
    1. No, el artículo está estupendo, lo confuso es la relación entre tamaño, resolución y dispositivo de salida –de toda la vida–. En este artículo, el consejo final me parece de lo más adecuado, guardar la imagen para la resolución máxima actual (264 ppp).

      Eliminar
  3. Ejercicio: Si la imagen estuviera a la resolución de la errata (236 ppi) ¿seríamos capaces igualmente de resolver el píxel?

    ResponderEliminar
  4. Este articulo me ha venido de perlas, es una discusion que tuve en su dia y que no conseguí que me llegaran a entender, aqui lo dices muy clarito, ahora, para trabajar para el nuevo ipad, en photoshop debemos crear documentos de 1024x768 de tamaño y a 264 ppp de resolucion. Y, de cara a indesign? no tengo muy clara una cosa, selecciono entorno web, le doy el tamaño de 1024x768 al documento, pero y las imagenes? hay que tocar en preferencias algo? indesign trabaja por defecto con imagenes a 300 ppp no? deberia indicarle que ahora las imagenes para que esten al 100% de su tamaño debe trabajarlas a 264? estoy un poco confuso con este tema, muchas gracias por adelantado.

    ResponderEliminar
  5. 'Anónimo', no es exactamente así. De hecho, el corolario de este artículo viene a decir precisamente que o bien creas en Photoshop tu archivo pensando solamente en las dimensiones en píxels sin ver la resolución o bien pensando solamente en sus dimensiones físicas (mm, por ejemplo) y teniendo en cuenta la resolución. La confusión más común es precisamente estar pendiente del tamaño en píxels y la resolución a la vez, como expresas en tu comentario.

    En cuanto al tamaño de la página en InDesign, depende de cómo estés creando tu .Folio. Si tu .Folio es del tipo PDF, si lo creas a 1024x768 el nuevo iPad lo "estirará" hasta encajarlo a su resolución. Esto quiere decir que todos los contenidos de esa página a 1024 serán aumentados. Si son contenidos vectoriales, su definición no se verá afectada. Si son contenidos bitmap (imágenes) serán remuestreadas, conservando su tamaño de impresión. Entonces, si esas imágenes tienen suficientes ppi de resolución (264 ppi en este ejemplo) el remuestreo no afectará al tamaño del píxel y tendrán una buena definición.

    Pero InDesign trabaja con la resolución efectiva de las imágenes, que es el producto del encaje de las imágenes originales (con su resolución original) en el contenedor donde estén situadas. Sólo tienes que centrarte en el tamaño de esos contenedores, y luego ver qué resolución efectiva resulta.

    ResponderEliminar
  6. bufff, te entiendo en la mayoria de lo que dices, pero sigue habiendo algo que se me escapa y no se ni como preguntarlo.
    A ver, si yo creo una imagen de fondo en photoshop para el ipad 1 y 2 y que esta se vea bien, el documento a crear seria 1024x768 a 72ppp? y para el ipad nuevo 1536x2048 a 72ppp? es que lo que no veo, es lo de trabajar con las imagenes pensando en sus tamaño en mm y a la resolucion adecuada 132 o 264, ya que tu estas trabajando en indesign en pixels y con tamaños dados en pixels, si yo creo un marco para una imagen, voy a crear un marco de 500x500 pixels, cual es su equivalencia en mm para que yo pueda poner esa imagen en su tamaño en mm y a 132 o 264? me entiendes? o me estoy liando?

    ResponderEliminar
  7. Mmmm… creo que te estás liando un poquito.

    Haz la siguiente prueba: crea dos archivos con Photoshop, del mismo tamaño exacto (p. ej. 500 x 500 px) pero uno a 100 ppi y el otro a 200 ppi. Pon ambas imágenes al 100% ¿Ves diferencias en su tamaño?

    Ambas imágenes tienen el mismo número de píxels. Solo trabajaras con objetos cuyo tamaño estuviera referenciado en unidades reales (mm, cm…) que verías su diferencia de tamaño en una u otra.

    En tu caso, te interesa crear una imagen de fondo con las proporciones adecuadas, es decir 4:3. Si decides trabajar en unidades de pixels, esto puede ser 1024x768 o 2048x1536. Esos píxels acabarán repartidos (o remuestreados) en la misma área de 9,7". ¿Qué quiere decir esto? Que si tu imagen de fondo de 1024 acaba siendo adaptada automáticamente en el nuevo iPad a 2048, un pixel de tu imagen original estará representado con 4 pixels de la nueva pantalla ("aumenta el tamaño del pixel").

    En caso inverso, una imagen a 2048 en el iPad antiguo será remuestrada de tal modo que un pixel será el remuestreo estadístico de 4 pixels. Es decir, tu imagen será reducida en información pero no en tamaño, ¡ocupará las mismas 9,7 pulgadas!

    El caso es que si tienes que trabajar solamente con una imagen, ésta acabará remuestreada en alguno de los dos casos, pero es preferible remuestrear de más grande a más pequeño que a la inversa. Lo ideal sería tener dos diseños de la misma imagen (a 1024 y a 2048) pero si no, trabaja entonces únicamente en alta (a 2048).

    Por último, haz el siguiente experimento. Crea una imagen en Photoshop de dimensiones 5,82 x 7,76 pulgadas, una a 132 ppi y otra a 264 ppi. Luego, comprueba su tamaño en la opción de "Tamaño de imagen" (qué tamaños en pixels te salen?)

    ResponderEliminar
  8. Si si, claro que me estoy liando, tengo un follon importante con este tema, por un lado tengo las resoluciones de impresion con las que llevo trabajando la tira de años, y luego las de web, donde al ser 72ppp pues a la hora de diseñar no tenia tanto problema con como se veia lo que hacia, pero ahora con este tema pues me ha venido todo el follon, sobre todo me preocupa, por el hecho de intentar trabajar en indesgin con las imagenes a su tamaño y resolucion adecuadas para intentar no inflar demasiado el tamaño de los folios resultantes.

    Bueno, creo que ya lo he cogido, los ejemplos que me has puesto me han ayudado mucho, si tomas como referencia el tamaño en pixels, el tamaño en pantalla sera igual pero a mas resolucion, mas informacion de pixels tiene la imagen, asi que a la hora de que sea ampliada, se seguira viendo bien.

    Entonces, segun todo esto, y partiendo de la base de que el ipad 1 y 2 no leen folios que se hayan hecho a 2048x1536 de resolucion, la idea de trabajar solo a la resolucion grande no nos vale, asi que lo que nos queda, y para asegurarnos que todo salga bien y no trabajar por duplicado a dos resoluciones diferentes, lo ideal sera trabajar con documentos de 1024x768 en indesign y tratar de trabajar con imagenes a 264 ppp de resolucion, asi me aseguro que todo sale bien tanto en los iPads antiguos como en el nuevo...estoy en lo cierto? podria valer esto que digo?

    ResponderEliminar
  9. Vale, ahora si que lo tengo, olvida todo lo que he dicho anteriormente, es mucho mas simple, me he liado cosa mala, como habia algo que me seguia fallando me he puesto a hacer pruebas con el iphone. He hecho 3 fondos de pantalla, uno a 320x480 px (3g), otro a 640x960 (4s) y me he inventado un ultimo al doble del 4s (1280x1920), el resultado de como se ve cada uno en mi 4s es que: el del 3g cuyo tamaño en pixels es la mitad del 4s pues se ve mal, el del 4s se ve perfect logicamente y lo mas importante y que queria comprobar, el fondo que he hecho al doble de tamaño del 4s se ve perfect tambien, pero ademas si lo aumento haciendo zoom, se sigue viendo bien. Esto me ha valido para ver la relacion que antes no se por que no conseguia ver, a iguales tamaños fisicos de pantalla, 3.5" en el caso del iphone, conforme mas tamaño de imagen en pixel para ese mismo tamaño fisico de pantalla mejor aspecto visual, por que para el mismo tamaño de pantalla tenemos mas proporción de pixels, vamos, lo que dice tu articulo y que no se por que no conseguia visualizar.

    Ahora la duda que tengo es como trabajar con folios de 1024x768 y q se vea bien en un iPad nuevo el cual, como ya sabemos, va a encajar el diseño ampliandolo x2, lo ideal seria que yo pudiese trabajar con folios de 2048x1536 que se se verian bien en todos, pero el iPad 1 y 2 no coge folios hechos a ese tamaño, asi que he hecho unas pruebas con una imagen de un logo con lineas finas y detalles, he creado la imagen en Potoshop en 1024 y en 2048, los he importado sobre mi documento indesign de 1024x768, logicamente la caja del logo a 2048 la tengo que reducir al 50% para encajarla, pues al publicar los dos folios no consigo ver diferencia entre las dos imágenes cuando las amplio, al 100% la dos se ven bien, pero cuando hago zoom, se supone que la imagen que he importado a 2048 deberia tener esa informacion de pixels no? se deberia ver mejor que la imagen importada a 1024, y no es asi, las dos imagenes a igual zoom se ven igual de mal!!

    Como dato, decirte que a la hora de importar los articulos al folio, en formato predeterminado le pongo pdf.

    Perdon por el ladrillazo, es un tema que me interesa, prometo no engordar mas los comentarios.
    Gracias

    ResponderEliminar
  10. Pues no se si entendí muy bien, pero aquí comento para salir de dudas. Digamos que tengo publicación que será exclusivamente digital, cuyas páginas son completamente en jpg, su tamaño en milímetros son de 62x88mm, en pixeles son como de 1050x738, las imágenes están a 300 ppi.

    Si quiero que esta publicación se vea bien en distintos formatos, el marco que le ponga a cada página debe medir ¿62x88 mm en indesign para no perder los 330 ppi efectivos? He hecho el ejercicio de meter las imágenes en un marco mucho más grande, tamaño carta para ser específicos y los ppi efectivos se reducen a 95ppi, entonces entiendo que ¿Debo hacer el marco a 62x88mm para no perder calidad de imagen y si tener ppi's de "colchón" para que se vea bien en mayor número de dispositivos posibles?

    Gracias y apreciaría, cualquier orientación al respecto.

    ResponderEliminar
  11. Hola a todos!

    Estoy creando una revista digital, como todos vosotros jejeje

    Quiero que mi revista se vea perfectamente en los ipads 1 y 2, pero también en los retina. En todos vaya...

    Como comienzo el documento? Con resolución 2048 o 1024?

    En caso de trabajar a 1024 las imágenes se verán pixeladas en el los ipad retina a no ser que las ponga a 264ppp, no?

    Si trabajo directamente a 2048 las páginas con efecto deslizamiento se ven mal, a pesar de estar en vectorial y pdf (en lugar de rasterizada y jpg).

    Ando un poco perdido y todos estos comentarios me lían un poco... Alguna ayuda, por favor...

    ResponderEliminar

Consulteu aquí la versió en català d'aquest blog