3.8 KiB
| title | description | keywords | author | date | lastmod | image |
|---|---|---|---|---|---|---|
| PNG, WebP or SVG? Choosing the Right Format for Your QR Code | Technical comparison between PNG, WebP and SVG for QR codes via API. Learn which format to use depending on your use case: email, printing, web or apps. | qr code png, qr code webp, qr code svg, qr code image format, api qr code format | QRRapido | 2026-03-08 | 2026-03-08 |
PNG, WebP or SVG? Choosing the Right Format for Your QR Code
The QRRapido API supports three output formats: png, webp and svg. Each has distinct characteristics that impact file size, quality and compatibility. Use the outputFormat parameter in the request to choose.
{
"content": "https://yoursite.com",
"type": "url",
"outputFormat": "webp"
}
Quick Summary
| Format | Size | Lossless scaling | Compatibility | Ideal for |
|---|---|---|---|---|
| PNG | Medium | No (raster) | Universal | Printing, email, legacy |
| WebP | Small (~30% smaller) | No (raster) | Modern browsers | Web, apps, APIs |
| SVG | Variable (usually smaller) | Yes | Browsers, Adobe, Figma | Logos, banners, vector printing |
PNG — The Universal Standard
PNG is a lossless raster format, ideal for QR codes because it preserves 100% of the black and white pixels without introducing artifacts.
When to use:
- Sending by email (legacy email clients don't support WebP)
- Integration with legacy systems
- When maximum compatibility is a priority
Why not JPEG?
JPEG uses lossy compression that introduces blur artifacts on the edges of QR code modules. This can make the code unreadable, especially at smaller sizes. Never use JPEG for QR codes.
{ "outputFormat": "png" }
WebP — Recommended for Web and Apps
WebP is the ideal format for most modern integrations. Visual quality is indistinguishable from PNG for QR codes, with 25–35% smaller file size.
Advantages:
- Faster loading on web pages
- Lower bandwidth usage in APIs with high volume
- Native support in all modern browsers (Chrome, Safari 14+, Firefox, Edge)
- Lower storage consumption in buckets (S3, GCS, etc.)
When to use:
- Display in
<img>on websites and web applications - iOS/Android apps (both support WebP)
- When you store the generated QR codes
{ "outputFormat": "webp" }
To display in HTML:
<picture>
<source srcset="data:image/webp;base64,{{ qrCodeBase64 }}" type="image/webp">
<img src="data:image/png;base64,{{ fallbackBase64 }}" alt="QR Code">
</picture>
SVG — For Lossless Scaling
SVG is a vector format: the QR code is described mathematically, not as pixels. This means it can be resized to any size — from a 16px icon to a 3-meter banner — without loss of quality.
When to use:
- Graphic materials (banners, posters, packaging, merchandise)
- Integration with design tools (Figma, Illustrator, Canva)
- High-quality printing without depending on resolution
Caution:
- Do not use SVG for email sending (most email clients block SVG for security reasons)
- Some older QR readers may have difficulty with SVG rendered directly via
<img>
{ "outputFormat": "svg" }
To display SVG inline, the qrCodeBase64 must be decoded first:
const svgString = atob(qrCodeBase64);
document.getElementById('qr').innerHTML = svgString;
Size Comparison (real example — 400px, simple URL)
| Format | Typical size |
|---|---|
| PNG | ~8–12 KB |
| WebP | ~5–8 KB |
| SVG | ~3–6 KB |
Sizes vary depending on content complexity (QR codes with more data have more modules).
Recommendation by Use Case
| Scenario | Recommended format |
|---|---|
| Display on website/app | WebP |
| Send by email | PNG |
| Graphic printing / design | SVG |
| Store in cloud | WebP |
| Maximum compatibility | PNG |
| No concern about size | PNG |