Formatos gráficos
Bibligrafía:
Hay diferentes formatos gráficos, cada uno de los cuales con unas ventajas y unas desventajas:
- Conceptos previos
- 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
- BMP
- 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:
- 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:
- 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
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