A imagem de veículos é uma classe de imagem difícil para compressão: gradientes fotográficos em pintura curva, bordas de corte afiado e um canal alfa que precisa sobreviver intacto onde o carro for composto em um fundo personalizado. A maioria dos conselhos sobre imagens web se aplica, mas os casos extremos são exatamente onde as imagens de carros vivem. Aqui está a decisão de formato, feita corretamente uma vez.
Os três formatos na prática
| PNG | WebP | AVIF | |
|---|---|---|---|
| Transparência | Alfa sem perda | Alpha, com ou sem perda | Suporte alpha |
| Tamanho do arquivo (recorte típico) | A maior de longe | Pequeno | Menor |
| Fidelidade na borda | Perfeito | Muito bom em qualidade razoável | Muito bom, mais lento para codificar |
| Suporte | Universal | Universal na prática | Navegadores modernos |
| Ideal para | Pipelines de impressão, composição | Tudo na web | Crítico de largura de banda, se servido |
Onde cada um vence
PNG: o formato de arquivo e composição
PNG ganha seus bytes exatamente duas vezes: quando a imagem entra em um pipeline de impressão ou design que a recomprimirá de qualquer maneira, e quando a composição a jusante precisa de um canal alfa matematicamente limpo. Como formato de entrega para páginas web, é um hábito, não uma decisão. É frequentemente cinco vezes o tamanho de transferência sem diferença visível.
WebP: o padrão
WebP com canal alfa em qualidade razoável é o trabalho de força: recortes transparentes em uma fração do peso do PNG, suporte universal no navegador e qualidade controlável por solicitação. Para uma grade de listagens ou uma galeria de VDP, format=webp com uma width explícita é toda a política.
AVIF: lápis mais afiado, mesmo desenho
O AVIF comprime mais do que o WebP com qualidade equivalente e sua história de suporte agora é boa. A pergunta honesta é o ganho marginal: em recortes de veículos devidamente dimensionados, o passo do PNG para o WebP é dramático, o passo do WebP para o AVIF é um ajuste. Verifique /api/options para os formatos atualmente servidos antes de construir um pipeline em torno de um.
Os erros que superam a escolha de formato
- Servindo imagens de alta resolução em slots pequenos. Parâmetros de largura existem, use-os
- Enviando transparência PNG para uma página que coloca o carro em um fundo branco de qualquer maneira
- Recomprimir uma imagem já com perda em seu próprio pipeline, empilhando artefatos em bordas cortadas
- Ignorando parâmetros de qualidade: os renders de veículos suportam bem a compressão, e a qualidade padrão em tudo deixa bytes fáceis na mesa.
A escolha de formato vale uma reunião. A disciplina de dimensionamento vale uma reunião por trimestre, para sempre.
Um exemplo trabalhado
Pegue uma grade de listagens que renderiza 48 cartões de veículos. Como PNGs em tamanho real, a página envia dezenas de megabytes de imagens, que os usuários móveis em conexões celulares simplesmente não terminam de carregar. A mesma grade com 600 pixels de largura em WebP geralmente fica duas ordens de magnitude menor por imagem. Nada no design mudou, e a grade passou de inutilizável para instantânea na conexão que a maioria dos compradores realmente tem.
Combine a escolha de formato com srcset e o navegador faz o resto do trabalho: telas pequenas puxam a variante pequena, telas retina puxam a nítida, e ninguém baixa pixels que não pode ver. Como as dimensões são parâmetros de solicitação, toda a configuração responsiva são três URLs que diferem por um número.
O que transparência e variantes de sombra são para, e como se combinam, está coberto em sombras, reflexos e transparência; os parâmetros de entrega estão na documentação da API.
