(1° Años) Tipos y formato de archivos de imágenes

Tipos de imágenes y formatos

A grandes rasgos, hay dos tipos de imágenes digitales:

• Imágenes vectoriales
• Imágenes de mapa de bits

Las imágenes vectoriales son imágenes constituidas por objetos geométricos autónomos (líneas, curvas, polígonos,...), definidos por ciertas funciones matemáticas (vectores) que determinan sus características (forma, color, posición,...)

Las imágenes de mapa de bits están formadas por una serie de puntos (píxeles), cada uno de los cuales contiene información de color y luminosidad. Salvando la diferencia, podemos compararla con un mosaico y sus teselas.

Las imágenes vectoriales se crean con programas de diseño o dibujo vectorial (Adobe Ilustrator, Corel Draw, Inkscape…) y suelen usarse en dibujos, rótulos, logotipos... Su principal ventaja es que una imagen puede ampliarse sin sufrir el efecto de “pixelado” que tienen las imágenes de mapa de bits al aumentarse. 

En la imagen (vectorial) del ratón de la izquierda puede apreciarse que al ampliar una zona no hay perdida de detalle, mientras que en la fotografía del busto Nefertiti (mapa de bits) al ampliar mucho una zona, se observan los píxeles y la imagen se degrada.

Las imágenes de mapa de bits presentan una mayor gama de colores y de tonos que las vectoriales, por lo que son el tipo de imágenes usado en fotografía y, se crean con las cámaras de fotos, los escáneres y con programas de edición de imagen y dibujo (Adobe Photoshop, Gimp, etc.) Las imágenes mapa de bits generan archivos que ocupen mucha más memoria (bytes) que las imágenes vectoriales.

Para poder reproducirse o utilizarse en un ordenador u otros dispositivos las imágenes vectoriales y de mapa de bits se guardan en archivos o ficheros (conjunto de datos que se almacenan en algún medio –disco duro, DVD, lápiz de memoria…–) Cada archivo gráfico, se identifica además de por su nombre, por su extensión, que indica el tipo o formato de que se trata.

Algunos formatos de imagen vectorial son: AI (Adobe Illustrator), CDR (Corel Draw), DXF. (Autodesk), EMF, EPS, ODG  (Open Office Draw), SVG (Inkscape), SWF (Adobe flash), WMF (Microsoft)

Formatos de imagen de mapa de bits

Cuando trabajamos con imágenes, es muy importante elegir bien el formato adecuado. Veamos algunos ejemplos:

• Al publicar fotografías en una página web o al enviarlas por correo electrónico, para que la transferencia no sea excesivamente larga, es muy importante el peso o Kbytes del archivo de imagen. En este caso, es recomendable el uso de formatos que utilicen compresión.

• Para imprimir fotografías, donde el peso del archivo no tiene tanta importancia, se podrán usar otros formatos que ofrezcan más calidad que los utilizados para web. Lo mismo ocurre al hacer fotografías con las cámaras, la elección del formato se hará en función de lo que se desea obtener y de los procesos que desee realizar a posteriori el fotógrafo.

Para efectuar una elección adecuada de un formato de imagen, conviene valorar previamente:

• El contenido de la imagen: foto, dibujo, gráfico, logotipo…

• La calidad que se desea obtener en función de su destino: publicación en la web impresión en impresora doméstica. Impresión profesional,...

• El tamaño que tendrá el archivo resultante.

A continuación vamos a ver los formatos de imagen más comunes, y al final se indicara cual elegir en función de las valoraciones señaladas.

Algunos formatos de mapa de bits son los siguientes: 

• BMP. Formato introducido por Microsoft y usado originariamente por el sistema operativo Windows para guardar sus imágenes.

• GIF. Formato bastante antiguo desarrollado por Compuserve con el fin de conseguir archivos de tamaño muy pequeños. Admite solo 256 colores por lo que no es adecuado para imágenes fotográficas pero si es muy apropiado para logotipos, dibujos, etc. Permite crear animaciones (gif animado) y transparencias.

ejemplo de dibujo -logotipo- sobre fondo transparente.

Generalmente las zonas transparentes se muestran como un damero.

Una imagen con zona transparentes puede aplicarse a fondos diferentes

En el ejemplo, el gif se ha aplicado a dos fondos distintos:como membrete y a un banner 

También es posible aplicar transparencias a gif animados.

Gif utiliza sistemas de compresión "propietarios" y tiene derechos de utilización.

• JPEG. Es uno de los formatos más conocido y usado para fotografías digitales ya que admite millones de colores. Lo admiten la mayor parte de las cámaras fotográficas y escáneres y es muy utilizado en páginas web, envío de fotografías por correo electrónico, presentaciones multimedia y elaboración de vídeos de fotografías.

 JPEG admite distintos niveles de compresión, de forma que:

• A más compresión menor calidad y archivos más pequeños (menos Kbytes)
• A menos compresión mayor calidad y archivos más grandes (más Kbytes)

La compresión que hace JPEG, es con pérdidas y afecta a la calidad de imagen. Cada vez que se abre y manipula una foto JPEG en un ordenador, la imagen al comprimirse y descomprimirse se degrada, por lo que conviene no guardarlas en JPEG si se van a modificar En este caso usar TIFF o BMP para editarlas y convertirlas a JPEG al final. Si no queda más remedio que editar en JPEG, manipularlas con cuidado y no excesivamente. 

Ejemplo de imagen JPEG preparada para web

• PNG. Formato creado con el fin de sustituir a GIF. Utiliza sistemas de compresión gratuitos, y admite muchos más colores que GIF. También admite transparencias pero no animaciones. Al admitir más colores es posible crear imágenes transparentes con mayor detalle.

Imagen original transparente con sombra. 

 Superior: GIF no se ve la sombra

Inferior: PNG muestra la sombra

Las versiones anteriores a Internet Explorer 5.0 no admiten PNG, y los ordenadores que dispongan de versiones antiguas no podrán mostrar este formato.

• PSD. Es el formato por defecto del editor de imágenes Adobe Photoshop y por tanto es un formato adecudo para editar imágenes con este programa y otros compatibles. Admite millones de colores, capas, canales....

• RAW. Formato “en bruto”. Esto quiere decir que contiene todos los píxeles de la imagen captada, tal y como se han tomado. Es el formato que ofrece la mayor calidad fotográfica y suele ser admitido por cámaras de gama media y alta (réflex, y compactas) indicadas para fotógrafos aficionados avanzados y profesionales.

Las cámaras que guardan las fotos en otros formatos (Tiff y JPEG) procesan la imagen captada para dar una interpretación de ella (balance de blanco, niveles de luminosidad, contraste…) En el formato RAW, los píxeles no se procesan y se mantienen en bruto para ser procesados posteriormente por un software específico conocido como “revelador RAW”

Un archivo RAW, no sufre ninguna compresión, por lo que mantiene el máximo detalle de la imagen a costa de ocupar mucho espacio (Mbytes)

Los distintos fabricantes de cámara suelen llamar a los archivos RAW con distintos nombres. Por ejemplo, las cámaras Nikon los denominan archivos NEF.

• TIFF. Formato utilizado para el escaneado, la edición e impresión de imágenes fotográficas Es compatible con casi todos los sistemas operativos y editores de imágenes. Como PSD, admite millones de colores, capas, canales alfa… y también lo incluyen algunas cámaras y la mayoría de los escáneres. 

Recomendación uso de formatos

• Web, multimedia, correo electrónico, vídeo:

• Fotografias: JPEG
• Dibujos y logotipos: JPEG, GIF, PNG

• Impresión: TIFF, PSD, JPEG

• Fotografía (cámara):

• Aficionado: JPEG
• Profesional o aficionado avanzado: RAW

Ejemplo comparativo del peso de una imagen en distintos formatos

• Imagen en formato TIFF: 357 Kbytes
• Imagen en formato BMP: 226 Kbytes
• Imagen en formato PSD: 125 Kbytes
• Imagen en formato JPEG (resolución máxima o mínima compresión): 119 Kbytes
• Imagen en formato JPEG (resolución alta o poca compresión): 71 Kbytes
• Imagen en formato JPEG (resolución media o compresión media): 64 Kbytes
• Imagen en formato JPEG (resolución mínima o compresión máxima): 52 Kbytes
• Imagen en formato GIF (256 colores): 29 Kbytes
• Imagen en formato GIF (128 colores): 26 Kbytes
• Imagen en formato GIF (64 colores): 23 Kbytes

Tamaño y peso de las imágenes

Muchos de nosotros hemos comprobado, y sufrido, cómo una página web con bastantes imágenes se ralentizaba o, como un mensaje de correo electrónico con un powerpoint de fotos adjunto, parecía que no se iba a descargar nunca.

Un concepto y expresión que usamos al hablar de imágenes es el de tamaño. Este término puede ocasionar confusión ya que solemos emplearlo para cosas diferentes: normalmente decimos que una imagen tiene un tamaño de 13 x 18 cm o 1024 x 768 píxeles, pero también decimos que una imagen tiene un tamaño de 3 Mbytes. Este uso impreciso de la palabra no suele causar mayores problemas, pero para los objetivos del curso sí que es importante matizar, ya que son dos características diferentes de una imagen.

De esta forma, en este tema, cuando hablemos del tamaño nos referiremos sólo a las dimensiones de la imagen: 13 x 18 cm, 1024 x 768 píxeles; y cuando se hable del espacio que ocupa la imagen en el dispositivo de almacenamiento –disco, memoria…- (3 Mbytes o 149 Kbytes) lo definiremos como peso.

De esta manera, podemos decir que una imagen es:

• Grande cuando tiene un tamaño igual o mayor a 1024x768 píxeles
• Mediana cuando el tamaño va de 320x240 a 1024x768 píxeles
• Pequeña cuando el tamaño es menor a 320x240 píxeles
• Muy pequeña cuando es menor a 100x100 píxeles

O que es:

• Pesada si tiene 1 MB o más
• De peso mediano si va de 300KB a 1 MB
• Ligera si su peso es menor de 300KB
• Muy ligera si el peso es inferior a 100KB

Al reducir de peso las imágenes (de mapa de bits) hacemos que tengan menos bytes y, por tanto, que:

• Ocupen menos espacio en un dispositivo de almacenamiento. Por ejemplo, el disco duro de un servidor de Internet acojerá más imágenes en un mismo espacio.

• La transferencia de datos por una red sea más veloz, acelerando así la descarga de imágenes y la navegación por internet.

Aligerar ≠ Optimizar

Puede darse que el caso que al “aligerar” de peso una foto, la reduzcamos también de calidad. Al optimizar, lo que pretendemos es reducir el peso lo máximo posible, pero sin que la imagen sufra pérdida de calidad aparente.

Veamos un ejemplo.

Observa atentamente las dos imágenes (jpeg) siguientes e intenta descubrir diferencias de calidad.

Imagen 1

Imagen 2

Una vez comparadas, crees que...

a) Ambas tienen un peso similar

b) La imagen 1 pesa más

c) La imagen 2 pesa más

Para salir de dudas, puedes ver tú mismo el peso de cada una haciendo clic con el botón derecho sobre ellas y seleccionando en el menú contextual "Ver información de la imagen" o "Propiedades" (dependerá del navegador web que uses) El peso se ve en Tamaño (Size of file) También puedes descargar ambas fotos haciendo clic sobre ellas con el botón derecho del ratón y seleccionando "Guardar imagen cómo" Luego puedes ver el peso de cada archivo viendo sus propiedades.

La respuesta correcta es la b ya que la imagen 1 pesa 173,9 KB y la imagen 2, 19,13 KB.... Pasamos de una fotografía ligera a otra muy ligera, y ambas tienen una calidad similar.

A efectos prácticos, esto significa que la imagen 2 se descargará más rápidamente y/o que en un dispositivo de almacenamiento, como el disco duro de un servidor de internet podremos tener muchas imágenes y no tendremos necesidad de contratar más espacio. 

Si en lugar de fotografías (en formato JPEG), la optimización se hace a otro tipo de imágenes con menos detalles la reducción de peso puede ser mayor. Veamos otro ejemplo:

Imagen en formato BMP [125,91 KB]

Imagen en formato JPEG -compresión mínima- [49,35 KB]

Imagen en formato JPEG -compresión media- [11,45 KB]

Imagen en formato PNG [8,71 KB]

Imagen en formato GIF [6,05 KB]

De la imagen BMP a la GIF se ha reducido el peso más de 20 veces y ambas son muy parecidas.

En el primer ejemplo de los timbres, hemos utilizado una fotografía digital, para usar, por ejemplo, en un blog. Las fotografías, cómo ya se dijo, conviene guardarlas en formato JPEG, ya que, de los formatos utiles para web y multimedia es el que mejor calidad ofrece. En este caso se ha utilizado un tipo de optimización.

En el segundo caso, se ha empledo la imagen de una captura de pantalla de una zona de un programa, para utilizar, por ejemplo, en la web o en la presentación powerpoint de un curso. Este tipo de imágenes tienen muchos menos colores y detalle que las fotografías y admiten otro tipo de optimización. 

Optimizando fotos

Si has usado alguna vez una cámara de fotos digital, habrás visto que el número de imágenes que puede almacenarse en la tarjeta de memoria varía según:

• la capacidad de la tarjeta,
• el formato de imagen,
• su resolución…

Si se dispone de varias tarjetas de muchos “gigas” el número de fotos que podemos tomar no resultará un problema y podremos utilizar un formato de alta calidad como RAW o TIFF a una elevada resolución (archivos de mucho peso).

Si por el contrario tenemos una sola tarjeta y de no mucha capacidad, para procurar que quepan el mayor número de fotos, deberemos “optimizar” el espacio, y hacer que las imágenes que se guarden tengan poco peso para una calidad dada. En este caso utilizaríamos el formato JPEG, a la calidad deseada (alta, media o baja) en función del destino (*) que se vaya a dar a la imagen y la capacidad de la tarjeta.

(*) No requiere la misma calidad las fotografías que sólo van a verse en una pantalla de ordenador o en un televisor, que las fotos que van a imprimirse, en cuyo caso, además, se deberá tener en cuenta el tamaño y el método de impresión

Hay quien, por desconocimiento, "cuelga" en una web/blog o, envia por correo electrónico fotos tal cual se han "sacado" de la tarjeta de memoria de la cámara. Gran error, ya que aunque se hayan hecho a baja resolución, normalmente, esas fotos "en bruto" pesan demasiado para su uso en internet y/o en multimedia, y es conveniente optimizarlas.

Recuerda que por optimizar nos referimos a reducir el peso de una fotografía sin que ésta pierda calidad. Para ello, vamos a actuar sobre varias características de las fotografías: su tamaño, la resolución y el formato de imagen y su compresión.

---

Tamaño

Un aspecto muy importante al optimizar es el de las dimensiones que debe tener la fotografía. Volviendo al ejemplo que se ha puesto antes, a veces recibimos fotos por correo electrónico que son excesivamente grandes y para poder verlas hay que navegar por el mensaje ya que exceden los límites del marco.

Las dimensiones que demos a una foto, dependerá del uso que vayamos a darla. Veamos algunos ejemplos:si las fotografías se van a usar como fondo de pantalla o en presentaciones a pantalla completa, el tamaño dependerá del monitor:

• Monitores de 14" y 15": 800 x 600 píxeles
• Monitores de 17": 800 x 600 ó 1024 x 768 píxeles
• Monitores de 21": a partide de 1024 x 768 píxeles

En este caso se deberá tener también en cuenta la proporción o relación de aspecto del monito: 4:3 o 16:9 o panorámico.

En el resto de las ocasiones usar imágenes de un tamaño similar resulta inútil y molesto, ya que para poder verlas al completo aparecerán unas barras de desplazamiento. Para hacernos una idea de posibles tamaños veamos algunos de los tamaños fotográfico más usuales para copias en papel (tamaño en píxeles indicados para una resolución de salida 72 ppp)

• 283x392 píxeles (10x13 cm)
• 307x425 píxeles (10x15 cm)
  
• 340x470 píxeles (12x16 cm)
  
• 369x510 píxeles (13x18 cm)
  
• 425x588 píxeles (15x20 cm)
  
• 510x705 píxeles (18x24 cm)

Tres tamaños de imagen diferentes

El tamaño de las imágenes indica, como hemos visto, sus dimensiones en pixeles y cuando decimos que tiene una imagen tiene 340 x 470 pixeles nos hacernos una idea de su tamaño. Pero... ¿cuánto mide un pixel?

El tamaño del píxel dependerá de las características del dispositivo donde se observe la imagen, de su resolución.

---

Resolución (de salida o impresión)

Las imágenes normalmente se observan en dos soportes diferentes: impresas en papel o en un monitor o televisor. En este contexto, al optimizar imágenes, deberemos tener en cuenta la resolución del dispositivo donde se van a ver.

Mientras que para las imágenes que vemos en un monitor, nos basta con el tamaño expresado en píxeles ancho x píxeles alto (por ejemplo 510x705 píxeles) Para impresión y otros tipos de salida la resolución de impresión es un concepto muy importante que nos indica el número de pixeles que hay en una pulgada –ppp–, o en un centímetro –ppcm– (Una pulgada equivale a 2,53 centímetros: 1” ≈ 2,53 cm)

Este será un ajuste que habrá que realizar en función del tipo dispositivo de impresión (su resolución) y suele  ajustarse normalmente a valores comprendidos entre 180 y 300 o más ppp) La definición de una imagen depende en gran medida de la resolución.

Para imágenes que se van a ver en monitores y televisores la resolución de salida, cuando se ajusta suele hacerse a valores comprendidos entre 72 y 96 ppp (sobre todo el primero), que son "en principio" los valores de puntos por pulgada de monitores y televisores de hace algún tiempo. En estos casos es mejor ajustar teniendo en cuenta el tamaño (por ejemplo 283x392 píxeles)

---

Formato de imagen y compresión

Cómo ya vimos, el formato para imágenes fotográficas más adecuado para internet es JPEG, ya que admite millones de colores -suficiente para mostrar los detalles y matices de la fotografía más exigente- y distintos grados de compresión.

JPEG se aprovecha de algunas características del ojo humano, de forma que al ver varias imagenes comprimidas con distinto nivel de compresión, nos resulta imposible o muy difícil notar diferencias. Veamos un ejemplo.

JPEG 1 = 62,71 KB	JPEG 2 = 47,85KB
JPEG 3 = 11,04 KB	JPEG 4 = 4,84 K

Las cuatro imágenes superiores:

• Se han guardado en formato JPEG
• Tienen un tamaño de 302 x 227 píxeles
• Tienen una resolución de 72 ppp

Sin embargo, al guardarlas se ha procedido a aplicar diferentes grados de compresión:

• A la prímera imagen se le ha dado la mínima compresión posible -máxima calidad de JPEG-
• A la segunda imagen se le ha dado poca compresión -alta calidad-
• A la imagen 3 se le ha aplicado una calidad y compresión media
• A la imagen 4, una gran compresión y baja calidad.

Como se observa las diferencias de peso son notables, pero... ¿es muy apreciable las diferencias de calidad?...

Aunque si ampliamos la imagen sí que se pueden notar diferencias.

A la izquierda se muestra la ampliación de una zona de la imagen JPEG 1 y a la derecha la ampliaciión de la misma zona en la imagen JPEG 4.

 

El grado de compresión a aplicar al guardar una imagen JPEG dependerá de varios aspectos: del tipo de imágen y del detalles que tiene, de la calidad que deseamos obtener... Por lo general, para la mayoría de las ocasiones podremos dar niveles de compresión medios o grandes (calidad baja). En cualquier caso antes de publicar una fotografía, es conveniente comprobar como queda tras su optimización, y si es necesario, reducir el grado de compresión.