Tratamiento de imágenes

Estamos rodeados de imágenes, estáticas o en movimiento. Cada imagen tiene dos dimensiones: ancho y alto. Cuando alguno de estos parámetros (el ancho o el alto) es modificado en forma no proporcional al otro, decimos que la imagen fue deformada o distorsionada.

Este artículo trata, justamente, de cómo detectar y evitar o corregir esa distorsión.

Inserción de imágenes en la suite de Office

Se empleará Word a modo de ejemplo, pero el método aplica también a PowerPoint, Publisher y Excel.

Abrimos o creamos un documento e insertamos la imagen:

Al hacer clic sobre ella, aparecen nueve puntos de control: cuatro cuadrados blancos (uno en la mitad de cada lado), cuatro círculos blancos (uno en cada vértice) y un círculo verde (al centro y arriba del cuadrado del centro del borde superior).

Al posicionar el cursor del ratón sobre alguno de los símbolos blancos, el cursor se transforma en una flecha doble que permite: ampliar o reducir proporcionalmente la imagen a partir de los círculos (1) o deformarla a partir de los cuadrados (2); en el círculo verde (3), en cambio, el cursor se transforma en una flecha en círculo que permite rotación. En cualquiera de los casos, presionando y arrastrando.

La imagen aquí fue distorsionada y girada. Haciendo clic en Tamaño vemos qué fue lo que pasó 'en números'. Si hacemos clic en Restablecer...

... la imagen vuelve a sus dimensiones y posición iniciales.

Si necesitamos solo una parte de la imagen, procedemos a Recortar. Posicionando el cursor en cualquiera de los puntos de recorte, arrastramos hasta lograr el resultado deseado. Recortar el gato, en este caso.

Si nos vamos a Tamaño nuevamente, vemos que se sigue manteniendo el tamaño original como referencia, pero aparecen los datos del recorte y las nuevas dimensiones.

Con la opción Comprimir imágenes, podemos 'borrar los datos originales' y prácticamente 'generar' una imagen nueva...

.... según se aprecia al ir nuevamente a Tamaño. Vemos que el tamaño original de la imagen se corresponde con el área previamente recortada: la escala es del 100 %.

Por supuesto, también pueden modificarse medidas, ángulo de rotación y márgenes de recorte directamente desde los cuadros citados.

Relación de aspecto

Llamamos relación de aspecto de una imagen a la proporción entre sus dimensiones. Se representa con dos números, generalmente enteros, separados por ":" (dos puntos). Este concepto también se aplica a los dispositivos de reproducción.

Primero tenemos que saber qué dimensiones tiene la imagen. En Windows, por ejemplo, abrimos el explorador de archivos, hacemos clic sobre una imagen y observamos el apartado que dice "dimensiones"; nos dará dos valores que representan el ancho y el alto (tratándose de dispositivos, dichos valores ya vienen especificados en las cajas contenedoras, en los manuales o en los mismos aparatos).

Esos valores están expresados en píxeles, que es la unidad en que habitualmente se miden las imágenes (como vimos anteriormente, la suite de Office hace la conversión a centímetros). Su símbolo es "px" (que es eso: un símbolo, no una abreviatura; por lo tanto, no lleva punto).

Tomemos, por caso, una imagen que mide 4000 px de ancho por 3000 px de alto. Con la ayuda de esta tabla de mi autoría (no funciona en línea: hay que bajarla), ponemos el ancho (4000 px) en el casillero azul y buscamos el alto (3000 px). Para este caso tenemos, pues, una relación de 4:3; es decir, 4 'partes' de ancho y 3 'partes' de alto.

Vale aclarar que, de no contar con las dimensiones expresadas en píxeles, bien podrían tomarse las medidas ad hoc con algo parecido a un centímetro: la relación de aspecto obtenida va a ser la misma. Este procedimiento aplica para fotos en papel que queramos escanear, dispositivos y toda otra situación que lo amerite (para no recurrir al 'manual' o por vagancia).

Regla de tres simple

Cuando lo que necesitamos hacer es redimensionar una imagen para ajustarla, por ejemplo, al ancho de una entrada de blog [en mi caso, 448 px], podemos aplicar la famosísima "regla de tres simple".

Procedemos a insertar la imagen en la entrada.

CÓDIGO HTML:
<div class="separator" style="clear: both; text-align: center;"> <a href="http://4.bp.blogspot.com/-AEesEP4Sa_0/VLbZmnstzeI/AAAAAAAACHo/nXoeEODMl20/s1600/Portada.png" imageanchor="0" style="margin-left: 0em; margin-right: 0em;"><img border="0" src="http://4.bp.blogspot.com/-AEesEP4Sa_0/VLbZmnstzeI/AAAAAAAACHo/nXoeEODMl20/s400/Portada.png" height="150" width="200"/></a></div>

Nos fijamos en las propiedades de la imagen las dimensiones que tiene; o en el html las que le puso Blogger al insertarla (son proporcionales a las originales de la imagen). Entonces hacemos:

200 px [ancho que le puso Blogger]
es a 448 px [ancho que quiero que tenga]

como 150 px [alto que le puso Blogger]
es a x [alto que quiero que tenga];

entonces x = 150 px * 448 px / 200 px.
Finalmente x = 336 px.

Procedemos a cambiar el widht de 200 px a 448 px y el height de 150 px a 336 px. Y nos queda:

CÓDIGO HTML:
<div class="separator" style="clear: both; text-align: center;"> <a href="http://4.bp.blogspot.com/-AEesEP4Sa_0/VLbZmnstzeI/AAAAAAAACHo/nXoeEODMl20/s1600/Portada.png" imageanchor="0" style="margin-left: 0em; margin-right: 0em;"><img border="0" src="http://4.bp.blogspot.com/-AEesEP4Sa_0/VLbZmnstzeI/AAAAAAAACHo/nXoeEODMl20/s400/Portada.png" height="336" width="448"/></a></div>

Este método sirve también para redimensionar videos o  generar un fondo de pantalla 'a medida', conforme la relación de aspecto del monitor. El fin es siempre el mismo: evitar la distorsión.

Si queremos utilizar la tabla mencionada para ahorrarnos cálculos, primero hallamos la relación de aspecto:

La relación de aspecto es 4:3. Ahora, cambiamos el "200" por "448" y buscamos el alto que le corresponde para mantener la proporción. Resultó ser: "336". Llegamos al mismo resultado.

De última, la relación de aspecto no es otra cosa que la reducción a la mínima expresión de la fracción cuyos numerador y denominador se corresponden, respectivamente, con el ancho y el alto de la imagen, según se demuestra a continuación a partir del ejemplo precedente.

Algunas de las relaciones de aspecto más utilizadas, según dispositivo

• Monitores: 4:3, 5:4 y 16:9

• Televisores: 4:3 y 16:9

• Pantallas de salas para eventos: 16:9 y 8:3

• Celulares: 4:3 y 16:9

• Tabletas y portátiles: 16:9

No es intención de esta entrada hacer un análisis exhaustivo de todas las relaciones de aspecto existentes. Por otro lado, vale aclarar que no siempre lo que más se vende es lo que uno realmente desea. Si de televisores hablamos, no queda otro que el "16:9". Lo mismo está valiendo para el resto de dispositivos, excepto que sean usados. «No se fabrican más» suelen decirte si pides, por ejemplo, un monitor "4:3" o "5:4".

Diversas formas de tratar la imagen proyectada según dispositivo

Hay una realidad que es imposible dejarla de lado. Así como existen diversos dispositivos para reproducir, también existen imágenes en diversos formatos para ser reproducidas (lo único invariable es que las pulgadas siguen siendo el valor de referencia para determinar la medida de la diagonal del aparato, para darnos una idea aproximada de cómo trasladarlo y dónde meterlo: ahí no hay tutía).

Paradójicamente, lo más probable es que imagen a reproducir y reproductor donde se verá la imagen no coincidan en sus relaciones de aspecto. Si queremos ver Cantando bajo la lluvia (4:3) en un smart tv (16:9) o Los vengadores (16:9) en un monitor 5:4, estamos en problemas: las relaciones de aspecto no son las mismas.

A continuación, y tomando como base las combinaciones posibles entre 4:3 y 16:9 (las más utilizadas por estos lares), se plantean las siguientes posibilidades de tratamiento de imágenes.

Ajustar

La imagen se amplía o reduce proporcionalmente hasta "encajar" en la superficie del dispositivo. Esto ocasiona una pérdida del 25 % de superficie del dispositivo (queda "en negro").

Pantalla en 16:9; proyección en 4:3. Se ajusta la imagen teniendo en cuenta el alto.	Pantalla en 4:3; proyección en 16:9. Se ajusta la imagen teniendo en cuenta el ancho.

Expandir

Sin tener en cuenta sus proporciones, la imagen se adapta a todo el ancho y el alto de la superficie del dispositivo. Esto ocasiona distorsión o deformación en la imagen.

Pantalla en 16:9; proyección en 4:3 expandida a 16:9. La imagen resulta 'achatada'.	Pantalla en 4:3; proyección en 16:9 expandida a 4:3. La imagen resulta 'alargada'.

Rellenar

La imagen se amplía o reduce proporcionalmente hasta cubrir toda la superficie del dispositivo. Esto ocasiona una pérdida del 25 % de la imagen (queda "recortada"), ya que sobrepasa la superficie del dispositivo.

Pantalla en 16:9; proyección en 4:3. Se ajusta la imagen teniendo en cuenta el ancho.	Pantalla en 4:3; proyección en 16:9. Se ajusta la imagen teniendo en cuenta el alto.

Mosaico y centrar

Estas otras dos opciones se utilizan, en general, para fondos de pantalla. En ambos casos, la imagen se incrusta en su tamaño real. Si elegimos "Centrar", la imagen aparece dispuesta en el centro. Si elegimos "Mosaico", se repite tantas veces como quepa.

Se ha resaltado con fondo rojo el caso "Pantalla en 16:9; proyección en 4:3 expandida a 16:9" porque (al menos en Argentina) constituye el caso que más se repite. Con un parque que intenta renovarse en cuanto a aparatos tecnológicos de reproducción de imágenes 'atrapabobos', los smart tv pululan por doquier. Por contrapartida, la mayoría de las transmisiones sigue siendo analógica, en el formato histórico del 4:3. Por ende, para aprovechar TOOODA la pantalla, es muy común ver esta deformación... empezando en los comercios que los venden, siguiendo en los hogares y en las oficinas ¡y terminando en los mismísimos técnicos de la empresa de cable que te dicen que el televisor está mal configurado porque la imagen no abarca TOOODA la pantalla!

Algunos casos... exitosos o no tanto

Pantalla del Gran Rex.
Recital de Rubén Blades, 30-04-2014

Nota relacionada: Recuerdos panameños del Gran Rex, 23-08-2014

La gran crítica aquí es que expandieron las imágenes en lugar de ajustarlas o, en el peor de los casos, rellenarlas. El logo de CopaAirlines terminó siendo rectangular (es cuadrado); y el sol de la bandera argentina, elíptico (es circular). La peor proyección ocurrió en el tema Decisiones, donde duplicaron el ancho de las historietas (4:3 expandido a 8:3; se aprecia en el video a partir de 1 min 20 s).

Pantalla del Auditorio Buenos Aires.
Evento BA Digital, 21-08-2014

Nota relacionada: Encuentro en el Auditorio Buenos Aires, 22-08-2014

Cuidaron muy bien los detalles. Personalizaron cada fondo, teniendo en cuenta las proporciones de la pantalla. Las presentaciones proyectadas se hicieron en 16:9 ajustadas a 16:6. Curiosamente, programas como PowerPoint tienen una cantidad restringida de relaciones de aspecto para dar salida a las presentaciones; inclusive dependiendo de la pantalla donde se esté generando cada mismísima 'salida' (si tengo que hacer mi proyección en un monitor 5:4, pero no la estoy 'generando' desde ese monitor, la opción no está habilitada, por ejemplo).

Canal 13 HD.
Las mil y una noches

La 'novela turca', furor en Argentina en estos momentos, fue rodada en 2006, con relación de aspecto 4:3. En la versión HD de El Trece, la imagen se muestra ajustada a 16:9, con fondo alegórico que enmascara el 'negro' (ese 25 % de la pantalla que se desaprovecha debido a la diferencia en la relación de aspecto).

Edición fotográfica de por medio, en la imagen precedente se muestra cómo se vería la transmisión si estuviera expandida a 16:9. Se nota a simple vista cómo los personajes han 'engordado'. El sol de El Trece, a su vez, ha 'amanecido' elíptico. Esta situación es la más común (insisto: en Argentina) cuando la señal de cable es analógica (relación 4:3) y el aparato que la proyecta, digital (relación 16:9). Observación: "la más común"; no significa que sea "la ideal".

Tips para evitar que distorsionemos las imágenes cuando editamos o reproducimos

• Tildar toda casilla que diga "Mantener relación de aspecto" o similar.

• Si ampliamos o reducimos manualmente una imagen, que sea arrastrando con el ratón desde las esquinas. Repito: ARRASTRANDO CON EL RATÓN DESDE LAS ESQUINAS. Vuelvo a repetir: ¡ARRASTRANDO CON EL RATÓN DESDE LAS ESQUINAS! Este método funciona en todos los programas de la suite de Office (porque tienen tildada por omisión la casilla "Bloquear relación de aspecto").

• Para otros editores (Adobe, por ejemplo), independientemente de desde dónde se arrastre la imagen (desde las esquinas o los laterales), además se debe mantener presionada la tecla Mayúsculas ('flechita' que está a la izquierda del teclado, arriba de "Ctrl" y abajo de "Bloq Mayús"; quizás más conocida por el vocablo inglés Shift y que tiene una 'hermanita melliza' a la derecha del teclado).

• Si de nosotros depende, seleccionar o sacar fotos dejando bastante margen en ambos sentidos, para poder recortarla según se necesite (o sea, conforme el dispositivo de salida).

• Usar la tabla ya mencionada para generar recortes de imagen en una relación de aspecto distinta a la original.

• Si de televisores hablamos, buscar en la configuración del aparato algo parecido a "Relación de aspecto según origen de la transmisión".

Los Mp (megapíxeles)

El prefijo griego "mega" indica "millón". Para el caso de una imagen de 4000 px de ancho y 3000 px de alto, si multiplicamos ambas dimensiones entre sí, nos dará 12.000.000 px o 12 Mp. Este es el concepto utilizado para medir la resolución de imagen de una cámara digital. Siguiendo con el ejemplo, se podría decir que el dispositivo que capturó esa imagen tiene una resolución de 12 Mp.

Resumiendo: para saber cuántos Mp tiene una foto, multiplicamos ancho por alto y corremos el separador decimal seis lugares hacia la izquierda (dividimos por 1.000.000). Aplicando el proceso inverso, a sabiendas de la relación de aspecto de la foto (4:3 o 16:9) podremos saber sus dimensiones en píxeles.

A modo de corolario

Cada uno maneja las imágenes como puede, como desea o como le sale. La cuestión es tratar de mantener la estética. Ser fiel a lo que uno quiere representar. Comunicar, al fin y al cabo.