Otimização de Imagens

A funcionalidade de Otimização de Imagens permite comprimir e converter automaticamente suas imagens para formatos modernos como WebP e AVIF, reduzindo significativamente o tamanho dos arquivos sem comprometer a qualidade visual. Isso resulta em páginas mais rápidas, menor consumo de largura de banda e melhor experiência para seus visitantes.

Visão Geral

O plugin Codirun R2 Media & Static CDN otimiza suas imagens de várias maneiras:

• Comprime imagens JPEG, PNG e GIF para reduzir seu tamanho
• Converte imagens para os formatos modernos WebP e AVIF
• Substitui automaticamente as tags de imagem com o elemento HTML apropriado
• Envia todas as versões para o CDN do Cloudflare R2

Configurações de Otimização

Na seção "Configurações de Otimização", você pode personalizar como suas imagens serão processadas:

Configurações Básicas

• Ativar Otimização: Ativa ou desativa a otimização de imagens.
• Nível de Otimização: Define o equilíbrio entre qualidade e tamanho do arquivo:
  • Leve: Qualidade JPEG 90, PNG compressão 5 (redução de aprox. 10-20%)
  • Balanceado: Qualidade JPEG 85, PNG compressão 7 (redução de aprox. 30-50%)
  • Agressivo: Qualidade JPEG 65, PNG compressão 9 (redução de aprox. 50-70%)

Formatos de Próxima Geração

• WebP: Gera versões WebP de suas imagens (aprox. 30% menores que JPEG/PNG)
• AVIF: Gera versões AVIF de suas imagens (até 50% menores que WebP)
• Manter Original: Mantém a versão original além das versões WebP/AVIF

Configurações Avançadas

Nas configurações avançadas, você pode ajustar com precisão os parâmetros de otimização:

• Qualidade JPEG: Define a qualidade para arquivos JPEG (1-100). Valores entre 75-85 oferecem bom equilíbrio.
• Compressão PNG: Define o nível de compressão para arquivos PNG (0-9). Valores mais altos geram arquivos menores.
• Qualidade WebP: Define a qualidade para arquivos WebP (1-100). Valores entre 75-85 são recomendados.
• Qualidade AVIF: Define a qualidade para arquivos AVIF (1-100). Valores entre 60-75 são recomendados.
• Elemento HTML: Escolhe entre usar elemento <picture> ou <img> para servir imagens otimizadas.

Como Funciona

O processo de otimização de imagens funciona da seguinte forma:

Para Novas Imagens

1. Quando você faz upload de uma imagem para a biblioteca de mídia do WordPress, o plugin intercepta o processo
2. A imagem é otimizada de acordo com suas configurações, reduzindo seu tamanho
3. Se ativado, o plugin cria versões WebP e/ou AVIF da imagem
4. Todas as versões (original otimizada, WebP, AVIF) são enviadas para o Cloudflare R2
5. O HTML do seu site é modificado automaticamente para usar o elemento <picture> ou <img> com srcset

Para Imagens Existentes

Você pode otimizar imagens existentes usando a funcionalidade "Reprocessamento de Imagens" (disponível na respectiva aba). Esta função permite:

• Aplicar novas configurações de otimização a imagens existentes
• Converter imagens existentes para WebP e/ou AVIF
• Reprocessar apenas certos formatos ou tamanhos de imagem

HTML Gerado

Após otimizar suas imagens, o plugin modifica automaticamente o HTML do seu site para servir as versões otimizadas:

Elemento picture (Recomendado)

Se você escolher o elemento <picture>, o plugin transformará:

<img src="imagem.jpg" alt="Descrição">

Em:

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

Isso permite que o navegador escolha automaticamente o melhor formato que suporta, priorizando AVIF, depois WebP e finalmente o formato original.

Elemento img com srcset

Se preferir usar apenas o elemento <img>, o plugin usará o atributo srcset:

<img src="imagem.jpg" 
     srcset="imagem.avif?format=avif 1x" type="image/avif" 
     srcset="imagem.webp 1x" type="image/webp" 
     alt="Descrição">

Requisitos Técnicos

Para utilizar a otimização de imagens, seu servidor precisa ter:

• PHP 7.4+: Algumas funções avançadas de otimização requerem PHP 7.4 ou superior
• Extensão GD ou ImageMagick: Pelo menos uma destas extensões é necessária para manipulação de imagens
• função imagewebp(): Necessária para conversão para WebP
• função imageavif(): Necessária para conversão para AVIF (disponível em PHP 8.1+ com GD recente)

O plugin verificará automaticamente se seu servidor atende a esses requisitos e mostrará alertas se algum não estiver disponível.

Estatísticas de Otimização

Na aba "Otimização de Imagens", você encontrará estatísticas detalhadas sobre o processo:

• Número total de imagens otimizadas
• Espaço total economizado
• Conversões para WebP e AVIF
• Percentual médio de redução de tamanho

Essas estatísticas são atualizadas em tempo real à medida que novas imagens são processadas.

Recomendações de Uso

• Ative tanto WebP quanto AVIF para máxima economia e compatibilidade
• Use o nível Balanceado para a maioria dos sites
• Mantenha a versão original para garantir compatibilidade com todos os navegadores
• Use o elemento <picture> para melhor compatibilidade com navegadores
• Para sites com muitas imagens, considere realizar o reprocessamento em pequenos lotes para evitar sobrecarregar o servidor

Próximos Passos

Após configurar a otimização de imagens, recomendamos que você:

1. Visite a aba Reprocessamento de Imagens para aplicar otimização às imagens existentes
2. Visite a aba Manutenção para verificar a consistência entre suas imagens e o Cloudflare R2