Comprime imágenes utilizando TinyPNG y Gulp

Utiliza la API que proporciona TinyPNG para automatizar la compresión de imágenes en tu proyecto

Diseño web
Lectura de 1 minuto
16 nov. 2018
Comprime imágenes utilizando TinyPNG y Gulp

TinyPNG es una herramienta de compresión de imágenes muy fácil y rápida de utilizar y el día de hoy te enseñaré a cómo puedes automatizarla en tu proyecto con ayuda de Gulp.

Conseguir la API key de TinyPNG

Antes que nada necesitamos conseguir la API key de TinyPNG, para eso procedemos a entrar a la Developer API. Ya estando ahí, introducimos la información que nos piden, la cual sería nuestro nombre completo y un correo electrónico donde nos harían llegar la API key una vez terminemos de enviar el formulario.

botón

Estructura de gulpfile

Ahora que tenemos nuestra API key podemos crear nuestro gulpfile, empezando por las dependencias que necesitaremos

1const gulp = require('gulp'),
2 tinypng = require('gulp-tinypng')

posteriormente crearemos la tarea que se encargará de hacer el trabajo duro por nosotros

1gulp.task('tinypng', () => {
2 gulp.src('./origin-route/*.{png,jpg}')
3 .pipe(tinypng('your-api-key'))
4 .pipe(gulp.dest('./dest-route/'));
5})

Dentro de gulp.src() colocaremos la ruta donde se encuentran las imágenes que queremos comprimir, la terminación \*.{png,jpg} indica que tomará todos los archivos siempre y cuando tengan extensión png o jpg. En tinypng() debemos introducir la API key que se nos envió a nuestro correo electrónico y por último, en gulp.dest() llevará la ruta donde se guardarán las imágenes ya procesadas. Nuestro archivo debe verse algo así:

1const gulp = require('gulp'),
2 tinypng = require('gulp-tinypng')
3
4gulp.task('tinypng', () => {
5 gulp.src('./dev/img/*.{png,jpg}')
6 .pipe(tinypng('L7MSsGfFjQoEW8Ddy9TYtKp7grmF5M9k'))
7 .pipe(gulp.dest('./public/img/'));
8})

Ya sólo nos queda ejecutar nuestra tarea

gulp tinypng

code

Por último, no olvides que tinyPNG sólo permite comprimir 500 imágenes mensuales a usuarios free, por lo que, al menos que adquieras una cuenta premium, es recomendable no abusar y pensar bien las imágenes que realmente necesites comprimir.

Avatar

Alexis Mora Angulo

@jopzikVer perfil

🌮 Orgulloso nayarita y mexicano 💻 UI/UX y docente en EDteam 🖱 Hago cosas en Codepen 🏃🏾‍♂️ Runner de fin de semana 🌊 #NoTeDetengas

Comentarios de los usuarios

AC
Alex Cortes

@alexcortes63060

Si dentro de mi carpeta de imágenes tengo separadas mis imagenes en muchas carpetas como especificará la ruta en el gulpfile?

LE
Leandro Emanuel

@leandroemanuel

Hola, hay algo que no entiendo. ¿Es necesario comprimir las imágenes y usar gulp para esto?

Yo uso un archivo de configuración package.json junto con npm. Para optimizar el rendimiento de carga de imágenes uso un generador de imágenes que me permite generar imágenes en diferentes tamaños y dimensiones. Además me permite hacer un backup en la nube.

https://www.responsivebreakpoints.com/

Pregunto por que veo que hay desarrolladores todavía usan gulp con un automatizador de tareas para comprimir imágenes y no se si es por alguna razón en especial que desconozco.

Recuerda iniciar sesión para comentar este articulo

EDy flotante