Formatos gráficos

Bibligrafía:

http://www.webestilo.com

Hay diferentes formatos gráficos, cada uno de los cuales con unas ventajas y unas desventajas:

Conceptos previos

Que una imagen se diga que tiene una profundidad de color de
- 24 bits, significa que puede utilizar colores entre 2²⁴ = 16.777.216 colores, esto es, aproximadamente 16 millones de colores.
- 16 bits, significa que puede utilizar colores entre 2¹⁶= 65536 colores
- 8 bits, significa que puede utilizar colores entre 2⁸= 256 colores
- 4 bits, significa que puede utilizar colores entre 2⁴= 16 colores
- 4 bits, significa que puede utilizar colores entre 2³= 8 colores
- 1 bits, significa que puede utilizar colores entre 2¹= 2 colores (normalmente serán blanco y negro, pero tambien pueden ser otros)
Una imagen a 16 millones de colores o más, se dice que está en color verdadero
Una imagen de 640x480 pixels, tendrá, como no puede ser de otro modo, 640x480=307.200 pixels
- Una imagen, el doble de grande que la anterior, esto es, 1280x960, tiene 1280x960=1.228.800, y es posible que esperaraís que tuviera sólo el doble de pixels, pero tiene exactamente 4(2x2) veces más de pixels

Hay dos formas de guardar la información de los pixels de cada imagen

METODO DE MAPA DE BITS
Para cada pixel, se guarda, el color
Imagen

color	color	color	color
color	color	color	color
color	color	color	color
color	color	color	color
color	color	color	color

Aqui el calculo del tamaño de la imagen es fácil: (numero_bits_para_cada_pixel) X (numero_pixels)

Ej: 640x480 a 256 colores = 640 x 480 x 8bits

MÉTODO DE PALETA DE COLORES O DE COLORES INDEXADOS
Para la imagen, se guarda una tabla con los colores que se usan en la imagen

Tabla de colores (PALETA)	COLOR
1	?? ?? ??
2	?? ?? ??
3	?? ?? ??
..	?? ?? ??
256	?? ?? ??

Para cada pixels de la imagen, en lugar de guardarse su color, se guarda la posición del color en la tabla (paleta) de colores
Imagen

posicion color en paleta	posicion color en paleta	posicion color en paleta	posicion color en paleta
posicion color en paleta	posicion color en paleta	posicion color en paleta	posicion color en paleta
posicion color en paleta	posicion color en paleta	posicion color en paleta	posicion color en paleta
posicion color en paleta	posicion color en paleta	posicion color en paleta	posicion color en paleta
posicion color en paleta	posicion color en paleta	posicion color en paleta	posicion color en paleta

Aqui el calculo del tamaño de la imagen tambien es fácil:
     (numero_de_colores_diferentes_en_la_paleta) X (bits para cada color de la paleta)
                                                           +
     (numero_bits_necesarios para poder elegir un color en la paleta) X (numero_pixels)

Ej1: 640x480 con paleta de 256 colores
                                                256 x 8bits
                                                        +
                                                8bits x 640 x 480

La ventaja que tiene la PALETA DE COLORES, es que,
- si has elegido 2 colores, pueden ser los dos colores que quieras entre todos los posibles (16 millones de colores). Si hubieras elegido MAPA DE BITS, hubieran sido el negro y el blanco
- si has elegido tener 256 colores, con el MAPA DE BITS, hubieras tenido que elegir entre 256 colores de toda la gama (desde el rojo, amarillo, verde, azul, rojo....), mientras que si tu eliges PALETA DE COLORES, puedes seleccionar 256 colores entre los 16 millones de colores que existen, por ejemplo, todos rojos
- normalmente, si en una imagen queremos poder elegir libremente los colores, ocupará menos si utilizamos paleta de colores
- cuando quieras, puedes editar la paleta, y pej, cambiar un color amarillo por rojo, y al hacerlo en la paleta, lo estas haciendo en toda la imagen (esto se llama editar paleta)
A grosso modo, una imagenen ocupa más
- cuanto más grande
- cuanto más colores pueda llevar

FORMATOS GRÁFICOS

Simplificando el tema, a grosso modo, podemos decir que existen 2 tipos de formatos gráficos:

con compresion (ocupan pocos kb), utilizados en web, que se basan en una o varias de las siguientes técnicas::
- eliminar aquella informacíón que no es perceptible para el ojo humano (a no ser que se haga zoom sobre la imagen) --> JPG - PNG-24
- reducir el nº de colores a 256 o menos --> GIF o PNG-8
- utilizar técnicas de compresión tipo zip o rar, pej, una imagen toda rosa, se puede codificar: todos los pixels con color rosa, en lugar de: pixel 1 con color rosa + pixel 2 con color rosa + pixel 3 con color rosa + pixel 4 con color rosa + ..... , o utilizar forrulas matemáticas, pej, cada pixels tiene más luz cuanto mayor es su nº de pixel--> JPG, PNG-8, PNG 24, GIF
sin compresión (ocupan muchos kb)
- se especifica para cada pixel su color --> bmp
el formato propio del programa que utilicemos, en nuestro caso, PSD en PhotoShop
- este formato tiene la ventaja de que la imagen no se compone sólo de la apariencia final, sino que contiene los objetos que vamos a poder modificar, como capas, textos, efectos.....

FORMATOS GRÁFICOS más habituales

Características: MAPA DE BITS de 16 millones de colores
Ventaja:
- La imagen se guarda con toda su información (no hay perdidas)
- 16 millones de colores (color verdadero)
- No hace compresión
Desventaja:
- Ocupa muchos bytes

GIF
- Características: PALETA DE COLORES de hasta 256 colores
- Ventaja:
  - PALETA DE COLORES
  - Como máximo 256 colores, pero pueden ser los que queramos
  - Soporta transparencia
  - Soporta animaciones (los famosos gifs animados)
  - Realiza compresión sin perdidas (pero ojo, con 256 colores como máximo)
- Desventaja:
  - Con 256 colores como máximo, aunque sean los que queramos, no podremos guardar imágenes reales de personas, paisajes, etc..., pero quedaran bien, los banners, títulos, flechas ..., es decir, imágenes sintéticas
  - Es propietario, es decir, que hay que pagar licencia, salvo que hagas software libre o no comercial (pero nadie lo hace)

JPEG
- Su método de representación de la imagen, no es ni por Mapa de bits, ni por paleta de colores, sino por FORMULAS MATEMÁTICAS
- Características:
  - Ventaja:
    - 16 millones de colores (no hasta, exactamente 16 millones de colores) (color verdadero)
    - compresión con pérdidas muy efectiva
      - reduce el tamaño de la imágen sin darnos cuenta. Lo que hace es eliminar aquellos detalles de la imagen, que si no hacemos un zoom, no los apreciamos (pej, la rallitas que tiene una hoja de árbol que si no hacemos 3 veces zoom no las vemos)
  - Desventaja:
    - no soporta animación
    - no soporta transparencia
    - si guardamos texto con este formato, vermos que se produce un efecto de "aguas"

PNG
- Características:
  - Surgió como un formato libre que combinara las ventajas de los métodos JPEG y GIF
- Ventaja:
  - Soporta transparencia como los GIF
  - Puede funcionar con paleta como los GIF hasta 256 colores, llamado PNG 8 o con mapa de bits como los JPEG de 16 millones de colores o más, es el llamado PNG 24
  - Es libre
- Desventaja:
  - no soporta animaciones

Formatos de la aplicación gráfica que esteís utlizando (PhotoShop, Fireworks, Paint Shop Pro)
- No suele haber perdidas
- Suelen guardar información de las ultimas acciones realizadas (esto es, que si tiene algo seleccionado, te lo guardan; vas a poder deshacer las últimas acciones ...)

Mi experiencia y recomendaciones:

Las fotos se cuelgan con el tamaño en que se van a mostrar

Fotos reales guardarlas como JPEG: comprimirlas más cuanto más pequeña sea la imagen
Fotos sintéticas (por ordenador, letreros)
- sin animación: GIF o PNG
- con animacion: GIF

A tener en cuenta:

Si rotáis (giráis) una foto un grado hacia la derecha y luego otro, como habreís perdido información en la primera rotación, el resultado habra quedado peor que deshacer y girar 2 grados hacia la derecha
Si a una imagen le das mucho contraste, se saturará (los tonos que deberian ser grises, pasan a ser blancos puros)
El blanco es 1, el negro es 0
Despues de guardar una imagen con un formato de compresión con perdidas como JPEG, no podrás volver a recuperar la imagen original con toda su calidad
Cuando queraís capturar en una imagen lo que teneis en pantalla, pulsar el botón PrtSc o Impr.
Si quereís que una botón cambie cuando se pasa el ratón por encima o se selecciona, la imagen del botón resaltado será la original con los colores cambiados o simplemente con más brillo.
El formato bmp no se utliza en la web
Al aumentar el tamaño de una imagen por encima del que ya tiene, no consigo más que hacer que ocupe más en disco. Si teneís que mostrar una imagen a 1200x600, y la que teneís es de 600x300, es mejor indicar el tamaño nuevo de la imagen en el código HTML (el navegador ya hará que se vea más grande), que redimensionar con un programa la imagen, pues sólo conseguiremos que ocupe más espacio en el disco del servidor.
Cuando os pasan imágenes reales (JPG) para poner en la web, si no lo quereís hacer de forma automática con un programa, la mejor forma de trabajar es:
- Para cada imagen:
  - La abro y la mejoro en brillo y en contraste
  - La guardo como BMP o JPG (con poca compresión). Así ya la tengo, por si un día me toca volver a generar una, para la web, con un tamaño diferente al que estoy haciendo ahora
  - La redimensiono
  - Hago pruebas para ver que compresión me aguanta sin que se note (la siguiente imagen, si es de la misma cámara, seguramente le irá bien la misma compresión)
Si teneís una imagen que no se ve muy bien, mostrarla más pequeña y se notará menos el error
A una imagen real para guardar en JPEG, nunca le reduciremos en número de colores
Las fotos JPEG, GIF, PNG, aunque las comprimas con Zip, no reducirán su tamaño

Comparativa formatos para guardar texto

gif	jpg	png

2kb	2kb	2kb

Comparativa formatos para guardars reales

gif	jpg	png-24	bmp
1190kB	344kB	28.70KB	5.973kB

Por último echar un vistzao a http://www.webestilo.com/guia/graf4.php3