130 lines
4.2 KiB
Markdown
130 lines
4.2 KiB
Markdown
---
|
||
title: "PNG, WebP o SVG: Eligiendo el Formato Correcto para tu Código QR"
|
||
description: "Comparativa técnica entre PNG, WebP y SVG para códigos QR vía API. Sabé cuál formato usar según tu caso de uso: e-mail, impresión, web o apps."
|
||
keywords: "qr code png, qr code webp, qr code svg, formato imagen qr code, api qr code formato paraguay"
|
||
author: "QRRapido"
|
||
date: 2026-03-08
|
||
lastmod: 2026-03-08
|
||
image: ""
|
||
---
|
||
|
||
# PNG, WebP o SVG: Eligiendo el Formato Correcto para tu Código QR
|
||
|
||
La API QRRapido soporta tres formatos de salida: `png`, `webp` ha `svg`. Cada uno tiene características distintas que impactan el tamaño del archivo, la calidad ha la compatibilidad. Usá el parámetro `outputFormat` en la solicitud para elegir.
|
||
|
||
```json
|
||
{
|
||
"content": "https://tuempresa.com.py",
|
||
"type": "url",
|
||
"outputFormat": "webp"
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
## Resumen Rápido
|
||
|
||
| Formato | Tamaño | Escala sin pérdida | Compatibilidad | Ideal para |
|
||
|---|---|---|---|---|
|
||
| **PNG** | Medio | No (raster) | Universal | Impresión, e-mail, sistemas legados |
|
||
| **WebP** | Pequeño (~30% menor) | No (raster) | Browsers modernos | Web, apps, APIs |
|
||
| **SVG** | Variable (generalmente menor) | **Sí** | Browsers, Adobe, Figma | Logos, banners, impresión vectorial |
|
||
|
||
---
|
||
|
||
## PNG — El Estándar Universal
|
||
|
||
PNG es un formato raster sin pérdida, ideal para códigos QR porque preserva 100% de los píxeles blancos ha negros sin introducir artefactos.
|
||
|
||
**Cuándo usarlo:**
|
||
- Envío por e-mail (clientes de correo antiguos no soportan WebP)
|
||
- Integración con sistemas legados
|
||
- Cuando la compatibilidad máxima es prioridad
|
||
|
||
**¿Por qué no JPEG?**
|
||
|
||
> JPEG usa compresión con pérdida que introduce artefactos de borrosidad en los bordes de los módulos del código QR. Eso puede volverlo ilegible, especialmente en tamaños pequeños. **Nunca usés JPEG para códigos QR.**
|
||
|
||
```json
|
||
{ "outputFormat": "png" }
|
||
```
|
||
|
||
---
|
||
|
||
## WebP — Recomendado para Web ha Apps
|
||
|
||
WebP es el formato porã para la mayoría de las integraciones modernas. La calidad visual es indistinguible del PNG para códigos QR, con **25–35% menos tamaño de archivo**.
|
||
|
||
**Ventajas:**
|
||
- Carga más rápida en páginas web
|
||
- Menor uso de ancho de banda en APIs con alto volumen
|
||
- Soporte nativo en todos los browsers modernos (Chrome, Safari 14+, Firefox, Edge)
|
||
- Menor consumo de almacenamiento en la nube (S3, GCS, etc.)
|
||
|
||
**Cuándo usarlo:**
|
||
- Visualización en `<img>` en sitios ha aplicaciones web
|
||
- Apps iOS/Android (ambos soportan WebP)
|
||
- Cuando almacenás los QR generados
|
||
|
||
```json
|
||
{ "outputFormat": "webp" }
|
||
```
|
||
|
||
Para mostrar en HTML:
|
||
```html
|
||
<picture>
|
||
<source srcset="data:image/webp;base64,{{ qrCodeBase64 }}" type="image/webp">
|
||
<img src="data:image/png;base64,{{ fallbackBase64 }}" alt="Código QR">
|
||
</picture>
|
||
```
|
||
|
||
---
|
||
|
||
## SVG — Para Escalar sin Pérdida
|
||
|
||
SVG es un formato vectorial: el código QR se describe matemáticamente, no como píxeles. Eso significa que se puede redimensionar a cualquier tamaño — desde un ícono de 16px hasta un banner de 3 metros — sin perder calidad.
|
||
|
||
**Cuándo usarlo:**
|
||
- Material gráfico (banners, carteles, packaging, remeras)
|
||
- Integración con herramientas de diseño (Figma, Illustrator, Canva)
|
||
- Impresión de alta calidad sin depender de la resolución
|
||
|
||
**Atención:**
|
||
- No usés SVG para envío por e-mail (la mayoría de los clientes bloquea SVG por seguridad)
|
||
- Algunos lectores de QR antiguos pueden tener dificultad con SVG renderizado directamente vía `<img>`
|
||
|
||
```json
|
||
{ "outputFormat": "svg" }
|
||
```
|
||
|
||
Para mostrar SVG inline, el `qrCodeBase64` debe decodificarse primero:
|
||
```js
|
||
const svgString = atob(qrCodeBase64);
|
||
document.getElementById('qr').innerHTML = svgString;
|
||
```
|
||
|
||
---
|
||
|
||
## Comparativa de Tamaño (ejemplo real — 400px, URL simple)
|
||
|
||
| Formato | Tamaño típico |
|
||
|---|---|
|
||
| PNG | ~8–12 KB |
|
||
| WebP | ~5–8 KB |
|
||
| SVG | ~3–6 KB |
|
||
|
||
> Los tamaños varían según la complejidad del contenido (los QR con más datos tienen más módulos).
|
||
|
||
---
|
||
|
||
## Recomendación por Caso de Uso
|
||
|
||
| Escenario | Formato recomendado |
|
||
|---|---|
|
||
| Mostrar en sitio/app | **WebP** |
|
||
| Enviar por e-mail | **PNG** |
|
||
| Impresión gráfica / diseño | **SVG** |
|
||
| Guardar en la nube | **WebP** |
|
||
| Máxima compatibilidad | **PNG** |
|
||
| Sin preocupación por tamaño | **PNG** |
|