Reducir tamaño de imágenes jpg y png

Logo GimpLas imágenes cuanto más grandes sean mejor se ven. En eso estaremos todos de acuerdo. Pero en esto de las imágenes, calidad y cantidad van de la mano, hablo de la cantidad de espacio que ocupan, claro. A la hora de diseñar una página web, el espacio que ocupan las imágenes que utilicemos es muy importante. Las imágenes de una web han de mantener un equilibrio entre calidad y el peso de las mismas, ya que si las imágenes son demasiado pesadas tardarán en cargarse en el explorador del visitante y quizá éste abandone el sitio antes de lo esperado. Si por ejemplo alguien entra desde un teléfono móvil a un sitio con imágenes muy pesadas, podría abandonarlo temiendo que su plan de datos “vuele”. Además de eso, es peor también para el webmaster ya que su espacio en disco y banda ancha contratados se agotarán antes…

En esta entrada vamos a ver dos maneras de reducir considerablemente el peso de imágenes jpg y png. Primero veremos cómo reducirlas con Gimp y después con Imagemagick desde la terminal.

Para reducir el peso de una imagen jpg lo primero que debemos considerar es reducir su tamaño lo máximo posible adaptándola al que realmente necesitamos. La imagen que pongo a continuación tiene un tamaño de 1920×1200 px y pesa 652,6 KB. Ésta es:

Imagen 1920x1200 y 652,6 KB

Imagen 1920×1200 y 652,6 KB

La anchura de la columna donde estás leyendo este blog es de casi 700px, por lo tanto puedo permitirme reducirla. Con la imagen cargada en Gimp, vamos a Imagen >> Escalar la Imagen e introducimos la medida deseada en el ancho, 700px. El alto se adaptará automáticamente.

Gimp Paso 1

Si exportamos la imagen sin hacer nada más, la imagen ahora pesará 114,1 KB. No está mal ¿verdad?, es casi un 15% del peso original. Pero vamos a reducirla un poco más. Antes de exportar una imagen jpg, Gimp nos da la posibilidad de variar la calidad y obtener una vista previa del resultado. Yo en este caso voy a reducir la calidad a 50.

Gimp Paso 2

El peso de la imagen resultante es de 43,1 KB, un 6,6% del peso original. He aquí el resultado:

Imagen 700x438 y 43,1 KB

Imagen 700×438 y 43,1 KB

Lo mismo se puede hacer desde la terminal gracias a Imagemagick con el siguiente comando:

convert tuimagen.jpg -resize 700 -quality 50 tuimagen.jpg

Para las imágenes en formato png, existen tres pasos que reducen bastante el peso de la imagen. Vamos a tomar como ejemplo el logo de Gimp en un tamaño 1000x1000px con transparencia y un peso de 146,8 KB.

Imagen 1000x1000 px y 146,8 KB

Imagen 1000×1000 px y 146,8 KB

El primer paso es Imagen >> Aplanar Imagen que combina todas las capas en una y elimina la transparencia. En este caso, como nuestro fondo es blanco, que se elimine el fondo transparente no nos afecta. Si no fuera así, este paso nos lo tendríamos que saltar. Después de aplanar la imagen, el peso de la misma es de 125,2 KB. El segundo es, como hemos hecho con la imagen jpg, reducir su tamaño. La reduciremos a un tamaño adecuado para acomodarla junto a una columna de texto como la que está al inicio de este tutorial, 256x256px. Ahora su peso es de 24 KB.

Por último vamos a indexar la imagen, es decir, a reducir el número de colores de la imagen. Para ello vamos al menú Imagen >> Modo >> Indexado y escogemos la opción Generar Paleta Óptima.

Gimp Paso 3

Ahora el peso de la imagen es de 10,5 KB, un 7% del original. Ahí es nada. El resultado es la imagen que aparece al inicio de esta entrada:

Imagen 256x256 px y 10,5 KB

Imagen 256×256 px y 10,5 KB

Para hacer lo mismo con Imagemagick:

convert tuimagen.png -background white -alpha remove -alpha off -resize 256 -quality 0 +dither -colors 255 tuimagen.png

Cualquier problema que tengáis, no dudéis en comentarlo.

1 comentario

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *