4.1 KiB
| title | description | keywords | author | date | lastmod | image |
|---|---|---|---|---|---|---|
| PNG, WebP ou SVG? Escolhendo o Formato Certo para seu QR Code | Comparativo técnico entre PNG, WebP e SVG para QR codes via API. Saiba qual formato usar dependendo do seu caso de uso: e-mail, impressão, web ou apps. | qr code png, qr code webp, qr code svg, formato imagem qr code, api qr code formato | QRRapido | 2026-03-08 | 2026-03-08 |
PNG, WebP ou SVG? Escolhendo o Formato Certo para seu QR Code
A API QRRapido suporta três formatos de saída: png, webp e svg. Cada um tem características distintas que impactam tamanho de arquivo, qualidade e compatibilidade. Use o parâmetro outputFormat na requisição para escolher.
{
"content": "https://seusite.com",
"type": "url",
"outputFormat": "webp"
}
Resumo Rápido
| Formato | Tamanho | Escala sem perda | Compatibilidade | Ideal para |
|---|---|---|---|---|
| PNG | Médio | Não (raster) | Universal | Impressão, e-mail, legado |
| WebP | Pequeno (~30% menor) | Não (raster) | Browsers modernos | Web, apps, APIs |
| SVG | Variável (geralmente menor) | Sim | Browsers, Adobe, Figma | Logos, banners, impressão vetorial |
PNG — O Padrão Universal
PNG é um formato raster sem perda, ideal para QR codes porque preserva 100% dos pixels pretos e brancos sem introduzir artefatos.
Quando usar:
- Envio por e-mail (clientes de e-mail antigos não suportam WebP)
- Integração com sistemas legados
- Quando a compatibilidade máxima é prioridade
Por que não JPEG?
JPEG usa compressão com perda que introduz artefatos de borrão nas bordas dos módulos do QR code. Isso pode tornar o código ilegível, especialmente em tamanhos menores. Nunca use JPEG para QR codes.
{ "outputFormat": "png" }
WebP — Recomendado para Web e Apps
WebP é o formato ideal para a maioria das integrações modernas. A qualidade visual é indistinguível do PNG para QR codes, com 25–35% menos tamanho de arquivo.
Vantagens:
- Carregamento mais rápido em páginas web
- Menor uso de bandwidth em APIs com alto volume
- Suporte nativo em todos os browsers modernos (Chrome, Safari 14+, Firefox, Edge)
- Menor consumo de armazenamento em buckets (S3, GCS, etc.)
Quando usar:
- Exibição em
<img>em sites e aplicações web - Apps iOS/Android (ambos suportam WebP)
- Quando você armazena os QR codes gerados
{ "outputFormat": "webp" }
Para exibir no HTML:
<picture>
<source srcset="data:image/webp;base64,{{ qrCodeBase64 }}" type="image/webp">
<img src="data:image/png;base64,{{ fallbackBase64 }}" alt="QR Code">
</picture>
SVG — Para Escalar sem Perda
SVG é um formato vetorial: o QR code é descrito matematicamente, não como pixels. Isso significa que pode ser redimensionado para qualquer tamanho — de um ícone de 16px a um banner de 3 metros — sem perda de qualidade.
Quando usar:
- Material gráfico (banners, cartazes, embalagens, camisas)
- Integração com ferramentas de design (Figma, Illustrator, Canva)
- Impressão de alta qualidade sem depender de resolução
Atenção:
- Não use SVG para envio por e-mail (a maioria dos clientes bloqueia SVG por segurança)
- Alguns leitores de QR antigos podem ter dificuldade com SVG renderizado diretamente via
<img>
{ "outputFormat": "svg" }
Para exibir SVG inline, o qrCodeBase64 deve ser decodificado primeiro:
const svgString = atob(qrCodeBase64);
document.getElementById('qr').innerHTML = svgString;
Comparativo de Tamanho (exemplo real — 400px, URL simples)
| Formato | Tamanho típico |
|---|---|
| PNG | ~8–12 KB |
| WebP | ~5–8 KB |
| SVG | ~3–6 KB |
Os tamanhos variam conforme a complexidade do conteúdo (QR codes com mais dados têm mais módulos).
Recomendação por Caso de Uso
| Cenário | Formato recomendado |
|---|---|
| Exibir em site/app | WebP |
| Enviar por e-mail | PNG |
| Impressão gráfica / design | SVG |
| Armazenar em cloud | WebP |
| Máxima compatibilidade | PNG |
| Sem preocupação com tamanho | PNG |