PNG para AVIF: quando trocar screenshot pesado
Veja quando converter PNG para AVIF, quando manter o master em PNG e como publicar screenshots mais leves sem quebrar fallback.
Conteúdo
PNG para AVIF vale quando o arquivo é um screenshot, gráfico ou card visual pesado que vai entrar num site, blog ou documentação. Mantenha o PNG como master editável e exporte AVIF só para entrega. Num teste local, um PNG de 72.601 bytes caiu para 22.095 bytes em AVIF qualidade 65.
Quando vale converter PNG para AVIF?
Vale converter PNG para AVIF quando a imagem já está pronta, não precisa mais de edição pixel a pixel e o peso está atrapalhando carregamento. O caso mais limpo é screenshot de interface, gráfico de relatório, card de documentação ou banner estático usado no site.
Antes de abrir qualquer conversor, faça o teste nativo. No Mac, abra o PNG na Pré-visualização e veja se redimensionar já resolve. No Windows, confira pelo app Fotos se o problema é dimensão exagerada, não formato. Em celular, corte sobra de tela na Galeria ou no Fotos antes de mexer no arquivo. Se a imagem caiu de 1600 px pra 900 px e já ficou leve, trocar formato era excesso de zelo.
Quando o PNG continua grande depois do corte, aí faz sentido usar o RoundCut PNG para AVIF. O ganho aparece mais em imagem plana com áreas repetidas, UI, gradiente discreto e texto renderizado como pixels. Foto de produto também pode diminuir, mas aí WebP e JPG entram na briga com mais nuance.
No meu teste local, criei um dashboard sintético em 1600 x 1000 px. O PNG otimizado ficou em 72.601 bytes. A mesma imagem em AVIF qualidade 65 ficou em 22.095 bytes; em WebP 80, 41.476 bytes. Ou seja: nesse arquivo, o AVIF ficou cerca de 70% menor que o PNG e 47% menor que o WebP.
Esse número não é promessa. É régua. Screenshot de painel limpo costuma responder bem; print com ruído ou foto embutida pode encolher menos, principalmente quando a sombra fica complexa. O que importa é a conferência visual em 100% (que é onde a rebarba aparece), porque o menor arquivo que mastiga texto pequeno vira prejuízo de leitura.
Como converter PNG para AVIF sem perder o controle?
Converta a cópia de entrega, não o arquivo-fonte. Abra o PNG original, confira dimensão, exporte uma versão AVIF e mantenha o PNG guardado numa pasta master. Depois compare lado a lado em 100%, olhando texto pequeno e bordas com contraste alto.
No RoundCut, o fluxo é direto: suba o PNG, escolha AVIF, baixe o resultado e compare antes de apagar qualquer coisa. Se precisa alternar entre WebP, JPG e AVIF no mesmo lote, o RoundCut Convert ajuda porque mantém a decisão de formato no navegador. O lado ruim é o de qualquer conversão visual: qualidade baixa demais pode suavizar texto e deixar a mancha gráfica meio lavada.
Eu começaria com uma qualidade intermediária, revisaria em 100% e só então baixaria mais o peso. Para screenshot de documentação, prefiro preservar texto do que ganhar mais 4 KB. Parece pouco. É pouco mesmo, até alguém abrir a imagem no mobile e achar que o tutorial ficou desfocado.
Quando é melhor manter PNG?
Mantenha PNG quando a imagem ainda é master, quando precisa de transparência confiável para edição ou quando a entrega final exige pixel exato. O próprio padrão PNG define o formato como lossless e cita canal alpha opcional, então ele continua ótimo para arquivo de trabalho, logo transparente e recorte que vai voltar para um editor.
O W3C descreve o PNG como um formato lossless para imagens raster, com suporte a truecolor, grayscale, indexed-color e alpha opcional. Essa é a parte que muita comparação rasa atropela: PNG não é “formato velho”; ele é um formato previsível. Pesado, muitas vezes. Mas previsível.
Para logo, ícone, assinatura recortada ou arquivo com borda transparente que ainda vai passar por revisão, eu seguraria o PNG. Se a dor é só peso de publicação, crie uma cópia moderna e deixe o original quieto. Este guia entra melhor nesse caso, justamente porque transparência ruim estraga mais que uns kilobytes a mais.
AVIF substitui WebP no site?
AVIF pode substituir WebP em alguns slots, mas não precisa virar religião. Use AVIF onde a economia for clara e o visual passar no olho; mantenha WebP ou JPG como alternativa quando o pipeline, o CMS ou o público ainda pede mais previsibilidade.
A AOMedia afirma que o AVIF foi lançado em 2019, melhora qualidade por byte e suporta transparência. A mesma página também registra suporte nos principais navegadores, incluindo Chrome, Firefox, Safari, Opera, Edge e outros. Para site moderno, isso é suficiente pra testar. Para fluxo de cliente, ainda vale manter fallback.
Minha regra chata: AVIF para imagem final de página, PNG para master, WebP como meio-termo quando o time já usa e não quer mexer no pipeline. Se a pergunta veio do Lighthouse, leia também o post de Lighthouse, porque o problema raramente é só extensão de arquivo. Entra entrega, tamanho renderizado, cache e CDN.
Como publicar AVIF sem quebrar compatibilidade?
Publique AVIF com fallback quando a imagem está no HTML do site. O elemento picture permite oferecer uma fonte AVIF e deixar um img comum como alternativa; o navegador escolhe o arquivo compatível antes de baixar a imagem.
A documentação da MDN sobre picture explica que o navegador avalia srcset, media e type para escolher uma imagem compatível, enquanto o img serve como fallback. Na prática, o miolo fica assim: AVIF primeiro, WebP ou PNG depois, dimensões declaradas sempre.
Se o site está pesado, converter o formato é só uma parte do trabalho. Passe a imagem final pelo RoundCut Compress depois de decidir a dimensão correta. Compressão antes do corte costuma esconder o erro: economiza bytes num arquivo que ainda está grande demais pro slot.
Qual conferência fazer antes de apagar o PNG?
Antes de apagar o PNG, abra o AVIF em 100%, reduza para o tamanho real de exibição e teste num navegador comum. Se texto pequeno, linha fina ou transparência de borda piorou, volte um passo. O objetivo é entregar leve sem transformar precisão em ruído (que é o custo escondido).
Use esta ordem:
- Duplique o PNG master.
- Corte sobra e ajuste dimensão.
- Converta a cópia para AVIF.
- Compare com o PNG em 100%.
- Publique com fallback quando for HTML.
- Guarde o PNG original.
Para transparência que precisa continuar transparente, considere também PNG para WebP com transparência. Para o caminho contrário, quando alguém te manda um AVIF que o sistema não aceita, este caminho resolve a parte de compatibilidade.
Meu veredito: PNG é a matriz. AVIF é a entrega. Se o screenshot já passou na revisão visual e vai carregar no site, exporte AVIF; se ele ainda vai voltar para edição, deixe o PNG em paz.
