CÓMO OPTIMIZAR TUS IMÁGENES CON NODE

PUBLICADO EL 01 Sept 2019, POR VICTOR CORNEJO

CÓMO OPTIMIZAR TUS IMÁGENES CON NODE

Node nuevamente viene al rescate, con un script sencillo puedes tomar tus imágenes y convertirlas a un tamaño especifico con una calidad muy buena para tu web.

Cuando inicio el internet las imágenes eran un dolor de cabeza, con conexiones telefónicas si tenias suerte lograbas ver cargar la imagen que alguien había publicado.

Recuerdo funcionalidades de los primeros navegadores donde podías seleccionar que no cargara las imágenes.

Hoy en día, cuando tenemos conexiones vertiginosas el peso de las imágenes sigue vigente, ya sea porque deseas que los usuarios con dispositivos móviles puedan cargar rápidamente tu website, como también que Google te de una mejor posición en las búsquedas; el peso de las imágenes sigue teniendo una gran importancia.

Node nuevamente viene al rescate, con un script sencillo puedes tomar tus imágenes y convertirlas a un tamaño especifico con una calidad muy buena para tu web.

Requisitos.

Debes tener una estructura de carpetas como la siguiente:

Estructura base

En la raíz de tu proyecto ejecuta las siguientes instrucciones:

npm init
npm install

El objetivo del script es optimizar todas las imágenes que están en la carpeta «origin», generando 3 imágenes con tamaños diferentes ( 480px, 640px y 1200px).

Crea un archivo con nombre «index.js», copia el siguiente código:

const sharp = require('sharp');
const path = require('path');
const fs = require('fs');

const directoryPath = path.join(__dirname, 'origin');

fs.readdir(directoryPath, function (err, files) {
    if (err) {
        return console.log('No fue posible leer el directorio: ' + err);
    }

    files.forEach(convertir);
})

const convertir = function (file) {
    const sizes = [480, 640, 1200];
    const resizesPromises = sizes.map(size => {
        const fileName = path.basename(file, path.extname(file));
        const fileExtension = path.extname(file);
        const pathFileName = path.join(directoryPath, file);
        const pathFileNameOpt = 
        path.join(__dirname, `optimized/${fileName}-${size}${fileExtension}`);
        return sharp(pathFileName).resize(size).toFile(pathFileNameOpt);
    });
    Promise.all(resizesPromises);
}

Como puede observar la imagen de ejemplo pesa 929 Kb, pero la imagen mas grande ya convertida pesa 165 Kb, reducimos el peso del archivo en un 82%.

Definitivamente este script te ayudara a optimizar tus imágenes, reduciendo el tiempo de una forma sencilla. Siempre es bueno tener un poco de ayuda. Si es con Node mejor aun !!!!