Cómo crear miniaturas o vistas previas de imágenes con ImageMagick

En una página web es útil utilizar imágenes más pequeñas en tamaño que las originales para reducir la cantidad de kilobytes transferidos al acceder a una página consiguiendo además que cargue más rápido en conexiones lentas. Algunas imágenes en alta calidad pueden ocupar varios megas, es poco eficiente cargar una imagen que posteriormente en el navegador se visualizará en un tamaño más pequeño, ya que la imagen se descargará en su tamaño original pero posteriormente el navegador al visualizarla la escalará al tamaño en que la muestre.

Si con antelación hacemos el escalado podremos ahorrar una buena cantidad de ancho de banda que se notará en mayor medida en los dispositivos móviles que usen las redes de operadores de telefonía y ahorrará datos en aquellos usuarios que tengan algún límite de transferencia mensual en su tarifa. También afecta al SEO, el tiempo de carga de una página Google es un criterio que tiene en cuenta su algoritmo para ordenar los resultados en su página, para mejorar el tiempo de carga de una página otra cosa a considerar es cargar las imágenes cuando se visualizan y no al cargar la página.

Si tenemos unas pocas imágenes y no es algo que hagamos a menudo podemos usar una herramienta de retoque fotográfico como GIMP pero si tenemos muchas imágenes o es algo que hacemos de forma regular es conveniente automatizar la tarea, nos ahorraremos bastante tiempo de algo que es tedioso hacer de forma manual.

Crear una miniatura o vista previa

Al igual que podemos convertir imágenes entre diferentes formatos o añadir marcas de agua a imágenes de forma automatizada con Image Magick podemos escalar imágenes para generar miniaturas o thumbnails más pequeñas para que ocupen menos. El comando para escalar todas las imágenes de una extensión jpg en este caso a un tamaño original de 1600 de ancho y 1067 de alto en pixeles conservando la proporción de la imagen es el siguiente:

1
2
3
4
5
6
7

$ convert -resize 300x200 201607.jpg -strip 201607-thumb.jpg

$ for f in *.jpg; do convert -resize 300x200 "$f" -strip -set filename:f "%t-thumb.%e" "%[filename:f]"; done;
$ for f in *.png; do convert -resize 300x200 "$f" -strip -set filename:f "%t-thumb.%e" "%[filename:f]"; done;

$ for f in *.jpg; do convert -resize 650x450 "$f" -strip -set filename:f "%t-thumb.%e" "%[filename:f]"; done;
$ for f in *.png; do convert -resize 650x4500 "$f" -strip -set filename:f "%t-thumb.%e" "%[filename:f]"; done;

El primero de los comandos sirve para hacer cambios de tamaño de forma individual a cada foto y el segundo de forma masiva usando Bash. Crean nuevos archivos con las miniaturas añadiendo al nombre de cada vista previa la terminación _thumb, además con la opción -strip elimina la metainformación de la foto o imagen que se hubiera almacenado junto con ella como hacen los teléfonos móviles y cámaras.

Este sería una ejemplo de la imagen que tengo como fondo de escritorio. Su tamaño original ocupa 1 MB, la vista previa aproximadamente 210 KB en tamaño 650x450 y 50 KB en tamaño de 300x200. Una reducción de tamaño considerable.

Los ahorros de espacio conseguidos anteriores son consecuencia de reducir el tamaño de la imagen, utilizar el formato de imagen WebP en vez de jpg y png además permite conseguir importantes reducciones de tamaño del espacio ocupado por las fotografías e imágenes originales, en torno al 20% y 60%.

Escala de grises

Los siguientes comandos permiten crear imágenes en escala de grises.

1
2
3
4

$ convert -colorspace Gray -strip 201607.jpg 201607-grayscale.jpg

$ for f in *.png; do convert -colorspace Gray -strip "$f" -set filename:f "%t-grayscale.%e" %[filename:f]; done;
$ for f in *.jpg; do convert -colorspace Gray -strip "$f" -set filename:f "%t-grayscale.%e" %[filename:f]; done;

Convertir svg a jpg o png

Si la imagen original está en el formato escalar svg para convertir a formatos jpg, png, o generar vistas previas el comando es similar indicando también el tamaño de la imagen deseada.

1
2

$ for f in *.svg; do convert -size 750x750 -resize 750x750 "$f" "${f%.*}.jpg"; done;
$ for f in *.svg; do convert -size 750x750 -resize 750x750 "$f" "${f%.*}.png"; done;