WebP para TYPO3

Imagens respondem por 50 a 70% do peso da página, e o WebP corta um terço disso

O site TYPO3 médio carrega de 2 a 5 MB em imagens por página. É o maior fator isolado no tempo de carregamento e, portanto, na nota do Google PageSpeed. O WebP é um formato de imagem desenvolvido pelo Google que, com qualidade comparável, é de 25 a 35% menor que o JPEG e até 80% menor que o PNG. A extensão WebP para TYPO3 converte automaticamente as imagens JPG e PNG existentes para WebP, sem que a equipe editorial mude sua forma de trabalhar. As imagens são enviadas ao backend pelo FAL como sempre; a extensão gera a variante WebP em segundo plano e a entrega aos navegadores que suportam o formato. Todos os navegadores modernos suportam WebP desde 2020: Chrome, Firefox, Safari e Edge.

Para sites que já passaram por otimização de PageSpeed, a conversão para WebP costuma ser o último passo que leva a nota de 85 para 95 ou mais.

Sites carregados de imagens, e-commerce e projetos mobile first ganham mais

O cenário mais comum são sites corporativos cheios de imagens. Um portal imobiliário mostra de 15 a 25 fotos por imóvel. Com 500 imóveis, são 10.000 imagens. Sem WebP, cada imagem pesa em média 250 KB (JPEG); com WebP, 170 KB. Numa listagem com 20 imóveis, cada um com uma foto de capa, o WebP economiza 1,6 MB por acesso. Com 50.000 acessos por mês, são 80 GB a menos de tráfego, o que se reflete diretamente nos custos de hospedagem.

O segundo cenário são integrações de e-commerce. Uma loja virtual mostra as fotos de produto em vários tamanhos: miniatura, listagem, página de detalhe, zoom. Cada tamanho ganha uma variante WebP. Numa loja com 2.000 produtos e cinco variantes de imagem cada, surgem 10.000 arquivos WebP, que aceleram de forma mensurável a montagem da página na listagem.

Terceiro cenário: sites mobile first para públicos com conexão ruim. Um portal de ONG usado em regiões com redes 3G ganha de forma desproporcional com arquivos de imagem menores. A diferença entre 5 e 15 segundos de carregamento decide se o visitante vê a página ou desiste.

A conversão acontece no pipeline de processamento de imagens do TYPO3

A extensão se conecta ao pipeline de processamento de imagens do TYPO3. Quando o TYPO3 processa uma imagem (redimensionamento, recorte), a extensão gera também uma variante WebP no mesmo diretório. A entrega acontece por negociação de conteúdo: o servidor verifica o cabeçalho Accept do navegador. Se o navegador aceita “image/webp”, recebe o arquivo WebP. Caso contrário, recebe o JPEG ou PNG original.

Tecnicamente, há duas formas de implementação. A primeira usa regras de mod_rewrite no Apache, ou regras equivalentes no nginx, que desviam as requisições de imagem para a variante WebP quando ela existe. A segunda usa um middleware do TYPO3 que manipula o cabeçalho da resposta. A variante com regras de reescrita tem melhor performance, porque é executada antes do PHP.

A conversão em si roda com a libwebp (ferramenta de linha de comando cwebp), com o ImageMagick com suporte a WebP ou com a extensão GD do PHP (quando compilada com suporte a WebP). A qualidade é configurável: o padrão é 80 (de 100), um bom equilíbrio entre tamanho do arquivo e qualidade visual. Para fotografias, recomendamos de 82 a 85; para capturas de tela e ilustrações, de 75 a 78.

Para uma compressão ainda melhor, as versões mais novas da extensão suportam o formato AVIF, que economiza mais 20 a 30% em relação ao WebP. O AVIF é suportado no Chrome e no Firefox, e no Safari desde a versão 16.

Bibliotecas ausentes no servidor e configuração da CDN são os tropeços mais comuns

O problema mais comum é a falta do binário cwebp no servidor. Ambientes de hospedagem compartilhada muitas vezes não têm a libwebp instalada, e o provedor não permite instalar binários. A solução: usar o GD do PHP com suporte a WebP (disponível na maioria das versões do PHP a partir da 7.1) ou escolher um provedor que ofereça o cwebp. Em servidores gerenciados e em contêineres Docker, a instalação é trivial: apt-get install webp.

Segundo problema: a configuração da CDN. Se há uma CDN (Cloudflare, Fastly, AWS CloudFront) na frente do site, ela precisa tratar o WebP corretamente. Há duas abordagens. Ou a CDN entende a negociação de conteúdo e guarda WebP e JPEG como variantes separadas (Vary: Accept), ou o site TYPO3 entrega diretamente URLs de WebP (sem negociação de conteúdo), e a CDN guarda uma única versão. A Cloudflare oferece conversão automática para WebP pelo recurso Polish, o que torna a extensão do TYPO3 parcialmente dispensável.

Terceiro ponto: controle de qualidade. Com uma qualidade configurada baixa demais (abaixo de 70), surgem artefatos visíveis, sobretudo em degradês e texturas finas. Depois da configuração, vale fazer uma comparação A/B (original contra WebP) para garantir que a qualidade é aceitável para o caso de uso.

O TYPO3 v12 e o v13 são suportados, e a extensão está entre as mais estáveis do ecossistema

A extensão WebP está entre as extensões de performance mais instaladas no ecossistema TYPO3. Ela é mantida ativamente e é compatível com o TYPO3 v12 e v13. Como a funcionalidade central (hook de processamento de imagens, conversão de arquivos) se apoia em APIs estáveis do TYPO3, mudanças incompatíveis em upgrades são raras. A Gosign configura o WebP como padrão em todo novo projeto TYPO3 e, quando disponível, ativa também o AVIF para a compressão máxima.