Formatos

GIMP nos proporciona numerosas opciones para obtener imágenes listas para utilizar en páginas web. En esta unidad vamos a tratar tanto las imágenes como las animaciones que se pueden utilizar en páginas web o aplicaciones desarrolladas para funcionar sobre el ordenador.

Las imágenes que se utlizan para las páginas web se guardan en tres formatos: JPG, GIF y PNG. Cuando trabajamos en GIMP habitualmente lo hacemos en el modo RGB que, como ya sabemos, proporciona 8 bits por canal de color, consiguiendo imágenes de 24 bits y que nos permiten tener imágenes con millones de colores para reproducir imágenes fotográficas. Con GIMP también podemos tener las imágenes en modo Indexado que reduce el número de colores a un máximo de 256 y, por último, también nos permite guardar cualquier imagen en escala de grises desde el blanco hasta el negro.

Estos modos de imagen se guardan en los formatos JPG y GIF respectivamente, ya que han sido los formatos soportados tradicionalmente por los navegadores. GIF es un formato que proporciona sólo 8 bits de información de color y JPG proporciona 24 bits. El formato GIF nos proporciona imágenes de bajo peso ideales para ser utilizadas en la Web pero no es suficiente para fotografías, que son guardadas en el formato JPG. GIF también proporciona transparencia de un color, cosa que no hace el formato JPG. Ante estas limitaciones surge el formato PNG que proporciona 256 niveles diferentes de transparencia y nos permite imágenes a todo color. No soporta la animación como hace el formato GIF por lo que vamos a necesitar estos tres formatos para trabajar con imágenes para la web.

1. Formato JPEG

JPEG (Joint Photographic Experts Group) es un algoritmo diseñado para comprimir imágenes con 24 bits de profundidad o en escala de grises. Normalmente se le llama JPG debido a la extensión que tiene en sistemas operativos que sólo aceptan tres letras de extension.

JPEG es un algoritmo de compresión con pérdida. Esto significa que al utilizar la imagen tras la compresión no obtenemos exactamente la misma imagen que teníamos antes de la compresión.

Una de las características que hacen muy flexible el JPEG es el poder ajustar el grado de compresión. Si especificamos una compresión muy alta se perderá una cantidad significativa de calidad, pero obtendremos ficheros extremadamente pequeños. Con una cantidad de compresión baja obtenemos una calidad muy parecida a la del original, y un fichero pequeño.

Esta perdida de calidad se acumula. Esto significa que si comprime una imagen y sobre ésta se vuelve a comprimir se obtendrá una perdida mayor. Cada vez que comprima y descomprima la imagen esta perderá algo de calidad.

Veamos como podemos guardar una imagen en formato JPEG utilizando GIMP. No será igual si tenemos una imagen con capas o si tenemos una imagen con una sola capa.

Vamos a crear una imagen desde cero con un Scrip-Fu de Logos para posteriormente guardar esa imagen en formato JPG.

1. En la Caja de Herramientas accedemos a Exts --> Script-Fu --> Logos --> Calor resplandeciente, escribimos "JPG" como texto y aceptamos.
   

2. Obtenemos una imagen con tres capas que vamos a guardar en formato JPG. Archivo --> Guardar como y seleccionamos la carpeta donde guardaremos el archivo; ponemos el nombre del archivo y seleccionamos el formato JPEG y vemos que al nombre que hemos puesto al archivo se le añade la extensión JPG. Hacemos clic en Aceptar y nos aparece un aviso de GIMP recordándonos las características del formato.
   
   

   
   
   No existe ningún problema porque la imagen original queda como estaba y la exportación al formato JPEG se hace de forma externa a la imagen que estamos trabajando. Hacemos clic en Exportar. Aparecen un cuadro de diálogo con las opciones de exportación JPEG y detrás una Ventana Imagen (si hemos marcado la opción Mostrar vista previa...) que muestra la imagen previa del resultado de la exportación de acuerdo a los valores elegidos.
   

3. El cuadro de diálogo es muy completo cuando hacemos clic en Opciones avanzadas, aunque vamos a centrarnos sólo en algunos aspectos que nos permitirán guardar nuestras imágenes de acuerdo a nuestra elección. En cuanto a los parámetros que vamos a utilizar solamente haremos referencia a las opciones de Calidad y Suavizado. La Calidad se puede seleccionar desde 0 hasta 100 viniendo por defecto 85. Esta opción dice a GIMP la compresión que establecerá para el archivo. Podemos ir modificando la Calidad para observar, en la imagen, los cambios que se producen, así como los cambios en el tamaño de la imagen.
   

4. Seamos un poco exagerados para comprobar, antes de guardar, los resultados que se producen sobre nuestra imagen al hacer cambios en la Calidad. Pongamos una calidad de 85 (obtenemos una archivo de 8.483 bytes); cambiemos a 20 (el archivo es de 3121 bytes).
   
   

   Calidad 85

   Calidad 20

   
   Observemos la diferencia entre las dos imágenes con diferencias de Calidad.
   

5. Para que los efectos de la compresión con pérdidas no sea tan evidente podemos modificar la cantidad de Suavizado hasta 1,00.
   

   Calidad 20 - Suavizado 0,1

   Calidad 20 - Suavizado 1,0

    

6. El Suavizado no arregla una excesiva compresión, por lo que deberemos manejar con cuidado la Calidad de la compresión. Podemos decir que la Calidad no debe bajar de 60 cuando las imágenes estén destinadas para la Web.
   
   
7. Dejaremos marcadas las demás opciones que vienen por defecto y añadiremos cualquier comentario a la imagen para poder reconocer esa imagen posteriormente.

Existen diferentes versiones de este formato (GIF87a, GIF89a ...). Permite transparencia de 1 bit, de tal forma que cada píxel de la imagen puede ser o no transparente. Las versiones actuales permiten hacer animaciones simples, aunque la compresión es muy deficiente. Permite utilizar entrelazado en imágenes, de tal forma que las imágenes se visualicen al completo nada más empezar su descarga, pero con una baja definición que va progresando hasta cargarse por completo en los navegadores.

1. Creamos una imagen con las mismas características que la anterior, pero ahora ponemos "GIF" como texto y el tamaño del tipo de letra lo fijamos en 100.
   

2. Archivo --> Guardar como, ponemos nombre al archivo y después elegimos formato GIF. Aceptamos.
   

   
   
   Aparece un cuadro que nos avisa de los cambios que se producirán en nuestra imagen y, dado que nuestra imagen tiene capas, nos avisa sobre la posibilidad de guardar la imagen como una animación en la que se mostrarán las capas una a una formando dicha animación.
   
   También nos dice que la imagen cambiará de modo de color y que pasará a ser indexada o que podemos convertirla a tonos de gris, también con 256 tonos.
   
   
3. Hacemos clic en Exportar con las opciones que vienen por defecto. Al ser una imagen fija el siguiente cuadro de diálogos nos permite escribir un comentario sobre la imagen y elegir la opción de Entrelazado. El resultado se observa a continuación.
   
   

   Guardando todas las capas de que consta la imagen.

   Guardando las capas que tienen una parte transparente.

   
   
4. Podemos hacer el proceso previo antes de guardar la imagen, lo que nos permitirá un mayor control sobre las características de la imagen indexada. En la Ventana Imagen accedemos a Imagen --> Modo --> Indexado. El cuadro Convertir la imagen a colores indexados nos permite seleccionar el tipo de paleta que queremos utilizar con un máximo de 255 colores, si la imagen tienen partes transparentes, y 256 si no hay nada transparente.
   
   
   
   Es conveniente "Activar el difuminado de transparencia" si tenemos áreas transparentes en nuestra imagen.
   

Es un formato de almacenamiento de imagen basado en un algoritmo de compresión sin pérdida. El formato permite imagenes con color verdadero, escala de grises y paleta de 8 bits.

PNG también permite canales alfa, para especificar transparencias. A diferencia de GIF que sólo permite especificar si un píxel es transparente o no. PNG permite especificar 255 grados de transparencia.

Comparado con JPEG, este formato es mejor (tanto en calidad como peso de los archivos generados) para el almacenaje de imágenes con pocas variaciones de colores y/o grandes areas sólidas, mientras que para fotografías el primero es más adecuado.

1. Creamos una imagen igual que las anteriores pero con el texto "PNG" y el tamaño del tipo lo fijamos en 100.
   

2. Elegimos Archivo --> Guardar como..., ponemos nombre al archivo y elegimos el formato PNG. Nos aparece la siguiente advertencia que nos obliga a aplanar la imagen para poder guardarla en formato PNG. Hacemos clic en Exportar.
   
   

    

3. Tenemos las siguientes opciones para guardar en el formato elegido:
   
   

   
   
   Podemos modificar el nivel de compresión de 9 (menor calidad, mayor compresión) a 0 (mayor calidad, menor compresión) y las opciones que vemos. Si queremos obtener la transparencia debemos dejar sin marcar la opción "Guardar el color de fondo".
   
   

   Con color de fondo

   Sin color de fondo

   
   

4. Realiza distintas pruebas al guardar en formato PNG para familiarizarte con las distintas opciones y comprobar la calidad de la compresión.
   
   

   A la máxima compresión, tamaño de archivo 33 K

   Máxima calidad, menor compresión. Tamaño de archivo 173 K

Una vez conocidos los formatos en que podemos guardar nuestras imágenes para la web, comencemos a ver las posibilidades que nos proporciona GIMP para la web.

Animación y web > Formatos