Preparar nuestras fotos para que se vean mejor: 1. Remuestreo para web

Hola a todos. Inauguramos esta nueva sección del GFU con este artículo. El porqué he elegido éste y no otros también interesantes se debe a que en esta nueva era digital en la que nos hallamos (con más o menos nostalgia de la analógica) cada vez es más difícil tener en papel nuestras fotografías ya sea por dejadez, dinerito o espacio. El caso es que la mayoría, y ahí yo también me incluyo, apenas hemos impreso a material tangible nada digital pero sí tenemos una ingente cantidad de fotografías pululando por el ordenador, discos duros y tarjetas varias. Sin embargo, nos gusta mostrárselo a la gente a través de nuestras web de fotos, álbumes online o simplemente mediante un “pincho” en la tele o el ordenador. Aquí intentaré explicar un poco la manera de mostrar esas fotos a través de una pantalla dando algunos consejos y algo de teoría.

Muchos de vosotros habréis observado que después de retocar una foto en el Photoshop u otro programa similar y luego colgarla a la web (dícese Facebook, Flickr, Picassa, blog...) la nitidez que con tanto mimo y esmero habíais aplicado desaparece y muestra una foto de peor calidad: los que no lo habéis notado haced la prueba y veréis la diferencia. Para que lo entendáis, digamos que queremos colgar una foto, por ejemplo, en la galería de este blog. Lo primero que haríamos todos sería buscar nuestra foto, seleccionarla, elegir el tamaño que mejor se adapte de las opciones (pequeño, mediano, grande…) y aceptar. El problema está en que muchas veces nos damos cuenta que nuestra foto ha perdido nitidez y contraste respecto de la original y no entendemos por qué. La cosa es bien sencilla pero cuesta algo comprenderla.

Una foto normal vista en programas tipo Photoshop u otro algo decentillo te la muestra bastante bien a tamaño completo puesto que la interpretación que hace de ella usa unos algoritmos matemáticos bastantes fiables; lo mismo no se puede decir de algunos navegadores y visores, que si bien populares, como el visor del Windows, su calidad deja mucho que desear. ¿Qué sucede entonces?

Empecemos por el principio. Existen dos procesos matemáticos relacionados entre sí llamados interpolación y diezmado que sirven para el reescalado o remuestreo de la imagen:

• La interpolación se usa para redimensionar una foto a mayor tamaño procurando suavizar el píxelado producido por el aumento y conseguir una copia imprimible de buena calidad; digamos que es la creación de una nueva información a partir de la imagen original.
• Por el contrario, el diezmado es justo lo contrario, es desechar información de la imagen original para reducir una imagen. Este tipo de interpolación también suaviza los píxeles y se necesita posteriormente dar a la imagen un poco más de enfoque suplementario.

Pues bien, estos procesos los realizan la mayoría de programas con menor o mayor fortuna de tal manera que nuestra imagen puede llegar a degradarse visualmente si no lo hacemos correctamente. Pongamos un ejemplo para verlo mejor:

Tenemos hecha una foto de 15 Megapíxeles (3168x4752). La imagen a vista completa que nosotros vemos no es la imagen real. Si nos damos cuenta, una pantalla normalita viene teniendo una resolución de 1280x800 píxeles (alrededor de 1 Megapíxel). En cambio, nuestra foto es bastante más grande –digamos que, más o menos, 15 veces más-. Esta foto está hecha para verse en ese tamaño pero como es más grande que nuestra pantalla debemos reescalarla si queremos verla a vista completa. Esa tarea no suele dar los resultados óptimos que pretendemos. Sin embargo, esa misma foto si la viésemos al 100% la veríamos correctamente puesto que esa parte de la foto, ya que ésta no entra en toda la pantalla, mantiene una proporción de 1 píxel de imagen por píxel de pantalla por lo que el programa no se tiene que inventar nada.

NOTA: En las reducciones al 50% y 25% también se ven bastante bien puesto que el tipo de interpolación es muy sencillo y la foto no sufre distorsión por el proceso. Los reescalados serían del tipo de 2 píxeles de imagen por 1 píxel de pantalla y 4 px imagen por 1 px de pantalla. En el caso de reescalados diferentes como uno al 29% el programa interpretará mal el interpolado y se producirán artefactos en la imagen que la degradarán visualmente (¡pero sólo visualmente!), ya que el archivo estará perfectamente.

Entonces, ¿qué deberíamos hacer? Pues intentar acoplar nuestra fotografía al tamaño que queremos que se vea (un tamaño que sea siempre igual o menor que la resolución de nuestra pantalla o la que nos demande una página web tipo Flickr). Obviamente la vamos a tener que reescalar mediante la interpolación por diezmado pero ese proceso lo vamos a hacer nosotros mucho mejor y con más calidad que cualquier visor tipo Windows. Vemos aquí un poco todo el proceso y un ejemplo para que podáis comprobarlo.

(Por razones prácticas lo haré todo con el PhotoShop ya que es el más común y quizás el mejor de los programas de edición; no obstante, esto lo podéis hacer con cualquier otro)

Cogemos una foto en jpg (ya sea revelada de un RAW como directamente desde la cámara) y la abrimos en PhotoShop (en adelante, PS). Ahí vamos a la pestaña Imagen>Tamaño de imagen -o presionando Alt+Ctrl+Q- y se abrirá el siguiente cuadro de diálogo.

Observamos que existen 3 partes diferenciadas pero sólo nos fijaremos de momento en dos:

• Las dimensiones en píxeles (que son las que vamos a modificar)
• Las opciones marcadas de abajo como restringir proporciones y remuestrear la imagen.

Marcamos restringir proporciones y ponemos unas dimensiones de 640x427 píxeles (metiendo solo un dato de anchura o altura se calcula automáticamente el otro). Después marcamos remuestrear y vemos que existen varios métodos de los cuales nos fijaremos sólo en dos:

• Bicúbica más suavizada (óptima para ampliaciones): que como propiamente dice usaremos para amplicaciones.
• Bicúbica más enfocada (óptima para reducciones):que es la que eligiremos puesto que vamos a reducir la foto.

Tras seleccionar todo pulsamos OK y ya tendremos nuestra imagen reescalada. Veamos ahora la original (sin remuestreo) y la reducida a vista completa para observar diferencias.

Original

Remuestreada

Fijándonos bien podemos observar una mejor nitidez y/o contraste en la que acabamos de reescalar. Esto es así por lo explicado anteriormente (estamos viendo 1 píxel de imagen por 1 de pantalla). Observemos como ha influido ese remuestreo que no hemos controlado con una vista confrontada de ambas más al detalle.

Como veis estamos entrando en minucias pero la diferencia se ve claramente en la textura de la piedra de la cruz y en el detalle de la cruz de la puerta. Ahora nos podemos plantear otra cuestión y es que muchas veces cargamos fotos al tamaño original pensando que así se verán mejor; esto, aparte de lo ya explicado repercute en otra cosa y es en el tiempo de carga que nuestro navegador (Internet Explorer, Firefox...) tardará en mostrar la imagen y la repercusión que esto tiene a la hora de ver, por ejemplo, la galería de nuestro blog además del limitado espacio de almacenamiento que tenemos (no es lo mismo una foto de 10 Mb que una de 300 Kb si además se ve peor). Así que os dejo aquí las relaciones de tamaño que se usan en Blogger (siempre hablando del tamaño más largo en píxeles, el otro se calcula automáticamente):

• Pequeño (200 píxeles)
• Mediano (320 píxeles)
• Grande (400 píxeles)
• Extragrande (640 píxeles)
• Original (píxeles de la foto)

Los dos últimos tamaños (Extragrande y Original) sólo están disponibles para los administradores no para los autores pero si cargáis al tamaño de 640 px aunque solo lo veáis al tamaño Grande (400 px) el administrador puede ponerlo a ese tamaño. Yo recomendaría, por tanto, que para las fotos de la galería del GFU se pusiera siempre el lado más grande a 640 px., es decir, para ponerlas al tamaño Extragrande.