Save for web es una aplicación que puede funcionar como un plugin de GIMP, ese tremendo editor de imágenes de software libre multiplataforma (GNU/Linux, Windows y Mac OS). Tiene por objeto optimizar el tamaño de las imágenes para ser utilizadas en sitios web. Si las imágenes son de gran tamaño en un blog, este será lento y  tedioso, pero, por otro lado, si las imágenes tienen muy baja calidad, el blog será desagradable. Por tanto hay que buscar una situación de compromiso entre el tamaño de la imagen y la calidad de la imagen.

Save for web nos permite elegir entre distintos formatos de imagen (JPEG, PNG y GIF), redimensionar y recortar la imagen, ajustar distintos parámetros de calidad según el formato, así como el modo en que la imagen se carga en la web, de tal forma que se pueden obtener resultados muy satisfactorios y equilibrados en relación al tamaño de la imagen y su calidad.

Pero también, en mi opinión, Save for web es muy práctico para optimizar el tamaño de imágenes cuyo destino sea un documento de texto o una presentación en la que intercalamos texto, gráficos e imágenes. Si el tamaño es innecesariamente grande para estos fines los documentos serán muy pesados y será muy incómodo trabajar con ellos.

1. Instalación del plugin Save for web en GIMP

● Windows. Existe una aplicación “Gimp Extensions Pack for Windows” que incluye un gran número de plugins para GIMP, todos muy interesantes, entre los que se encuentra Save for web. En el siguiente enlace se descarga la aplicación (Get lastest version) y se muestra un listado con todos los plugins disponibles en dicho paquete:

http://registry.gimp.org/node/27656.

Es un paquete de instalación (exe) y sólo hay que picar para que los plugins se instalen en GIMP.

● Debian, Ubuntu, Kubuntu y otras distribuciones derivadas. Save for web esta disponible en los repositorio oficiales de estas distribuciones, y está incluido en el metapaquete «gimp-plugin-registry» en el que hay otros plugins interesantes que incrementan las funcionalidades de GIMP, como es Resynthesizer. Su instalación es como la de cualquier otro paquete, y lo podemos hacer con el gestor de software que tengamos; Synaptic por ejemplo.

● OpenSUSE. Está en los repositorios oficiales como un paquete específico llamado «gimp-save-for-web». Lo podemos instalar con Instalar/desinstalar software de YaST.

2. Cómo utilizar Save for web

Tenemos que tener la imagen objeto ya cargada en GIMP. Para abrir el plugin vamos a “Archivo>Guardar para la web …”.

En la ventana que se abre las opciones se nos presentan en tres áreas:

1) Formato del archivo de salida en la parte superior izquierd.

2) Redimensionar/Cortar, en la segunda pestaña de la columna izquierda.

3) Calidad y otros parámetros en la primera pestaña. A la derecha tenemos la vista previa de la imagen que se modificará según cambiemos los distintos parámetros de ajuste. Y debajo de la vista previa se nos muestra el tamaño de la imagen en cada momento.

2.1. Primero, seleccionar el formato del archivo de salida

Podemos seleccionar entre los tres tipos de formatos de imagen más usuales en la web:

● JPEG. Es el formato usual para fotografías (24 bits color y 8 bits blanco y negro), especialmente sin son ricas en texturas y colores. Es un formato de imagen que intenta eliminar la información que el ojo humano no es capaz de distinguir, para lo que utiliza un algoritmo de comprensión con pérdida, es decir que para disminuir su tamaño es a costa de la pérdida de información de la imagen, aunque mantiene una buena relación de compromiso entre compresión y calidad. Como limitaciones de este formato resaltar que no está soportado el canal alfa (transparencias) y no permite animación.

● PNG. Es un formato de imagen sin pérdida de información que puede reducir su tamaño mediante algoritmos de comprensión reversibles, pero la disminución suele ser poco significativa. Las fotografías en este formato, por lo general, son archivos muy pesados e inviables para colocarlas en la web, salvo que la imagen tenga grandes áreas de color homogéneo. Se suele utilizar para imágenes de captura de pantalla, dibujos, logotipos y anagramas, o fotografías con amplias zonas ocupadas por un mismo color.

Tenemos además dos opciones: PNG-24, también conocido como color verdadero (true color) que es para imágenes de muy alta calidad, consiguientemente de gran tamaño, por lo que parece un formato poco viable para la web, aunque seguro que puede ser idóneo en determinados casos. Y PNG-8 que son imágenes indexadas con una paleta de 265 colores como máximo y es el usual en las imágenes colocadas en la web; permite el canal alfa por lo que reproduce transparencias y degradados como sombras proyectadas.

● GIF. Soporta 256 colores, transparencias y animaciones. Se utiliza fundamentalmente para imágenes con animaciones.

Imagen formato PNG-8. Captura de pantalla con grandes áreas monocromas (123 KiB).

Personalmente, y como se suele recomendar, utilizo para la web el formato JPEG para fotografías y PNG-8 para imágenes como son logos con transparencias o capturas de pantalla, sobre todo si estas incluyen transparencias y/o degradados. El formato GIF la verdad que aún no lo he utilizado nunca, pero ahí está para cuando sea necesario poner alguna imagen con movimiento.

2.2. Segundo, redimensionar, y recortar en su caso, la imagen

● En la segunda pestaña tenemos la opción de recortar la imagen que lo podemos hacer con el puntero situándolo en las esquinas, o en los lados de la fotografía, y arrastrando. Por lo general, aquí ya traigo la imagen editada y recortada con la herramienta propia de GIMP, por lo que no utilizo esta utilidad.

● En “Redimensionar” fijamos las dimensiones de la imagen de salida, que dependerán de cual sea el objetivo, pero en cualquier caso anchos superiores a 2000 pixeles no parecen muy útiles en la web. Podemos utilizar las dimensiones con las que realmente aparece en el sitio web que pueden ser pequeñas. Por ejemplo las imágenes del panel lateral de este blog son de unos 270 pixeles de ancho.

Aunque, también, como las fotografías en los artículos se pueden ver en la página web con el visor del navegador a mayor tamaño, nos puede interesar que sean más grandes para que el usuario las pueda observar ampliadas; si esta exposición de imágenes la creemos importante, claro está. Por esta razón en mis dos blogs suelo utilizar una anchura de entre 1000 y 1200 pixeles.

● En el cajetín “Ancho” escribimos el valor deseado y picamos en la “cadena” y el “Alto” se recalcula para mantener la proporción de la imagen resultante. Cuando cambiemos las dimensiones observaremos que en la barra inferior el tamaño de la imagen habrá cambiado; disminuyendo claro está.

2.3. Tercero, establecer los parámetros de calidad de la imagen

Según manipulemos los parámetros de la primera pestaña podremos observar el resultado en el visor de la derecha y el tamaño de la imagen resultante en la barra inferior. Los parámetros disponibles son distintos según sea el formato de la imagen de salida.

2.3.1. Comenzaremos con el formato JPEG

Los dos primero parámetros (Calidad y Suavizado) siempre los dejo para al final del proceso, así que comienzo con:

● Optimizar. Es un ajuste automático que siempre disminuirá el tamaño manteniendo una calidad dada. Usualmente lo marco.

● Progresivo y Baseline. Estos parámetros hacen referencia a como se carga la imagen en la página web. Con el formato “Baseline” la imagen se carga con la calidad real que tenga, por lo que a veces observamos, o bien, que aparece un espacio vacío durante unos instantes y repentinamente surge la imagen, o también, que aparece primero sólo la parte superior, después otro fragmento más abajo y finalmente lo que falta de la imagen. Podríamos decir que se carga a “golpes” pero siempre con su calidad real.

Con “Progresivo” se carga por capas de calidad, de tal forma que la imagen la observamos desde el primer momento, pero primero se observa con baja calidad, después media calidad y finalmente la que le corresponda cuando se haya  descarga completamente; se carga progresivamente. Este formato reduce un poco el tamaño de la imagen y mejora la velocidad de carga – o la sensación de que mejora- de una imagen en concreto y de toda la página web, por lo que suele ser la recomendada. Así que podemos desmarcar “Baseline” y marcar “Progresivo”, o, como gusten.

● Strip EXIF. Si lo marcamos elimina la información exif de la imagen, que puede guardar mucha información como la fecha y hora en la que se realzó la fotografía, marca y modelo de la cámara, tipo de objetivo, los datos de la exposición, etc. Si creemos que no es importante para el lector de nuestro blog lo podemos marcar, y supondrá también una reducción del tamaño.

● Calidad. Por defecto suele estar el 85%, si el tamaño de la imagen nos parece adecuado lo dejamos, si el archivo sigue siendo pesado disminuimos la calidad, pero intentando evitar que en la imagen aparezcan los horrorosos artefactos de compresión (marcas alrededor de algunos objetos que distorsionan los perfiles). No obstante, puede ocurrir también que el tamaño de la imagen sea pequeño (una fotografía dominada por un cielo despejado azul, por ejemplo) y, en ese caso, podemos aumentar la calidad al 90% por ejemplo.

● Agudeza. Este parámetro resta tamaño a costa de perder definición o nitidez en la imagen; lo utilizo sólo si es necesario para bajar el tamaño en el caso que este sea excesivo.

2.3.2. Para los formatos de los archivos PNG-8 y GIF los parámetros que podemos modificar son:

● Paleta de colores. Nos presenta tres opciones, la más apropiada, y que está marcada por defecto, es “Generar una paleta óptima” y podemos modificar el número de colores, siendo el valor máximo 256. Esta me parece la opción más adecuada, aunque si se desea que la imagen sea en blanco y negro, pues esta será la que debamos marcas. La opción “Usar la paleta web”, al menos con las imágenes que yo he utilizado, me ha ofrecido resultados que no me convencen; pero seguro que alguna utilidad tendrá, ya veremos.

● Difuminado de la transparencia. Crea un efecto que en algún caso puede llegar a ser interesante.

● Interlazado. Es una opción similar a Progresivo/Baseline, de tal manera que si marcamos “Interlazado” la imagen se cargara en la web de forma progresiva, por capas de calidad, mientras que si la dejamos desmarcada se cargara de “golpe o a golpes”. En este caso, sin embargo, la sensación de una carga más rápida es a costa de un poco más de tamaño de la imagen.

● Compresión. En este caso los valores van del 0 al 9, siendo el más alto el de mayor compresión y menor tamaño de la imagen. Si es posible, porque los resultados son satisfactorios, los suyo es dejar este parámetro en 9.

2.3.3. Para el formato PNG-24

Para este fomato sólo se dispone de “Interlazado” y “Compresión” que operan de igual forma.

3. Qué tamaños de imagen es el adecuada

Esto es un tema que dependen mucho de los objetivos, la temática de la página web y de las preferencias del autor de la misma, pero también de lo que crean qué es importante los usuarios. Por si sirve de guía, y aunque no lo tengo como una regla general, en las fotografías de los artículos (formato JPEG) intento mantenerme entre 100 y 200 KiB, aunque en ocasiones necesito tamaños más grandes, entorno a los 300 KiB, si la fotografía es muy rica en texturas y colores.

Sin embargo, para las fotografías decorativas y de enlaces, en cabecera, panel lateral y pie, puedo utiliza tamaños muy pequeños sobre todo porque intento ajustar las dimensiones a las que realmente se utilizan; según la dimensión en torno a 100, 50 KiB, o menos. Las imágenes de captura de pantalla o logotipos (PNG) el abanico de valores es también muy amplio pero procuro que no sobrepasen los 200 KiB y en muchas ocasiones están por debajo de los 100 KiB.

Como ven, creo que no soy un ejemplo en cuanto a tamaño reducido de imágenes, pero con esta aplicación, que por cierto he empezado a utilizarla no hace mucho tiempo, espero optimizar mejor las imágenes. Ahora bien, la calidad de estas siempre será un argumento de peso en la decisión final; la fotografía, por pura afición, es un elemento esencial en mi blog.

Saludos flamencos,