Cómo optimizar las imágenes de tu blog o sitio web con GIMP
Si tienes un blog o un sitio web, necesitarás incluir imágenes como parte del contenido. Si estas imágenes no están optimizadas, es decir, ocupan demasiado espacio, tu blog o sitio web será muy lento. En este post te voy a contar cómo optimizar las imágenes de tu blog o sitio web con GIMP.
Si tu sitio web es lento debido a que utilizas imágenes no optimizadas (una imagen de calidad con una resolución de 3000 x 2000 pixels puede fácilmente superar los 3 MB), la mala experiencia de navegación que tendrán los lectores de tu blog o los usuarios de tu sitio web incidirá muy negativamente en los resultados de tu sitio. Si se trata de un blog, tus lectores lo abandonarán cuando vean que el último post que has publicado no acaba de cargar. Si se trata de un sitio web en el que vendes algún tipo de producto o servicio, tus clientes se irán a la competencia.
Tampoco debes pasar por alto que otro efecto negativo de que tu sitio web tarde en cargar es que a Google no le gustan los sitios lentos. Uno de los factores que Google tiene en cuenta a la hora de posicionar un sitio es el tiempo de carga. Si el tiempo de carga es excesivo, Google lo tendrá en cuenta de forma negativa dentro de su algoritmo de posicionamiento.
Es por esto que si no quieres incrementar el tiempo de carga de tu sitio, ni afectar negativamente a su posicionamiento en Google, debes utilizar imágenes optimizadas. No tiene sentido que subas a tu sitio imágenes con su tamaño original y con la máxima calidad. Pues bien, existen bastantes aplicaciones para optimizar imágenes, pero en este post te voy a contar como hacerlo con GIMP.
¿Qué es GIMP y dónde puedo conseguirlo?
GIMP es un programa de edición de imágenes digitales totalmente gratuito. Se encuentra disponible para la mayoría de sistemas operativos y en varios idiomas, incluido el español. Puedes descargarlo de http://www.gimp.org/downloads y su instalación es muy sencilla.
Plugins para optimizar imágenes para la web
Una vez que tenemos instalado GIMP, lo siguiente que tenemos que hacer es instalar algún plugin para optimizar imágenes para la web. Yo conozco dos y son los que te voy a contar en este post. No tienes por qué utilizar los dos.
El primero de ellos es Save for Web y lo puedes descargar de http://registry.gimp.org/node/33. Una vez que lo has descargado, debes descomprimir el contenido del archivo zip dentro de la carpeta de plugins GIMP de tu usuario de sistema operativo. En mi caso que utilizo Windows 7, descomprimo el archivo zip que me he descargado dentro de C:\\Users\\Jarfer\\.gimp-2.8\\plug-ins.
El segundo plugin es Save for web with RIOT y hace lo mismo que el anterior, pero utiliza el algoritmo RIOT (Radical Image Optimization Tool), lo que permite afinar aún más en la optimización. Lo puedes descargar de http://registry.gimp.org/node/20778 y te recomiendo que te descargues el instalador en lugar del archivo zip, porque con el instalador la instalación del plugin es bastante más fácil. Una vez descargado el instalador, lo ejecutas y el propio instalador se encarga de copiar todos los archivos que necesita el plugin dentro de la carpeta de plugins GIMP de tu usuario. Si no utilizas el instalador, además de tener que descomprimir el contenido del archivo zip dentro de la carpeta de plugins GIMP de tu usuario, deberás descargar un par de librerías adicionales y copiarlas a mano dentro de esa misma carpeta. En cualquier caso el resultado final será el mismo, pero considero que es más sencillo utilizar el instalador.
Una vez que hemos instalado los plugins, podemos acceder a ellos a través del menú Archivo de la ventana principal de GIMP.
Formatos de imágenes para la web
Antes de nada debes saber que los tres formatos de imágenes más utilizados para la web son JPG, PNG y GIF. A continuación te cuento cual es el formato más adecuado para cada caso:
- Formato JPG: Es el formato más adecuado para imágenes fotográficas con muchos detalles y en las que no nos importa perder parte de la calidad de la imagen original a cambio de que el archivo resultante tenga un tamaño significativamente menor.
- Formato PNG: En este formato, a diferencia del formato JPG, se utiliza un algoritmo de compresión sin pérdida, es decir, no se descarta información de la imagen, por lo que es el formato más adecuado para imágenes con pocas variaciones de colores y grandes áreas con colores sólidos como pueden ser capturas de pantalla, logotipos o imágenes gráficas en general. Si la imagen no tiene demasiados colores (cerca de 256 o menos) es posible guardarla en formato PNG-8, que es el mismo formato PNG pero con una paleta de colores indexada, lo que reduce aún más el tamaño de la imagen.
- Formato GIF: Se trata de un formato similar al PNG, pero con algunas deficiencias respecto a éste, lo que hace que esté en desuso y únicamente se utilice para imágenes animadas.
Pasos para optimizar imágenes para la web con GIMP
Una vez que tenemos instalado GIMP y hemos añadido los plugins que permiten optimizar imágenes para la web, los pasos para optimizar una imagen con GIMP son los siguientes:
- Ajusta el tamaño de la imagen. No necesitas subir a tu sitio web imágenes de 3000 x 2000 pixels. En este blog las imágenes que incluyo en cada post se muestran en pantalla con un ancho máximo de 640 pixels, por lo que cualquier imagen que quiera añadir que supere ese ancho la reduzco hasta los 640 pixels de ancho y al alto correspondiente que permita mantener la proporción entre ancho y alto de la imagen original. Sólo con reducir el tamaño de la imagen al número de pixels con el que la vas a mostrar en tu sitio web, reducirás considerablemente el tamaño del archivo de la imagen. Para ajustar el tamaño de una imagen puedes utilizar cualquiera de los dos plugins que te he indicado o puedes hacerlo con la opción Escalar imagen de GIMP. Esta opción se encuentra en el menú Imagen de la pantalla principal de GIMP.
- Utiliza la opción Save for Web o Save for web with RIOT para optimizar la imagen.
Para una imagen fotográfica con muchos detalles utiliza el formato JPG y ajusta la calidad de la imagen de forma que, sin perder demasiada calidad, se reduzca el tamaño del archivo de la imagen de forma considerable. Con una calidad del 80 al 90% respecto a la calidad de la imagen original, el peso de la imagen, una vez ajustado su tamaño en pixels, se puede reducir fácilmente desde 10 hasta 50 veces o incluso más dependiendo de la imagen. En la siguiente imagen puedes ver cómo una fotografía que ocupa más de 700 KB queda reducida a unos 20 KB al comprimirla con una calidad del 80% respecto a la original. En este ejemplo estoy utilizando el plugin Save for web with RIOT.
Para una imagen con pocas variaciones de colores y grandes áreas con colores sólidos, como por ejemplo una imagen gráfica como la primera imagen de este post, utiliza el formato PNG. Si además la imagen no tiene demasiados colores (cerca de 256 o menos) o se puede reducir el número de colores sin que se pierda demasiada calidad, puedes reducir el peso de la imagen guardándola en formato PNG-8 y ajustando el número de colores a utilizar. En la siguiente imagen puedes ver como se reduce la primera imagen de este post de 32,5 KB a 11,6 KB utilizando el plugin Save for Web y guardándola en formato PNG-8.
Por último, si tu sitio web es un blog con WordPress, puedes instalar en WordPress el plugin WP Smush.it que utiliza el servicio gratuito de Yahoo Smush.it para optimizar imágenes. Yo aunque tengo WP Smush.it instalado, prefiero optimizar las imágenes con GIMP antes de subirlas al blog. El plugin suele realizar una segunda optimización en los casos en los que mi optimización con GIMP es mejorable, y además me garantiza que siempre se realiza la optimización de la imagen, si por lo que sea no la he realizado yo previamente con GIMP.
###
¿Conocías GIMP? ¿Lo has usado alguna vez para optimizar imágenes para la web? ¿Conocías los plugins Save for Web o Save for web with RIOT? ¿Cómo optimizas las imágenes que utilizas en tu sitio web?
Si este post te ha resultado de utilidad, compártelo en las redes sociales. Será útil a otros y a mí me vendrá bien para darme a conocer. ¡Muchas gracias!
Genial, gracias… lo único es que no me ha logrado instalar bien, creo que es un problema en mi PC
Gracias a ti por tu comentario Rusbell.
Aun descargando el plugin riot en esta ruta, no se activa:
C:\Archivos de programa\GIMP 2\lib\gimp\2.0\plug-ins
He ido en el gimp a «editar»-> preferencias->carpetas->complementos y está, pero no se activa :-/
Coseguí que apareciera activo en mi gimp usando esta ruta en mi windows xp:
C:\Documents and Settings\Administrador\.gimp-2.8\plug-ins
Saludos y gracias.
Muchas gracias por tus comentarios Héctor.