130 lines
4.1 KiB
Markdown
130 lines
4.1 KiB
Markdown
---
|
||
title: "PNG, WebP ou SVG? Escolhendo o Formato Certo para seu QR Code"
|
||
description: "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."
|
||
keywords: "qr code png, qr code webp, qr code svg, formato imagem qr code, api qr code formato"
|
||
author: "QRRapido"
|
||
date: 2026-03-08
|
||
lastmod: 2026-03-08
|
||
image: ""
|
||
---
|
||
|
||
# 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.
|
||
|
||
```json
|
||
{
|
||
"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.**
|
||
|
||
```json
|
||
{ "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
|
||
|
||
```json
|
||
{ "outputFormat": "webp" }
|
||
```
|
||
|
||
Para exibir no HTML:
|
||
```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>`
|
||
|
||
```json
|
||
{ "outputFormat": "svg" }
|
||
```
|
||
|
||
Para exibir SVG inline, o `qrCodeBase64` deve ser decodificado primeiro:
|
||
```js
|
||
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** |
|