# Formatos de imagem: JPEG, PNG, WebP e AVIF — quando usar cada um Источник / Source: https://picwin.co/pt/blog/formatos-de-imagem-jpeg-png-webp-avif Язык / Language: pt Рубрика / Topic: Tecnologia Автор / Author: Redação da Picwin Опубликовано / Published: 2026-03-17T00:00:00.000Z Обновлено / Updated: 2026-09-03T11:17:26.468Z Слов / Words: 1698 · Чтение / Reading: 9 min Обложка / Cover: https://picwin.co/api/picwin/blog-images/b6b4b3e1af25913c0dc1563d52c33312fb83a044c09831d0ca6e786a5ff8026b.webp Переводы / Translations: en: https://picwin.co/en/blog/image-formats-jpeg-png-webp-avif, kk: https://picwin.co/kk/blog/suret-formattary-jpeg-png-webp-avif, ru: https://picwin.co/blog/formaty-izobrazheniy-jpeg-png-webp-avif, uz: https://picwin.co/uz/blog/tasvir-formatlari-jpeg-png-webp-avif Quatro formatos resolvem quase todas as necessidades, mas a escolha deve seguir quatro propriedades, não o hábito: perdas, transparência, animação e compatibilidade. Comparamos os recursos, o peso medido com qualidade equivalente e a migração para formatos modernos. --- **Em resumo** Entregue fotografias em WebP ou AVIF e mantenha JPEG como alternativa. Para gráficos com bordas nítidas e transparência, use PNG — ou, de preferência, SVG quando forem vetoriais. Em nossas medições, a mediana do AVIF com qualidade equivalente foi de 66 KB, contra 119 KB do JPEG. Porém, ele demora mais para codificar e precisa de fallback por meio da tag `picture`. Perguntar se JPEG é melhor que PNG não faz sentido: são ferramentas para tarefas diferentes. O formato deve ser escolhido por quatro propriedades, e todas elas podem ser verificadas. ## Em que os formatos são diferentes? Em quatro pontos: se perdem dados durante a compressão, se aceitam transparência e animação e se são amplamente reconhecidos. A **compressão com perdas** descarta parte das informações para reduzir o peso, e elas não podem ser recuperadas. É adequada para fotografias, nas quais o olho não percebe pequenas perdas nos meios-tons, mas inadequada para capturas de tela, onde cada letra tem uma borda definida. A **compressão sem perdas** permite recuperar o arquivo byte por byte. É indispensável em gráficos com cores chapadas, mas deixa fotografias várias vezes mais pesadas. Formato Compressão Alfa JPEG apenas com perdas não PNG apenas sem perdas sim WebP ambas sim AVIF ambas sim Logotipos, ícones e objetos recortados precisam de transparência. A ausência desse recurso no JPEG não é um detalhe: será preciso colocar o objeto sobre um fundo uniforme e torcer para que o fundo da página não mude. ## Quando JPEG ainda é a escolha certa? Quando o arquivo precisa abrir em qualquer lugar: num cliente de e-mail antigo, num CRM de dez anos ou numa gráfica. Todos reconhecem JPEG, que continua sendo uma alternativa sensata dentro de `picture`. Há dois pontos a lembrar. JPEG trabalha com oito bits e não tem canal alfa; por isso, gradientes podem apresentar faixas e não há transparência. Além disso, quase sempre usa subamostragem de cor 4:2:0, armazenando a cor com metade da resolução. Numa fotografia isso passa despercebido; em texto vermelho sobre fundo branco, fica muito visível. ## Quando usar PNG? Quando a imagem é formada por limites nítidos e preenchimentos uniformes: capturas de tela, interfaces, diagramas, logotipos e qualquer conteúdo com texto. PNG preserva tudo sem perdas e com transparência. O PNG tem um modo subestimado: a paleta. Uma imagem com algumas dezenas de cores, salva com uma paleta de 64 cores, pesa várias vezes menos que a versão em cores completas e mantém a mesma aparência. Para ícones e diagramas simples, é a melhor solução quando não for possível usar vetor. O que PNG não consegue fazer é comprimir bem uma fotografia. O mesmo quadro pesa uma ordem de grandeza mais que em JPEG: em nossos testes, um PNG de referência com 1200 pixels de largura ocupou 1–2 MB, enquanto o JPEG ficou entre 58–213 KB. ## O que WebP oferece? WebP é uma solução intermediária que todos os navegadores atuais reconhecem. Admite compressão com e sem perdas, transparência nos dois modos e animação. Um detalhe importante para edição e impressão: o WebP com perdas usa oito bits e subamostragem 4:2:0; o modo sem perdas usa ARGB de 8 bits. O formato também tem um teto rígido de **16 383 pixels** por lado. Para panoramas e telas destinadas a grandes formatos, é uma limitação real. ## O que AVIF oferece e qual é o problema? AVIF se baseia no codec de vídeo AV1 e comprime fotografias de forma muito mais eficiente. Aceita transparência, animação, ampla gama de cores e profundidade de até 12 bits. Seu limite é praticamente inalcançável: 2 147 483 647 pixels por lado, o mesmo do PNG. Há dois problemas. O primeiro é o tempo: codificar AVIF demora várias vezes mais que JPEG, algo perceptível numa biblioteca grande. O segundo é a compatibilidade fora do navegador. Editores antigos, mensageiros e sistemas internos podem não abrir o arquivo. Por isso, a [documentação da MDN sobre tipos de imagem](https://developer.mozilla.org/en-US/docs/Web/Media/Guides/Formats/Image_types) recomenda servir AVIF em `picture`, com uma alternativa. Formato Limite do lado, px Animação JPEG 65 535 não PNG 2 147 483 647 não WebP 16 383 sim AVIF 2 147 483 647 sim Os limites vêm da mesma documentação da MDN. Raramente são relevantes, mas, quando aparecem, costumam surgir de forma inesperada. ## Qual é a diferença de peso entre os formatos? Depende do conteúdo: um céu uniforme pode ser comprimido três vezes melhor que folhagem. Portanto, dizer que “AVIF é 50% mais leve” sem indicar o quadro não significa muito. Faça o teste com seu material; este foi o nosso método. Selecionamos oito fotografias do catálogo, ajustamos cada uma para 1200 pixels de largura e salvamos um PNG de referência. Para cada formato, buscamos a menor qualidade em que a diferença para a referência, pela métrica SSIM, não passasse de 0,02. Assim, comparamos qualidade equivalente medida, e não o mesmo número no campo “quality”. Formato Mediana Variação PNG sem perdas 1,4 MB 1,0–2,0 MB JPEG 119 KB 58–213 KB WebP 97 KB 33–194 KB AVIF 66 KB 16–130 KB A variação importa mais que a mediana. Nos oito quadros, AVIF foi em média 45% mais leve que JPEG, e WebP, 22%. Porém, os extremos variaram duas vezes: numa cena urbana noturna com ruído, AVIF economizou 39% em relação a JPEG; numa cena empresarial com fundo claro uniforme, 73%. Reproduza a medição com três comandos do ImageMagick: `magick photo.jpg -resize 1200x -strip ref.png magick ref.png -quality 60 out.avif magick compare -metric SSIM ref.png out.avif null: ` Altere a qualidade até a diferença se aproximar do limite escolhido e compare o peso dos arquivos resultantes. O artigo sobre [imagens rápidas para sites](/pt/blog/imagens-rapidas-para-sites) explica como relacionar peso e tempo de carregamento. ![Duas colunas comparam as propriedades de JPEG e PNG às dos formatos modernos WebP e AVIF](/api/picwin/blog-images/aea97653e00f0455984fe1749fda10242bbf8c3bee6cbccb52a83517505cd123.webp) Os formatos modernos reduzem o peso, mas exigem uma alternativa na marcação. ## WebP ou AVIF? ### WebP Codifica rapidamente e abre em quase todo lugar, inclusive em muitos programas para computador. Tem transparência e animação. O limite por lado é 16 383 pixels. É uma boa opção padrão para bibliotecas grandes que são recompiladas com frequência. ### AVIF Comprime mais: mediana de 66 KB contra 119 KB do JPEG nos mesmos quadros. Aceita ampla gama e 12 bits. Demora várias vezes mais para codificar e nem sempre abre fora do navegador, portanto precisa de fallback. ## Como migrar uma biblioteca para formatos modernos? - ### Separe as imagens por tipo Coloque fotografias numa lista e gráficos com bordas nítidas ou transparência em outra. As regras são diferentes. - ### Preserve os originais Todas as versões derivadas devem partir do original. Não é possível “melhorar” um arquivo já comprimido convertendo-o. - ### Gere as versões Para fotografias, AVIF e WebP, com JPEG como alternativa. Para gráficos, SVG quando forem vetoriais; caso contrário, PNG com paleta reduzida. - ### Declare a escolha na marcação Use `picture` com vários elementos `source`: o navegador escolhe o primeiro formato que reconhece e ignora os demais. - ### Verifique peso e qualidade por amostragem Dez quadros variados bastam: fundo uniforme, textura fina e gráfico de alto contraste. - ### Mantenha um caminho de volta Um link em e-mail, uma exportação para parceiros ou um arquivo para a gráfica ainda deve ser JPEG ou TIFF, não AVIF. ## E GIF e SVG? O tempo do GIF passou: são 256 cores e um limite de 65 536 pixels por lado. A única finalidade que ainda lhe resta — animações curtas — é atendida melhor por WebP, AVIF ou vídeo comum. SVG é diferente: descreve formas, não pixels. Logotipos, ícones, diagramas e gráficos escalam sem perdas e ocupam poucos kilobytes. A regra é simples: se a imagem foi desenhada, e não fotografada, comece com SVG. O formato não corrige dimensões erradas Um quadro de 3000 pixels de largura num espaço de 400 continua pesado em qualquer formato. Primeiro escolha as dimensões; depois, o formato — nunca o contrário. ## O que isso significa ao trabalhar com um banco de imagens? Um arquivo de banco chega num formato conveniente para armazenamento, não para sua página. Ele é a fonte para criar versões destinadas a cada posição. Capas e prévias da Picwin são entregues em WebP, e a vitrine declara o tipo de cada imagem para que o navegador não precise adivinhar. [IlustraçãoIlustrações e gráficos são a parte do catálogo que mais costuma precisar de vetor ou PNG transparente. Ver os trabalhos](/pt/category/illustration)[TexturasTexturas e fundos: cenas uniformes comprimem melhor, e nelas a diferença entre formatos fica mais evidente. Ver os trabalhos](/pt/category/textures) **Pontos principais** - Escolha pelo nível de perda, transparência, animação e compatibilidade. - Para fotos, WebP ou AVIF com JPEG de fallback; para gráficos, SVG ou PNG. - Com qualidade equivalente, AVIF foi 45% mais leve que JPEG e WebP foi 22% mais leve. - WebP tem limite de 16 383 pixels por lado; no AVIF, o limite prático é inalcançável. - A economia depende da cena: meça seus próprios quadros. Precisa de um quadro pronto para sua tarefa? No mini app da Picwin, a imagem é criada conforme a tarefa e chega pronta para a vitrine; basta escolher o formato adequado à sua posição na página. [Abrir o mini app](/pt/partners) ### Qual é melhor, WebP ou AVIF? AVIF comprime mais; WebP codifica mais rápido e abre em mais programas. Uma solução prática oferece ambos por `picture` e mantém JPEG como alternativa. ### Já podemos abandonar JPEG? Quase, dentro de sites; fora deles, não. E-mails, exportações, gráficas e sistemas internos ainda dependem de JPEG e TIFF. ### Converter JPEG em WebP reduz a qualidade? Sim, ao salvar com perdas. Os artefatos existentes permanecem e outros são acrescentados. Converta a partir do original, não de uma cópia comprimida. ### Por que uma fotografia PNG pesa dez megabytes? Porque PNG comprime sem perdas. Para fotos, isso preserva quase todos os tons; nossos PNGs de referência já pesavam 1–2 MB com 1200 pixels de largura. ### Qual formato escolher para um logotipo? SVG, se houver vetor. Caso contrário, PNG transparente; em dimensões pequenas, uma paleta de 64 cores basta. ### Todos os navegadores aceitam AVIF? As versões atuais dos principais navegadores, sim, mas fora deles a compatibilidade varia. É justamente por isso que a MDN recomenda fallback em `picture`. ### O que é subamostragem 4:2:0 e quando ela atrapalha? É o armazenamento da cor com metade da resolução. Passa despercebida em fotos, mas cria bordas sujas em texto colorido e linhas finas; nesses casos, use PNG ou compressão sem perdas. Continue com [dimensões e resolução](/pt/blog/tamanho-resolucao-e-dpi), [preparação de imagens para sites rápidos](/pt/blog/imagens-rapidas-para-sites) e [preparação para impressão](/pt/blog/preparar-imagens-para-impressao). Veja trabalhos prontos no [catálogo](/pt/catalog).