netlify-image-cdn

Resumen de la skill netlify-image-cdn

Qué hace netlify-image-cdn

La skill netlify-image-cdn te ayuda a usar el Image CDN integrado de Netlify para redimensionar, recortar, reformatear y optimizar imágenes a través de /.netlify/images. Es especialmente útil cuando necesitas una guía práctica de Netlify Image CDN para servir activos locales, construir marcado responsive de imágenes o conectar imágenes subidas por usuarios a una ruta de entrega optimizada.

Quién debería usarla

Esta skill encaja bien en trabajo de frontend y Backend Development en sitios de Netlify que necesitan transformaciones de imagen predecibles sin añadir un servicio de imágenes aparte. Es especialmente relevante si te importa la simplicidad de instalación, el rendimiento de imágenes, el allowlisting de imágenes remotas o combinar almacenamiento de subidas con la entrega.

Qué conviene evaluar antes de adoptarla

Los principales puntos de decisión son si tus imágenes son locales o remotas, si necesitas reescrituras de URL limpias y si tu aplicación necesita un flujo completo de cargas. netlify-image-cdn funciona mejor cuando ya despliegas en Netlify y quieres hacer la transformación en el edge en lugar de montar un backend de medios personalizado.

Cómo usar la skill netlify-image-cdn

Instala e inspecciona los archivos correctos

Empieza con el flujo netlify-image-cdn install de tu sistema de skills y después lee primero SKILL.md. Para más contexto, revisa references/user-uploads.md si estás construyendo cargas de archivos, y usa el árbol de archivos para confirmar si hay otros archivos de referencia vinculados a tu repo. En este repo, el material de apoyo principal está concentrado, así que no necesitas buscar en un conjunto grande de documentación.

Convierte un objetivo general en un prompt útil

Usa el patrón netlify-image-cdn usage indicando desde el principio el tipo de origen, el resultado deseado y las restricciones. Los buenos prompts nombran el origen de la imagen, las dimensiones objetivo, el formato y si la imagen es local o remota.

Ejemplo:

Use netlify-image-cdn to serve a hero image from /photo.jpg at 1200x800, crop with cover, and output webp with quality 80. Include the cleanest Netlify URL and explain any required netlify.toml changes.

Para cargas de usuarios, pide el flujo completo:

Use netlify-image-cdn with Functions + Blobs to store uploaded avatars, expose them at /uploads/:key, and transform them through /.netlify/images. Include the allowlist and rewrite strategy.

Lee los detalles de uso que cambian la calidad del resultado

Los detalles más importantes del repositorio son los parámetros de consulta y las reglas de allowlist para imágenes remotas. Presta atención a url, w, h, fit, position, fm y q, porque determinan si la salida se redimensiona, recorta, negocia automáticamente o queda fijada a un formato. Si vas a servir imágenes externas, lee con cuidado los ejemplos de regex en netlify.toml; una entrada de allowlist omitida es el bloqueo más común.

Preguntas frecuentes sobre la skill netlify-image-cdn

¿Esto es solo para redimensionar imágenes?

No. La skill netlify-image-cdn cubre redimensionamiento, recorte, control del formato de salida y decisiones de optimización. También ayuda cuando necesitas reescrituras de URL limpias o un flujo de imágenes subidas por usuarios en lugar de un simple ajuste de una etiqueta img.

¿Necesito estar en Netlify?

Sí, esta skill es específica del Image CDN de Netlify y de las funciones relacionadas de la plataforma. Si tu aplicación no está desplegada en Netlify, puede ser más apropiado un prompt genérico de imágenes que la skill netlify-image-cdn.

¿Es apta para principiantes?

Sí, si quieres una guía sencilla orientada a la instalación y te sientes cómodo editando HTML, netlify.toml o un archivo de función. La skill es más fácil de usar cuando ya conoces el origen de la imagen y el resultado que buscas.

¿Cuándo no debería usarla?

No uses netlify-image-cdn si necesitas un pipeline multimedia totalmente personalizado y ajeno a Netlify, o si tu requisito depende de transformaciones que no están soportadas por los parámetros del CDN. En esos casos, puede encajar mejor un servicio dedicado de procesamiento de imágenes o un backend específico de tu aplicación.

Cómo mejorar la skill netlify-image-cdn

Dale a la skill el trabajo exacto de imagen

Los mejores resultados salen de entradas concretas: ruta de la imagen o URL remota, tamaño objetivo, intención de recorte, formato de salida y si la calidad debe priorizar el tamaño del archivo o la fidelidad visual. Si solo dices “optimiza esta imagen”, el resultado suele ser menos útil que un prompt que nombre el layout de la página y el dispositivo de destino.

Indica la restricción de despliegue que cambia la implementación

Para netlify-image-cdn for Backend Development, dile a la skill si necesitas cargas, publicación pública o entrega basada en rewrites. Esa decisión determina si la solución debe quedarse en el nivel de HTML o si debe incluir Functions + Blobs junto con una capa de redirección.

Itera sobre la primera respuesta con casos de prueba reales

Si la primera respuesta se acerca pero no sirve, afínala con un caso que falle: un dominio remoto incluido en la allowlist, una relación de aspecto específica o una preferencia de formato del navegador. Eso es más eficaz que pedir “mejor código”, porque deja claro si el problema está en la sintaxis de la URL, en la configuración de Netlify o en el diseño del pipeline.