---
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** |