Twitter
Facebook
Flickr
RSSTipos 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 2 = 47,85KB
|
JPEG 3 = 11,04 KB
|  |
- 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.
