Tipos de imágenes para internet

Antes de nada, esto no pretende ser un tutorial de retoque de imágenes ni de creación de gráficos, ni
de Fireworks, aquí solo hablaré de los tipos de imágenes que se usan en internet, para comprender
como funciona cada una, y de la mejor forma de seleccionar el tipo adecuado para cada situación,
usando Fireworks.

Esta es la Herramienta para optimizar imágenes en Fireworks

A través de esta herramienta, podremos exportar imágenes con muchas configuraciones diferentes. En
el primer selector, tenemos las opciones pre-establecidas de Fireworks:

 GIF Web 16 (impone que todos los colores sean seguros para la Web. La paleta de colores
contiene hasta 216 colores.)
 GIF WebSnap 256 (convierte los colores que no son seguros para la Web en sus
correspondientes seguros más cercanos. La paleta de colores puede contener hasta 256 colores
como máximo.)
 GIF WebSnap 128 (convierte los colores que no son seguros para la Web en sus
correspondientes seguros más cercanos. La paleta de colores contiene hasta 128 colores.)
 GIF adaptable 256 (es una paleta de colores que contiene sólo los colores utilizados en el
gráfico. La paleta de colores puede contener hasta 256 colores como máximo.)
 JPG - Calidad Superior (define la calidad en 80 y el suavizado en 0, creando un gráfico de alta
calidad pero más grande.)
 JPG - Archivo más pequeño (define la calidad en 60 y el suavizado en 2, creando un gráfico de
calidad reducida pero que ocupa la mitad que uno de calidad superior.)
Centro de Teleinformática y Producción Industrial / Sena Regional Cauca
Implementación e Implantación de Sistemas de Información
Instructor: Alex Salazar / alex.salazar@misena.edu.co
  GIF animado WebSnap 128 (define el formato del archivo como GIF animado y convierte los
colores que no sean seguros para la Web en sus correspondientes seguros más cercanos. La
paleta de colores contiene hasta 128 colores.)

En el segundo selector, de la izquierda, podemos elegir el tipo de archivo que queremos exportar. Al
lado, encontramos el selector de color "Mate", que sirve para elegir el color de fondo
(independientemente del color del lienzo). Se puede elegir "sin color" para exportar imágenes con
fondo transparente en GIF y PNG.

Luego las demás opciones van cambiando de acuerdo al tipo de archivo que se elija. Tenemos
Profundidad de color, Paleta, Tramado, Calidad, Pérdida, Transparencia, y Suavizado entre las
opciones. No explicaré aquí el uso de cada opción, ya que las variables son muchas, es cosa de ir
probando luego de seguir las próximas sugerencias.

JPG o JPEG

(Joint of Photographic Experts Group). Es el formato más común para comprimir imágenes con
relativamente poca pérdida de calidad y bajo peso, generalmente usado en imagenes fotográficas. El
formato JPEG admite millones de colores (24 bits). JPEG es el formato óptimo para fotografías
digitalizadas, imágenes que utilizan texturas, imágenes con transiciones de color en degradado o
cualquier imagen que requiera más de 256 colores.

Imagen JPG exportada en 3 compresiones diferentes, mientras mas compresion, menor calidad y
menor peso de archivo (33Kb, 4Kb y 1.4Kb Respectivamente)

Ventajas:

 Soporta millones de colores a un peso relativamente bajo

 Ampliamente soportado en todos los navegadores y plataformas

Centro de Teleinformática y Producción Industrial / Sena Regional Cauca

Implementación e Implantación de Sistemas de Información
Instructor: Alex Salazar / alex.salazar@misena.edu.co
Desventajas:

 No soporta transparencias
 El formato no es libre

Mi recomendación: Únicamente para imágenes fotográficas con muchos colores y detalles.

GIF

(Graphic Interchange Format). Creado por CompuServe hace casi 20 años. Utiliza compresion de un
máximo de 8 bits (256 colores), por lo tanto se reduce considerablemente la calidad si se trata de
imagenes de color verdadero (24 bits o mas) como fotografías o degradados complejos.

El formato GIF calcula la cantidad de colores mediante una formula que permite paletas de 2, 4, 8, 16,
32, 64, 128 y 256 colores, lo que nos da una amplia gama de posibilidades a la hora de optimizar
gráficos sencillos, además soporta las transparencias de 1 bit, es decir, que un pixel puede tener un
color, o ser totalmente transparente.

En este ejemplo, puse fondo negro al parrafo para ver el fondo transparente del GIF, como puede
notarse, con transparencia de 1 BIT el suavizado no existe, por lo tanto los bordes no se ven bien en el
circulo. (3.12 Kb)

También permite hacer animaciones por fotogramas, (muy sencillas) aunque la compresion en estos
casos suele ser deficiente.

Ventajas:

 Amplia compatibilidad en los navegadores

 La transparencia puede ser muy útil, si se sabe utilizar.
 La compresión logra imagenes de muy bajo peso.

Desventajas:

 Límite de 256 colores (degradados y fotografías se ven muy mal)

Centro de Teleinformática y Producción Industrial / Sena Regional Cauca
Implementación e Implantación de Sistemas de Información
Instructor: Alex Salazar / alex.salazar@misena.edu.co
  No es formato libre.

Mi recomendación: No usarla en ningún caso.

PNG

(Portable Networks Graphic). Es un formato gráfico que esta basado en un algoritmo de compresion sin
pérdidas, y fue desarrollado para resolver las deficiencias del GIF, principalmente en cuanto a
profundidad de color.

Cabe destacar, que Fireworks nació con el formato nativo de PNG, pero un archivo de Fireworks no es
lo mismo que una imagen PNG. Los archivos fuente de Fireworks incluyen una cantidad de información
adicional, como los gráficos de vectores, efectos de mapa de bits en vectores, las capas, etc. que hacen
al archivo "editable". En cambio las imagenes PNG (exportadas de Fireworks u otro programa) son solo
mapas de bits.

Nota: No use archivos de Fireworks en internet, hay que exportarlos para que funcionen. Ir a Archivo ->
Presentación preliminar de la imagen -> y luego seleccionar el tipo de imagen que requiera. También
con el panel de optimizar, y exportando las divisiones directamente, pulsando el botón derecho sobre
ella _> exportar división seleccionada.

Por otro lado, Fireworks es el software que mejor maneja los filtros de compresión para PNG (no dudo
que para JPG y GIF también), por lo que, aprendiendo a manejar la herramienta de optimización y
exportación, lograremos los mejores gráficos e imagenes para internet. Photoshop no maneja bien
estos filtros por si mismo, pero con superpng (gratuito) podemos lograr buenos resultados también
Photoshop tiene muy buena optimización de JPG en Archivo -> Guardar para Web.

Una de las principales ventajas de PNG, es que independientemente de la profundidad de color que se
use, la compresión permite archivos de muy bajo peso sin pérdida de calidad.

El número de canales depende de si la imagen es en escala de grises o en color y si dispone de canal

alfa (canal de transparencia). La combinaciones permitidas por PNG son:

 Escala de grises (1 canal)

 Escala de grises y canal alfa (2 canales)
 Canales rojo, verde y azul (RGB, 3 canales. También llamado "color verdadero")
 Canales rojo, verde, azul y alfa (RGB + alfa, 4 canales)

PNG soporta tanto transparencia alfa (los bits pueden ser "medio" transparentes) como transparencia
de índice en sus tres versiones, Todos los navegadores actuales tienen soporte para PNGs con
Centro de Teleinformática y Producción Industrial / Sena Regional Cauca
Implementación e Implantación de Sistemas de Información
Instructor: Alex Salazar / alex.salazar@misena.edu.co
transparencia alfa excepto Internet Explorer, que soporta PNGs con transparencia de indice, y
transparencia alfa solo en imágenes de menos de 8 Bits (siempre interpretada como transparencia de
índice).

En este ejemplo, la imagen de la izquierda fue exportada con transparencia de Índice, a la derecha con
transparencia alfa, ambos en PNG 8, puede notarse la diferencia de calidad en los bordes en IE. (Ambos
ejemplos tienen considerablemente menor peso que los GIF: 900Bytes y 1,4 Kb respectivamente)

Otro ejemplo, degradados y peso:

Este degradado en JPG pesa mas de 4 Kb, su calidad (80) es algo deficiente.

Degradado en PNG24, mas suave que el JPG, pesa solo 600 bytes.

Un ejemplo de imágenes de vectores:

Centro de Teleinformática y Producción Industrial / Sena Regional Cauca

Implementación e Implantación de Sistemas de Información
Instructor: Alex Salazar / alex.salazar@misena.edu.co
Misma calidad, menor peso. A la derecha, imagen JPG (18.7 Kb). A la izquierda PNG (6.5 Kb).

Los diferentes tipos de PNG, se usan para lograr la mejor relación peso/calidad en todo tipo de
gráficos:

PNG 8, se pueden usar para gráficos sencillos, colores planos, logos, pequeñas sombras, y para
imagenes que no requieran mucho color.

PNG 24 sirven para gráficos más complejos, degradados de varios colores, fotografías no tan
complejas.

PNG 32 para todo tipo de imágenes complejas, fotografías con mucho color etc.

Las imágenes complejas suelen tener un mayor peso que las JPG en una calidad similar:

A la izquierda, JPG 25 Kb, a la derecha PNG 133 Kb.

Centro de Teleinformática y Producción Industrial / Sena Regional Cauca
Implementación e Implantación de Sistemas de Información
Instructor: Alex Salazar / alex.salazar@misena.edu.co
Ventajas:

 En la mayoría de los casos prácticos, se obtiene la mejor relación peso/calidad.

 Formato libre.
 Recomendado por W3C.
 Acepta transparencias.

Desventajas:

 Imágenes con mucho color y texturas suelen ser muy pesadas

 El soporte de PNG no es tan amplio como los formatos anteriores.

Mi recomendación: Usar PNG al máximo, en todo tipo de gráficos, layouts, fondos, etc. No tanto en
Imágenes de muchos colores y texturas, aunque nunca está de más probar.

Conclusión

PNG 8 sería el formato más usado en todo tipo de gráficos, JPG solo cuando sea necesario, para reducir
peso en algunas imágenes fotográficas, y PNG 24 para degradados e imágenes más complejas, como
sombras, brillos, etc. Los GIF los he sustituido completamente por PNG.

Centro de Teleinformática y Producción Industrial / Sena Regional Cauca

Implementación e Implantación de Sistemas de Información
Instructor: Alex Salazar / alex.salazar@misena.edu.co