4.2 KiB
| title | description | keywords | author | date | lastmod | image |
|---|---|---|---|---|---|---|
| PNG, WebP o SVG: Eligiendo el Formato Correcto para tu Código QR | 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. | qr code png, qr code webp, qr code svg, formato imagen qr code, api qr code formato paraguay | QRRapido | 2026-03-08 | 2026-03-08 |
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.
{
"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.
{ "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
{ "outputFormat": "webp" }
Para mostrar en 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>
{ "outputFormat": "svg" }
Para mostrar SVG inline, el qrCodeBase64 debe decodificarse primero:
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 |