Script de Node.js para convertir imágenes a WebP

Convierte imágenes PNG, GIF y JPEG a un formato moderno como WebP con un script de Node.js

¿Qué es el formato WebP?

WebP es un formato de imagen moderno y altamente eficiente desarrollado por Google. Fue diseñado específicamente para la web, buscando ofrecer una compresión superior sin comprometer la calidad visual. Este formato utiliza algoritmos de compresión inteligentes que reducen significativamente el tamaño de los archivos de imagen, manteniendo una calidad visual excepcional.

Compatibilidad y calidad de imagen

Una de las ventajas más destacadas de WebP es su amplia compatibilidad. Aunque inicialmente no era tan compatible como otros formatos, con el tiempo ha ganado terreno. Los principales navegadores como Google Chrome, Mozilla Firefox, Microsoft Edge y Opera lo admiten. Además, su capacidad para ofrecer imágenes de alta calidad con tamaños de archivo más pequeños lo convierte en una opción atractiva para mejorar la experiencia del usuario en sitios web.

En cuanto a la calidad de imagen, WebP puede preservar detalles y colores de manera impresionante, incluso a tasas de compresión agresivas. Esto se traduce en imágenes más nítidas y atractivas visualmente, lo que mejora la estética general de un sitio web.

¿Es mejor que el formato PNG?

A pesar de la popularidad del formato PNG en la web debido a su capacidad para admitir transparencias, WebP tiene la ventaja clave que comprime en tamaños de archivo más pequeños con una calidad igual o superior. Esto significa que tus páginas web cargarán más rápido sin sacrificar la calidad visual, lo que es esencial para mejorar las métricas de Web Vitals y el rendimiento general del sitio.

Mejora las métricas de tus páginas en Web Vitals

Web Vitals son métricas clave proporcionadas por Google para medir la experiencia del usuario en la web e incluso pueden determinar el posicionamiento SEO en los rankings de Google Search. Elementos como el tiempo de carga de la página, la interactividad y la estabilidad visual son fundamentales. Aquí es donde entra en juego el formato WebP: al reducir los tamaños de archivo de las imágenes, contribuye significativamente a la optimización del tiempo de carga de la página y mejora la experiencia del usuario. Esto puede impactar positivamente en métricas vitales como el Largest Contentful Paint (LCP) y el Cumulative Layout Shift (CLS), mejorando así el rendimiento del sitio web en general.

Convertir imágenes JPG, PNG y GIF a WEBP

Si deseas convertir todas tus imágenes en formato JPEG, PNG y GIF a webP, puedes usar la librería sharp. Puedes instalarla usando el comando npm:

npm install sharp

o Yarn,

yarn add sharp

El script a continuación busca todos los archivos de la carpeta inputFolder que contienen las extensiones .png, .gif y .jpg y los convierte a webP, guardándolos en la misma carpeta y con el mismo nombre pero con extensión .webp:

const fs = require('fs');
const path = require('path');
const sharp = require('sharp');
const inputFolder = './input'; // Reemplaza este directorio por el tuyo donde tengas las imágenes que deseas convertir
const extensionsToConvert = ['.png', '.gif', '.jpg'];

async function convertToWebP(inputFilePath) {
  try {
    const image = sharp(inputFilePath);
    const imageInfo = path.parse(inputFilePath);
    const outputFilePath = path.join(imageInfo.dir, `${imageInfo.name}.webp`);

    await image.toFile(outputFilePath);
    console.log(`${inputFilePath} convertido a ${outputFilePath}`);
  } catch (err) {
    console.error(`Error conviertiendo ${inputFilePath} a WebP:`, err);
  }
}

function searchFiles(directory) {
  fs.readdir(directory, (err, files) => {
    if (err) {
      console.error('Error leyendo el directorio:', err);
      return;
    }

    files.forEach((file) => {
      const filePath = path.join(directory, file);

      fs.stat(filePath, (statErr, stat) => {
        if (statErr) {
          console.error('Error al leer el fichero:', statErr);
          return;
        }

        if (stat.isDirectory()) {
          searchFiles(filePath);
        } else {
          const fileExtension = path.extname(file).toLowerCase();
          if (extensionsToConvert.includes(fileExtension)) {
            convertToWebP(filePath);
          }
        }
      });
    });
  });
}

searchFiles(inputFolder);

El formato WebP se ha convertido en una herramienta de gran valor para los desarrolladores web que buscan optimizar el rendimiento de sus sitios. Su capacidad para ofrecer imágenes de alta calidad con tamaños de archivo más pequeños lo convierte en una elección inteligente para mejorar la experiencia del usuario, cumplir con las métricas de Web Vitals y acelerar el rendimiento de la página.