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

Publicado por pico.dev el .
blog-stack gnu-linux planeta-linux software-libre
Comentarios

Linux
GNU

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 previamente 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.

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.

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 vistas previas 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:

El primero de los comandos sirve para haceer cambios de tamaño de forma individual a cada foto y el segundo de forma masiva usando Bash. Crean nuevos archivos con las vistas previas 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.

En Blog Bitix para mostrar la vista previa uso la librería de JavaScript Bootstrap Image Gallery. 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ónd de tamaño considerable.

Previsualización de imagen en tamaño 650x450 y 300x200 del original 1600x1067
Yo apoyo al software libre