was successfully added to your cart.

Automatizar el cambio de tamaño de imágenes: Grunt vs. Photoshop

By 6 julio, 2017Blog

Hace poco uno de nuestros Partners me envió alrededor de 200 imágenes para subir a su website. La gran mayoría de imágenes eran de más de 3000 px y no tenía sentido subirlas de este tamaño porque iba a afectar la velocidad de carga del website. Y tampoco pensaba perder mi tiempo cambiando el tamaño una por una, así que decidí automatizar esta tarea.

La opción para programadores

La primera opción, y la más eficiente en mi opinión, era automatizar esta tarea usando Grunt y uno de sus paquetes grunt-image-resize. Si aun no conoces Grunt, te recomiendo su guía para principiantes y cuando lo empieces a usar, empezarás a ahorrar tiempo en tareas repetitivas.

Cuando ya estés familiarizado con Grunt y tengas tus dos archivos básicos (Gruntfile.js y package.json), debes instalar el paquete grunt-image-resize con el siguiente comando en la terminal en el repositorio:

npm install grunt-image-resize --save-dev

Después de instalar el paquete, tienes que cargar y registrar la tarea dentro de Gruntfile.js:

grunt.loadNpmTasks('grunt-image-resize');
grunt.registerTask('default', ['image_resize']);

Lo último es configurar el paquete en Gruntfile.js dentro de grunt.initConfig():


image_resize: {
resize: {
options: {
width: '700',
height: '1050 ',
},
files : [{
expand: true,
src: 'CarpetaOrigen/*.jpg',
dest: CarpetaDestino/',
}] }
}

En este ejemplo, estamos pasando en ancho y el alto de la imagen que queremos de resultado en options. Se puede poner en pixels sin especificar unidad de medida, o en porcentaje especificándolo. Así mismo, especificamos la carpeta de origen y la de destino en files.

Para ejecutar la tarea, simplemente ejecutando el comando grunt en la terminal.

 

La opción para diseñadores

Photoshop también nos permite automatizar cualquier cosa que hagas sin necesidad de usar código.

Lo primero que tienes que hacer es escoger una imagen de ejemplo. Lo que harás con ésta es grabar la acción que quieres replicar en el resto de las imágenes. Esto se puede hacer con la Herramienta Acciones: en la ventanita verás todas las acciones por defecto que tiene Photoshop y la posibilidad de grabar una nueva.

 

Para empezar debes darle clic al botón de la hojita, que indica crear una nueva acción y aparecerá un pop-up para completar la información y posteriormente iniciar la grabación. Lo sabrás porque el ícono de “Grabar nueva acción” estará rojo. En este momento es donde podrás hacer todo lo que quieras replicar en el resto de imágenes. En este caso puedes reducir el tamaño de la imagen, guardarla y cerrarla. Para finalizar la grabación, simplemente haz clic en el cuadrado de “Detener grabación”.

El siguiente paso es ejecutar esta acción en lote. Para esto, debes ir a Inicio > Automatización > Lote (File > Automate > Batch). Allí podrás seleccionar la carpeta donde están todas las imágenes y la acción a ejecutar. Al momento de dar OK empezará a ejecutarse la acción sobre cada imagen.

De estas dos maneras podrás automatizar el cambio de tamaño de imágenes en lote, sin necesidad de hacerlo uno por uno.

Author Mateo Buitrago

More posts by Mateo Buitrago

Leave a Reply

contacto
PAPPCORN
CONTÁCTANOS
Si quieres saber más sobre nuestra filosofía de Partner, o quieres ser parte de nuestro portafolio, no dudes en escribirnos y pronto estaremos en contacto.
Gracias por escribirnos. Somos #TuPartnerDigital
contacto
PAPPCORN
COTIZA TU WEBSITE
Si crees que tu website necesita una planeación diferente, con un desarrollo nativo y hecho a la medida para tu proyecto, completa este formulario y pronto estaremos contactándote.
Gracias por escribirnos. Somos #TuPartnerDigital