CommunityImagengithub.com

Automatización de Compresión de Imágenes

Usar cuando se necesite comprimir, redimensionar o convertir imágenes de productos en lote (PNG, JPG, WEBP, AVIF) a formatos web JPG, WebP o AVIF en este repositorio, configurar la carpeta de trabajo de un usuario en una máquina nueva, o resolver problemas de dimensionamiento por altura, errores de relación de aspecto y banderas CLI.

¿Qué es Automatización de Compresión de Imágenes?

Esta habilidad automatiza el procesamiento por lotes de imágenes de productos (PNG, JPG, WebP, AVIF) para optimizarlas para la web, convirtiéndolas a JPG, WebP o AVIF, redimensionándolas y comprimiéndolas con la librería `sharp`. Es útil para desarrolladores y creadores de contenido que necesitan preparar rápidamente cientos de imágenes de productos para sitios web, asegurando un tamaño y calidad consistentes. Funciona principalmente en entornos Node.js (>=20.0.0) y está diseñada para ser usada con asistentes de IA como Claude Code, Cursor o Codex a través de un CLI interactivo. El flujo incluye verificar las dependencias, inspeccionar la carpeta de entrada, confirmar con el usuario las dimensiones objetivo y el formato de salida (en lugar de usar valores predeterminados silenciosos), ejecutar el comando con banderas explícitas y reportar los resultados. La herramienta preserva los nombres de archivo originales, aplana PNGs transparentes sobre un fondo blanco (configurable) y mantiene estrictamente la relación de aspecto: si se proporciona una altura (ej. `800px`), calcula el ancho proporcional automáticamente, mientras que con dimensiones exactas (WxH), rechaza cualquier imagen que no coincida (sin recortar ni distorsionar). Soporta banderas opcionales como calidad y fondo, y puede recordar la carpeta de trabajo del usuario mediante un archivo de configuración `.imagerc.json`.

Compatible con~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/alirazawebservice-rgb/image-compress-automation/tree/HEAD/skills/image-compress-automation

Installed? Explore more Imagen skills: steipete/songsee, affaan-m/frontend-design, mattpocock/improve-codebase-architecture · View all 6 →

Preguntar en tu IA favorita

Abre un nuevo chat con esta habilidad de agente ya precargada.

Documentación

¿Qué hace Automatización de Compresión de Imágenes?

Resumen

Redimensiona y comprime imágenes de productos por lotes a archivos .jpg, .webp o .avif listos para la web en segundos usando sharp, preservando los nombres de archivo originales, aplanando PNGs transparentes sobre blanco y manteniendo estrictamente la relación de aspecto (autoescalado con altura única 800px o verificación exacta WxH).

Principio fundamental: Nunca asumas una unidad de trabajo (F:\), nunca recurras silenciosamente a 800x800 o jpg sin confirmar cuando se omitan, y nunca recortes o distorsiones una imagen.

Referencia Rápida

SituaciónAcción
Primera ejecución (falta node_modules/)Ejecuta npm install (requiere Node.js >= 20.0.0)
.imagerc.json ausente y no se proporcionó --dirPregunta al usuario por su carpeta de trabajo antes de ejecutar
Tamaño/altura o formato objetivo omitidosPregunta al usuario por el tamaño (800px altura o WxH) y formato (jpg, webp o avif) antes de ejecutar
El usuario solo da la altura (ej. 800px en webp)Pasa --size 800px --format webp (calcula automáticamente el ancho proporcional por imagen)
El usuario da carpeta de trabajo + WxH + formatoEjecuta `node bin/cli.js --dir "" --size "" --format <jpg
El usuario tiene carpetas separadas de raw y exportaciónEjecuta `node bin/cli.js --input "" --output "" --size "<px
Discrepancia de relación de aspecto exacta WxHNo recortes/estires; reporta tamaños coincidentes sugeridos de la salida (o sugiere modo altura 800px si corresponde)
Fondo PNG transparenteAplanado automáticamente sobre #ffffff (cambia mediante --bg "#hex")

Flujo de Trabajo Paso a Paso para el Agente

Sigue estos pasos en orden cada vez que un usuario te pida comprimir o redimensionar imágenes usando este repositorio:

1. Verifica Configuración y Dependencias

  1. Verifica que node_modules/sharp exista. Si está recién clonado, ejecuta npm install.
  2. Revisa si .imagerc.json existe en la raíz del repositorio (a menos que el usuario ya haya especificado una carpeta en su mensaje).
    • Si no existe .imagerc.json ni el usuario nombró una carpeta, pregunta primero al usuario: "¿Qué carpeta te gustaría usar para tus carpetas de imágenes de input y output? (Por ejemplo, ./ para esta carpeta del proyecto, ~/Desktop/imagenes-tienda o D:\Imagenes)."
    • Nunca asumas F:\Image Compress Automation o adivines ~/Desktop.

2. Inspecciona input/ y Confirma Tamaño + Formato

  1. Asegúrate de que existan <carpeta>/input y <carpeta>/output (o pasa --dir "<carpeta>" para que el CLI los cree).
  2. Verifica cuántas imágenes compatibles (.png, .jpg, .jpeg, .webp, .avif) hay en la carpeta de entrada. Si son 0, informa al usuario la ruta exacta <carpeta>/input donde debe colocar sus imágenes y detente.
  3. Si el usuario no ha declarado explícitamente la altura/dimensiones objetivo o el formato de salida en la solicitud actual, pregunta antes de ejecutar — incluso si los valores predeterminados sin TTY/sin banderas caen a 800x800 y jpg.

3. Ejecuta de Forma No Interactiva y Reporta Resultados

Ejecuta el CLI explícitamente con banderas (evita node bin/cli.js simple en shells de herramientas sin TTY para no depender de valores predeterminados silenciosos):

node bin/cli.js --dir "<carpeta-de-trabajo>" --size "<ALTURApiX o ANCHOxALTURA>" --format "<jpg|webp|avif>"

Banderas opcionales cuando el usuario las solicite:

  • --format <jpg|webp|avif> (por defecto jpg; webp es ~25–35% más pequeño, avif es ~30–50% más pequeño)
  • --quality <1-100> (por defecto 85 para JPG mozjpeg / WebP effort: 6, y 65 para AVIF effort: 4)
  • --bg "<#hex>" (por defecto #ffffff para aplanar PNG transparentes)
  • --strict (devuelve código de salida 1 si algún archivo se salta o falla)

Si el usuario quiere recordar esta carpeta de trabajo para ejecuciones interactivas en terminal (npm start), puedes mencionar o guardar .imagerc.json (en gitignore) o hacer que ejecuten npm run setup.

4. Verifica y Resume la Salida

Reporta directamente desde la salida del comando:

  • Totales de convertidos / saltados / fallidos y espacio ahorrado (MB y %).
  • Ruta exacta de la carpeta de salida (<carpeta-de-trabajo>/output).
  • Para cualquier salto por aspect-ratio-mismatch, muestra las dimensiones/relación originales del archivo y las dimensiones proporcionales sugeridas impresas por el CLI.

Errores Comunes y Señales de Alerta

Pensamiento / ErrorPor Qué Falla y Qué Hacer en su Lugar
"Solo ejecutaré node bin/cli.js sin --size o --format"El valor predeterminado sin TTY elige silenciosamente 800x800 y jpg. Siempre confirma carpeta, tamaño/altura (800px o WxH) y formato (jpg/webp/avif) con el usuario primero y pasa --dir, --size y --format.
"El usuario quiere 800×800 en una foto 1:2 — pasaré fit: cover o escribiré un script de recorte personalizado"Viola la regla principal: nunca recortes o estires silenciosamente. Deja que el CLI rechace discrepancias y dé dimensiones proporcionales.
"Haré commit de .imagerc.json o de PNGs de prueba en input/".imagerc.json, input/* y output/* (excepto .gitkeep) están en gitignore para proteger la privacidad del usuario. Mantenlos sin seguimiento.
"Pasaré --input sin --output"Sin --output o --dir, la salida cae a <cwd>/output. Siempre pasa --dir (flujo estándar) o ambos --input y --output.

Skills relacionados