# Cloudflare Images + R2: imagens rápidas, otimizadas e rastreáveis > Veja como combinar Cloudflare Images e R2 para upload seguro, WebP/AVIF, variantes, cache, preço e capas sem precisar de novo deploy. **Autores:** Mauro Mequelussi **Publicado:** 2026-07-28T12:00:00.000Z **Atualizado:** 2026-07-28T12:00:29.358538847Z **Tags:** performance, cloudflare-images, cloudflare, cache, r2 --- Uma imagem de capa pode ser bonita e ainda atrapalhar o produto se chegar pesada ao celular, sem cache ou em um tamanho que a tela não usa. Cloudflare Images resolve transformação e otimização na edge; R2 resolve armazenamento. Juntos, eles permitem guardar um original uma vez e entregar a variação certa para cada uso. No nosso stack, R2 é a fonte de arquivos e o binding `IMAGES` transforma conteúdo via API. Isso evita subir manualmente uma cópia para card, outra para hero, outra para mobile e outra em WebP. A aplicação continua responsável por upload seguro, relação com a tabela `file` e cache. ## R2 e Cloudflare Images não concorrem | Serviço | Papel | Exemplo no produto | | --- | --- | --- | | R2 | guardar arquivo e metadados | capa original do artigo, material ou anexo | | Cloudflare Images | redimensionar, converter, cortar e otimizar | thumbnail 600×315 em WebP/AVIF | | Worker | autorizar e aplicar regras | bloquear PDF no endpoint de imagem | | banco `file` | rastrear dono e vínculo | qual artigo usa a capa | R2 não gera variações automaticamente. Cloudflare Images não sabe qual usuário pode trocar uma capa. O Worker une as peças com regra de negócio. ## Cenário: blog rápido sem novo deploy para trocar capa O Gestor envia a imagem para a API. A API valida tipo e tamanho, cria uma key versionada no R2, registra `file` e devolve a URL. Quando o Portal precisa de uma versão menor, ele pede transformação com largura, altura, fit e formato definidos. A capa original permanece preservada; a derivada pode ser cacheada. ```text Gestor → API autenticada → R2 (original) → file/uses_file Portal → Worker Images binding → WebP ou AVIF otimizado → CDN ``` Esse fluxo também permite uma política clara: capa pública pode sair por custom domain; comprovante financeiro nunca passa pelo mesmo endpoint aberto. ## O preço que realmente importa Cloudflare Images Free permite até 5 mil transformações únicas por mês. Acima disso, novas transformações retornam erro até você migrar para Images Paid. No plano pago, as primeiras 5 mil transformações seguem incluídas e as adicionais custam US$ 0,50 por mil. Se você usar R2 como storage, paga apenas transformação no Images e storage/operações no R2; não paga o modelo de armazenamento do Cloudflare Images. Uma “transformação única” é a combinação do original e parâmetros. A mesma imagem com 100×100 e 1200×630 conta como duas; repetir 1200×630 no mês não cria outra transformação. Portanto, defina poucas variantes de produto, não um tamanho livre para cada query string recebida. ::callout{type="warning" title="Não deixe parâmetros de imagem completamente abertos"} Um atacante ou um bug pode criar milhares de tamanhos únicos. Valide largura, altura, formato e fit; prefira variantes conhecidas como `avatar`, `card` e `cover`. :: ## Quando usar transformação no Worker O binding de Images funciona com bytes e não exige que o arquivo esteja acessível em URL pública. Isso é útil para um arquivo privado autorizado pela API. A URL de entrega pode bastar para imagem pública simples; o binding dá mais controle quando você já está no Worker e precisa aplicar regra antes de transformar. | Situação | Escolha | | --- | --- | | imagem pública, tamanhos fixos | URL/variante cacheável | | arquivo privado | Worker valida acesso e usa binding | | upload de usuário | API valida e grava R2; não transforme no browser | | muitos tamanhos arbitrários | defina whitelist de variantes | | imagem editorial que quase não muda | gere WebP de capa e cache longo | ## Prós e contras **Prós:** melhor LCP, conversão de formato, menos cópias manuais, cache global e pipeline simples com R2. **Contras:** transformação tem limite/custo por variação, precisa de regra de cache e não substitui curadoria de imagem, acessibilidade ou consentimento de uso. ## Checklist de imagem de produção - [ ] original tem MIME type e tamanho validados; - [ ] key de R2 é versionada; - [ ] arquivo público e privado têm caminhos separados; - [ ] variantes são limitadas e documentadas; - [ ] `alt` descreve a informação visual relevante; - [ ] cache usa URL imutável quando o arquivo muda de key; - [ ] métricas acompanham erro de transformação e volume de variantes. ::read-more{slug="cloudflare-analytics-engine-observabilidade" label="Continuar: meça uso, cache e falhas sem explodir cardinalidade" placement="mid_content"} ## Perguntas frequentes ### Cloudflare Images armazena a imagem obrigatoriamente? Não. Você pode usar R2 ou outra origem como armazenamento e pagar apenas pelas transformações. O armazenamento gerenciado no Images é outra modalidade. ### Preciso salvar WebP e AVIF manualmente? Não necessariamente. A transformação pode negociar formatos adequados. Ainda assim, mantenha o original e defina uma estratégia de fallback. ### R2 com cache longo pode servir imagem antiga? Pode, se você sobrescrever a mesma key. Use uma nova key ao alterar conteúdo e mantenha cache imutável para a URL publicada. ### Fontes e leitura recomendada - [Cloudflare Images](https://developers.cloudflare.com/images/) - [Preços do Cloudflare Images](https://developers.cloudflare.com/images/pricing/) - [Binding de Images em Workers](https://developers.cloudflare.com/images/optimization/binding/) - [Cloudflare R2](https://developers.cloudflare.com/r2/)