Uno de las principales decisiones a la hora de incluir gráficos
en tu web será elegir el formato correcto para cada tipo
de imagen de manera que logres una correcta relación
entre la calidad visual de la misma y su peso en Kb.
Cuando hablamos de formatos de imagen en la web, tenemos que
limitarnos a 3, ya que son los únicos soportados por
los navegadores de internet.
GIF (Graphic Image File Format).
Sus características son:
- Número de colores: de 2 a 256 de una paleta de 24 bits.
- Formato de compresión sin pérdida basado en
el algoritmo LZW.
- Carga progresiva en el navegador.
- Máscara de trasparencia de 1 bit.
- Permite la animación simple.
Es el formato más adecuado para aquellas imágenes
sencillas, de formas simples y en las que no existe un elevado
número de colores.
JPEG (Joint Photographic Experts Group).
Fue diseñado para la compresión de imágenes
fotográficas, basándose en el hecho de que el
ojo humano no es perfecto y no es capaz de captar toda la
información que se puede almacenar el una imagen de
24 bits.
El formato JPEG intenta eliminar la información que
el ojo humano no es capaz de distinguir, por eso se dice que
posee un formato de compresión con pérdida,
porque elimina información.
Las características de este formato son:
- Número de colores: 24 bits color o 8 bits B/N
- Elevado grado de posibilidad de compresión.
- Formato de compresión con pérdida.
- No permite trasparencia, ni canal alfa.
- No permite la animación.
Por regla general, es el más indicado para aquellas
imágenes que son fotografias.
PNG (Portable Network Graphics). Proporciona
un formato compresión de imágenes sin pérdida.
Las características de este formato son:
- Color indexado hasta 256 colores y TrueColor hasta 48 bits
por pixel.
- Mayor compresión que el formato GIF (+10%)
- Compresión sin pérdida.
- Canal alfa. (Transparencia variable)
- No permite animación.
El más adecuado para imágenes de elementos renderizados,
ya que se logran unos degrarados muy suaves y una buena definición
de las lineas.
A continuación vamos a ver algunas pruebas para que
puedas ver como afecta a cada tipo de imagen el formato de
exportación elegido tanto en calidad de la imágen
como en peso:
El caso de una fotografía digital.
| JPG |
GIF |
PNG |
 |
 |
 |
Jpg
con 20% de compresión.
11Kb |
|
Gif
con 256 colores.
22 Kb |
|
|
|
Vemos que para obtener una calidad similar los tamaños
de la imágenes son muy diferentes, en este caso, lo
más adecuado será optar por el formato JPG.
El caso de una imagen simple.
| JPG |
GIF |
PNG |
 |
 |
 |
Jpg
con 20% de compresión.
13 Kb |
|
Gif
con 256 colores.
5 Kb |
|
|
|
En el caso de una imágen simple (con pocos coleres)
vemos que el formato más adecuado es el .gif, ya que
aunque la calidad de la imágen sea idéntica
al png, el peso de la imágen es considerablemente inferior.
El caso de una imagen renderizada.
| JPG |
GIF |
PNG |
 |
 |
 |
Jpg
con 20% de compresión.
6 Kb |
|
Gif
con 256 colores.
13 Kb |
|
|
|
El formato png es el que más calidad nos ofrece,
sin embargo, la opción Jpg parece la más adecuada
por su relación calidad peso, será una decisión
que debermos tomar sobre todo en función de la importancia
de la imágen o el detalle que sea necesario mostrar.
Para ver mejor la diferencia en la calidad de las imágenes
a continuación os muestro un detalle de ampliación
realizada sobre las imágenes anteriores.
| JPG |
GIF |
PNG |
 |
 |
 |
Jpg
con 20% de compresión.
4 Kb |
|
Gif
con 256 colores.
10 Kb |
|
|
|
En la ampliación, podemos ver como el formato PNG
mantiene mucha más calidad que el resto, esto sucecerá
siempre que trabajemos con imágenes con degradados
muy suaves y líneas muy bien definidas.
|
