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

Imagens não otimizadas são frequentemente muito maiores do que precisam ser, consumindo largura de banda desnecessária e aumentando o tempo de carregamento das páginas. A Otimização de Imagens resolve esse problema:

• Comprimindo imagens para reduzir seu tamanho sem perda perceptível de qualidade.
• Convertendo imagens para formatos modernos como WebP e AVIF, que oferecem melhor compressão.
• Redimensionando imagens muito grandes para dimensões mais adequadas à web.
• Removendo metadados desnecessários que aumentam o tamanho do arquivo.

Página de Otimização de Imagens

A página de Otimização de Imagens no painel administrativo do plugin oferece controles detalhados para configurar como suas imagens serão otimizadas:

Status da Otimização

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

• Status atual: Indica se a otimização de imagens está ativa ou inativa.
• Imagens Otimizadas: Número total de imagens que foram otimizadas.
• Economia de Espaço: Quantidade total de espaço economizado pela otimização.
• Redução Média: Percentual médio de redução no tamanho dos arquivos.
• Conversões para WebP/AVIF: Número de imagens convertidas para esses formatos modernos.

Configurações de Otimização

A seção de configurações permite personalizar como suas imagens serão otimizadas:

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: Otimização mínima, mantendo alta qualidade (redução de aprox. 10-20%).
  • Balanceado: Equilíbrio entre qualidade e tamanho do arquivo (redução de aprox. 30-50%).
  • Agressivo: Maior compressão, com possível perda sutil de qualidade (redução de aprox. 50-70%).
• Aplicar a: Define quais imagens serão otimizadas:
  • Todas as imagens: Aplica otimização a todas as imagens, incluindo miniaturas.
  • Apenas tamanhos específicos: Permite selecionar quais tamanhos de imagem serão otimizados.
  • Apenas imagens originais: Otimiza apenas as imagens originais, não as miniaturas.

Configurações Avançadas de Compressão

• Qualidade JPEG: Define a qualidade para arquivos JPEG (1-100). Recomendado: 80-85 para boa qualidade com tamanho reduzido.
• Compressão PNG: Define o nível de compressão para arquivos PNG (0-9). Recomendado: 7-8 para boa compressão.
• Manter Cores PNG: Se ativado, preserva a paleta de cores original em imagens PNG, útil para logotipos e gráficos.
• Otimizar GIFs: Se ativado, aplica otimização também a arquivos GIF, incluindo GIFs animados.
• Remover Metadados: Remove informações EXIF e outros metadados das imagens para reduzir ainda mais o tamanho.

Configurações de Redimensionamento

• Redimensionar Imagens Grandes: Se ativado, redimensiona automaticamente imagens muito grandes.
• Largura Máxima: Define a largura máxima (em pixels) para imagens. Imagens mais largas serão redimensionadas.
• Altura Máxima: Define a altura máxima (em pixels) para imagens. Imagens mais altas serão redimensionadas.
• Manter Proporção: Se ativado, mantém a proporção original da imagem durante o redimensionamento.
• Aplicar Apenas a Originais: Se ativado, o redimensionamento é aplicado apenas às imagens originais, não às miniaturas.

Configurações de Formatos Modernos

Esta seção controla a conversão de imagens para formatos modernos com melhor compressão:

WebP

• Criar versão WebP: Gera uma versão WebP para cada imagem.
• Qualidade WebP: Define a qualidade para arquivos WebP (1-100). Recomendado: 75-80.
• WebP para todos os navegadores: Se ativado, serve WebP para todos os navegadores, substituindo os formatos originais.
• Usar elemento <picture>: Se ativado, usa o elemento HTML <picture> para oferecer WebP com fallback para navegadores que não suportam o formato.

AVIF

• Criar versão AVIF: Gera uma versão AVIF para cada imagem (AVIF oferece ainda melhor compressão que WebP, mas tem menos suporte de navegadores).
• Qualidade AVIF: Define a qualidade para arquivos AVIF (1-100). Recomendado: 60-70.
• Velocidade de Codificação: Equilibra entre velocidade de compressão e tamanho final do arquivo AVIF:
  • Rápida: Compressão mais rápida, mas arquivos ligeiramente maiores.
  • Balanceada: Equilíbrio entre velocidade e compressão.
  • Lenta: Compressão mais demorada, mas arquivos menores.

Configurações Gerais de Formato

• Manter Original: Se ativado, mantém a imagem original além das versões WebP/AVIF.
• Elemento HTML: Escolhe entre usar o elemento <picture> ou <img> com srcset para servir imagens otimizadas.
• Converter PNGs com Transparência: Se ativado, converte também PNGs com transparência para WebP (que suporta transparência, diferente do JPEG).

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

Otimização Automática

Quando a otimização de imagens está ativada, o plugin aplica automaticamente suas configurações de otimização em diferentes cenários:

Imagens Novas

Quando você faz upload de uma nova imagem para a biblioteca de mídia do WordPress:

1. O WordPress gera as miniaturas padrão normalmente
2. O plugin obtém a imagem original e as miniaturas
3. Aplica as configurações de otimização a cada imagem
4. Cria versões WebP e/ou AVIF se configurado
5. Envia todas as versões otimizadas para o Cloudflare R2

Processamento em Lote

Para imagens existentes, você pode aplicar a otimização em lote:

1. Na página de Otimização de Imagens, clique no botão Otimizar Imagens Existentes.
2. O plugin escaneará sua biblioteca de mídia em busca de imagens não otimizadas.
3. Você verá uma tela de confirmação mostrando quantas imagens serão processadas.
4. Clique em Iniciar Otimização para começar o processo.
5. As imagens serão otimizadas em lotes, aplicando todas as configurações definidas.
6. O progresso será exibido, permitindo pausar e continuar o processo conforme necessário.

Servindo Imagens Otimizadas

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

Usando o Elemento HTML <picture>

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 suportado, priorizando AVIF, depois WebP e finalmente recorrendo ao formato original.

Usando srcset com <img>

Alternativamente, se você escolher <img> com srcset, o plugin usará:

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

Esta abordagem é compatível com mais temas e plugins, mas pode não ser suportada por todos os navegadores.

Estatísticas de Otimização

O plugin mantém estatísticas detalhadas sobre o processo de otimização, que podem ser visualizadas na seção "Estatísticas de Otimização" da página:

• Total de imagens processadas: Número total de imagens que passaram pelo processo de otimização.
• Total de imagens otimizadas: Número de imagens que tiveram seu tamanho reduzido.
• Espaço economizado (MB): Quantidade total de espaço economizado pela otimização.
• Redução média: Percentual médio de redução no tamanho dos arquivos.
• Imagens por formato: Distribuição de imagens por formato (JPEG, PNG, GIF, WebP, AVIF).
• Conversões para WebP: Número de imagens convertidas para WebP e espaço economizado.
• Conversões para AVIF: Número de imagens convertidas para AVIF e espaço economizado.

Estas estatísticas são atualizadas em tempo real durante o processo de otimização e oferecem uma visão valiosa sobre a eficácia das suas configurações.

Analisando os Resultados

Para analisar os resultados da otimização de imagens, o plugin oferece ferramentas de comparação:

Visualização Individual

Na biblioteca de mídia, você pode verificar detalhes de otimização para cada imagem:

1. Selecione uma imagem na biblioteca de mídia.
2. Na barra lateral direita, você verá uma nova seção "Otimização R2".
3. Esta seção mostrará:
   • Status de otimização (Otimizada/Não otimizada)
   • Tamanho original vs. tamanho otimizado
   • Percentual de redução
   • Formatos disponíveis (Original, WebP, AVIF)
   • Link para visualizar cada versão

Comparador Visual

O plugin inclui uma ferramenta de comparação visual que permite verificar a diferença entre as versões original e otimizada:

1. Na página de detalhes da imagem, clique em "Comparar Versões".
2. Uma janela modal será aberta mostrando a imagem original e a versão otimizada lado a lado.
3. Você pode ampliar, reduzir e mover as imagens para comparar detalhes específicos.
4. Um controle deslizante permite alternar facilmente entre as duas versões para detectar diferenças sutis.

Otimização Customizada

Em alguns casos, você pode querer aplicar configurações diferentes de otimização para imagens específicas:

Exceções por Tamanho

Você pode definir configurações diferentes para cada tamanho de miniatura:

1. Na seção "Configurações Avançadas", expanda "Configurações por Tamanho".
2. Para cada tamanho de miniatura (thumbnail, medium, large, etc.), você pode definir:
   • Nível de otimização específico
   • Qualidade JPEG/WebP/AVIF específica
   • Ativar/desativar a geração de WebP/AVIF

Exceções por Pasta

Você pode também configurar exceções baseadas em pastas específicas:

1. Na seção "Exceções", clique em "Adicionar Nova Exceção".
2. Selecione o tipo "Pasta" e especifique o caminho da pasta (ex: "/wp-content/uploads/produtos/").
3. Configure as configurações específicas para imagens nesta pasta.