netlify-image-cdn

Visão geral da skill netlify-image-cdn

O que a netlify-image-cdn faz

A skill netlify-image-cdn ajuda você a usar o Image CDN nativo da Netlify para redimensionar, recortar, converter formatos e otimizar imagens por meio de /.netlify/images. Ela é especialmente útil quando você precisa de um guia prático de Netlify Image CDN para servir assets locais, montar markup de imagens responsivas ou encaixar imagens enviadas por usuários em um fluxo de entrega otimizado.

Quem deve usar

Esta skill é uma boa opção para trabalhos de frontend e Backend Development em sites na Netlify que precisam de transforms de imagem previsíveis sem adicionar um serviço de imagens separado. Ela é especialmente relevante se você valoriza simplicidade de instalação, performance de imagens, allowlist de imagens remotas ou a combinação de armazenamento de uploads com entrega.

O que avaliar antes de adotar

Os principais pontos de decisão são se suas imagens são locais ou remotas, se você precisa de rewrites de URL limpos e se sua aplicação precisa de um pipeline completo de upload. A netlify-image-cdn funciona melhor quando você já faz deploy na Netlify e quer transformação na borda, em vez de um backend de mídia personalizado.

Como usar a skill netlify-image-cdn

Instale e inspecione os arquivos certos

Comece pelo fluxo netlify-image-cdn install do seu sistema de skills e, em seguida, leia primeiro SKILL.md. Para contexto mais profundo, consulte references/user-uploads.md se estiver construindo uploads e use a árvore de arquivos para confirmar se há outros arquivos de referência vinculados ao seu repo. Neste repo, o material de apoio principal fica bem concentrado, então você não precisa garimpar uma documentação extensa.

Transforme um objetivo vago em um prompt utilizável

Use o padrão netlify-image-cdn usage informando logo de início o tipo de origem, a saída desejada e as restrições. Bons prompts nomeiam a origem da imagem, as dimensões alvo, o formato e se a imagem é local ou remota.

Exemplo:

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 uploads de usuários, peça o pipeline 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.

Leia os detalhes de uso que mudam a qualidade da saída

Os detalhes mais importantes do repositório são os parâmetros de query e as regras de allowlist para imagens remotas. Preste atenção em url, w, h, fit, position, fm e q, porque eles determinam se a saída será redimensionada, recortada, negociada automaticamente ou travada em um formato específico. Se você estiver servindo imagens externas, leia com cuidado os exemplos de regex em netlify.toml; uma entrada ausente na allowlist é o bloqueio mais comum.

FAQ da skill netlify-image-cdn

Isso serve só para redimensionar imagens?

Não. A skill netlify-image-cdn cobre redimensionamento, recorte, controle do formato de saída e decisões de otimização. Ela também ajuda quando você precisa de rewrites de URL limpos ou de um fluxo de imagens enviadas por usuários, em vez de apenas ajustar uma tag img.

Preciso estar na Netlify?

Sim, esta skill é específica do Image CDN da Netlify e dos recursos correlatos da plataforma. Se sua aplicação não estiver implantada na Netlify, um prompt genérico de imagens pode fazer mais sentido do que a netlify-image-cdn skill.

É amigável para iniciantes?

Sim, se você quer um guia simples, focado em instalação, e se sente à vontade para editar HTML, netlify.toml ou um arquivo de função. A skill fica mais fácil de usar quando você já sabe qual é a origem da imagem e o resultado desejado.

Quando não devo usar?

Não use netlify-image-cdn se você precisa de um pipeline de mídia totalmente personalizado e sem relação com a Netlify, ou se sua necessidade depende de transforms que não são suportadas pelos parâmetros do CDN. Nesses casos, um serviço dedicado de processamento de imagens ou um backend específico da aplicação pode ser mais adequado.

Como melhorar a skill netlify-image-cdn

Dê à skill a tarefa exata da imagem

Os melhores resultados vêm de entradas concretas: caminho da imagem ou URL remota, tamanho alvo, intenção de recorte, formato de saída e se a qualidade deve priorizar tamanho de arquivo ou fidelidade visual. Se você disser apenas “otimize esta imagem”, o resultado tende a ser menos útil do que um prompt que nomeia o layout da página e o dispositivo de destino.

Informe a restrição de deploy que muda a implementação

Para netlify-image-cdn for Backend Development, diga à skill se você precisa de uploads, entrega pública ou distribuição baseada em rewrite. Essa escolha define se a solução deve ficar só no nível de HTML ou incluir Functions + Blobs junto com uma camada de redirect.

Itere a primeira saída com casos reais de teste

Se a primeira resposta estiver perto do que você precisa, mas ainda não for utilizável, refine com um exemplo que falhou: um domínio remoto já allowlisted, uma proporção específica ou uma preferência de formato no navegador. Isso costuma ser mais eficiente do que pedir “código melhor”, porque deixa claro se o problema está na sintaxe da URL, na configuração da Netlify ou no desenho do pipeline.