Imagens

A funcionalidade de CDN para Imagens permite que você envie todas as imagens da sua biblioteca de mídia do WordPress para o Cloudflare R2 e as sirva a partir do CDN. Isso melhora significativamente o tempo de carregamento das páginas, reduz a carga do seu servidor e economiza largura de banda da sua hospedagem.

Visão Geral

Imagens geralmente representam a maior parte do tráfego de um site WordPress e podem consumir muitos recursos do servidor. Ao servir suas imagens a partir do Cloudflare R2, você aproveita a rede global da Cloudflare para entregar suas imagens mais rapidamente aos visitantes, independentemente da localização deles.

O plugin automatiza todo o processo de envio de imagens para o R2 e modifica as URLs no WordPress para apontar para o CDN. Esse processo é transparente para seus visitantes e não requer nenhuma modificação manual do código.

Página de Imagens

A página de Imagens no painel administrativo do plugin oferece uma visão completa do status do CDN para imagens e ferramentas para gerenciá-lo:

Status do CDN de Imagens

No topo da página, você encontrará um resumo do status atual:

  • Status atual: Indica se o CDN para imagens está ativo ou inativo.
  • Imagens Enviadas: Mostra o número total de imagens enviadas para o R2.
  • Upload de Miniaturas: Indica se o upload automático de miniaturas está ativado ou desativado.
  • Total de Imagens: Exibe o número total de imagens na biblioteca de mídia.
  • Incluindo Miniaturas: Mostra o número total de arquivos de imagem, incluindo todas as miniaturas.
  • Enviados para R2: Exibe o número total de arquivos enviados para o R2.

Nota: O plugin precisa enviar suas imagens para o R2 antes que o CDN possa ser ativado. Se você ainda não fez isso, verá um aviso indicando que precisa executar o upload inicial.

Configurações de Imagens

A seção de configurações permite personalizar o comportamento do CDN para imagens:

  • Status do CDN de Imagens: Ativa ou desativa o redirecionamento de URLs para imagens.
  • Upload Automático de Miniaturas: Quando ativado, envia automaticamente as miniaturas para o R2 quando novas imagens são adicionadas à biblioteca de mídia.
  • Tamanho do Lote: Define o número de imagens a serem processadas em cada lote durante o upload (recomendado: 20). Reduza esse valor se estiver enfrentando problemas de timeout ou memória.
  • Tamanhos de Miniatura: Define quais tamanhos de miniatura devem ser enviados:
    • Todas as miniaturas: Envia todas as miniaturas geradas pelo WordPress e temas.
    • Selecionar tamanhos específicos: Permite escolher quais tamanhos de miniatura enviar.
    • Apenas imagens originais: Envia apenas as imagens originais, sem miniaturas.

Depois de ajustar as configurações, clique em Salvar Configurações para aplicar as alterações.

Upload de Imagens para R2

Antes de ativar o CDN, você precisa enviar suas imagens para o Cloudflare R2. O plugin automatiza esse processo:

Processo de Upload Inicial

  1. Clique no botão Iniciar Upload de Imagens na página de Imagens.
  2. O plugin primeiro escaneará sua biblioteca de mídia para identificar todas as imagens e suas miniaturas. Este processo pode levar alguns minutos, dependendo do tamanho da sua biblioteca.
  3. Após o escaneamento, o plugin começará a enviar as imagens para o R2 em lotes.
  4. O progresso do upload será exibido, mostrando:
    • Imagens processadas
    • Lotes processados
    • Barra de progresso visual
  5. Você pode pausar o processo a qualquer momento clicando em Parar Upload.
  6. Para continuar um upload pausado, clique em Continuar Upload (Próximo Lote).

Dica: Para bibliotecas de mídia grandes com muitas imagens, o processo de upload pode levar bastante tempo. Se você estiver enfrentando timeouts ou problemas de memória, tente reduzir o tamanho do lote nas configurações.

Upload Automático

Além do upload manual inicial, o plugin gerencia automaticamente o envio de novas imagens para o R2:

  • Imagens Originais: Quando você adiciona uma nova imagem à biblioteca de mídia, a imagem original é automaticamente enviada para o R2.
  • Miniaturas: Se a opção "Upload Automático de Miniaturas" estiver ativada, todas as miniaturas também serão enviadas automaticamente para o R2.

Ativando o CDN para Imagens

Após concluir o upload inicial das imagens, você pode ativar o CDN para começar a servir suas imagens a partir do Cloudflare R2:

  1. Na seção de configurações, ative a opção Status do CDN de Imagens.
  2. Clique em Salvar Configurações.
  3. Limpe o cache do seu site, caso esteja usando um plugin de cache.

Após ativar o CDN, todas as URLs de imagens em seu site serão automaticamente modificadas para apontar para o CDN. Por exemplo:

# URL original:
https://seusite.com/wp-content/uploads/2025/04/imagem.jpg

# URL com CDN:
https://seu-bucket.r2.cloudflarestorage.com/wp-content/uploads/2025/04/imagem.jpg

Se você configurou um domínio personalizado para o CDN, a URL será modificada para usar esse domínio.

Suporte a Formatos Modernos de Imagem

O plugin inclui suporte para formatos modernos de imagem, como WebP e AVIF, com a versão premium. Esses formatos oferecem compressão significativamente melhor mantendo a qualidade visual, resultando em imagens menores e carregamento mais rápido.

Quando ativado, o plugin usa o elemento HTML <picture> para servir o formato mais otimizado que o navegador do visitante suporta. Por exemplo:

<picture>
  <source srcset="imagem.avif" type="image/avif">
  <source srcset="imagem.webp" type="image/webp">
  <img src="imagem.jpg" alt="Descrição">
</picture>

Este método garante compatibilidade com navegadores mais antigos enquanto aproveita os formatos modernos quando disponíveis.

Verificando o Funcionamento do CDN

Após ativar o CDN, é importante verificar se as imagens estão sendo corretamente servidas a partir do Cloudflare R2:

  1. Visite seu site em uma janela anônima do navegador (para evitar interferência do cache do navegador).
  2. Abra as ferramentas de desenvolvimento do navegador (F12 ou botão direito > Inspecionar).
  3. Vá para a aba "Rede" (Network) e recarregue a página.
  4. Filtre por tipos de arquivo como "image" ou "img".
  5. Verifique se as URLs das imagens estão apontando para seu bucket R2 ou domínio personalizado do CDN.

Solução de problemas: Se as imagens não estiverem sendo servidas pelo CDN, verifique:

  • Se o cache do site foi limpo após ativar o CDN.
  • Se há algum conflito com outros plugins de CDN (desative-os temporariamente para testar).
  • Se as imagens foram realmente enviadas para o R2 (verifique o status na página de Imagens).

Recursos Adicionais na Versão Premium

A versão premium do plugin oferece recursos avançados para gerenciamento de imagens:

  • Otimização de Imagens: Comprime automaticamente suas imagens para reduzir o tamanho dos arquivos sem comprometer a qualidade visual.
  • Conversão para WebP e AVIF: Converte automaticamente suas imagens para formatos modernos com melhor compressão.
  • Reprocessamento de Imagens: Permite reprocessar imagens já enviadas para o R2 aplicando novas configurações de otimização.
  • Escaneamento R2: Identifica arquivos no R2 que não estão registrados no WordPress e permite sincronizá-los.
  • Gerenciamento de Exclusões: Configuração avançada para exclusão automática de imagens e miniaturas no R2.