130 lines
3.8 KiB
Markdown
130 lines
3.8 KiB
Markdown
---
|
||
title: "PNG, WebP or SVG? Choosing the Right Format for Your QR Code"
|
||
description: "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."
|
||
keywords: "qr code png, qr code webp, qr code svg, qr code image format, api qr code format"
|
||
author: "QRRapido"
|
||
date: 2026-03-08
|
||
lastmod: 2026-03-08
|
||
image: ""
|
||
---
|
||
|
||
# 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.
|
||
|
||
```json
|
||
{
|
||
"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.**
|
||
|
||
```json
|
||
{ "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
|
||
|
||
```json
|
||
{ "outputFormat": "webp" }
|
||
```
|
||
|
||
To display in 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 — 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>`
|
||
|
||
```json
|
||
{ "outputFormat": "svg" }
|
||
```
|
||
|
||
To display SVG inline, the `qrCodeBase64` must be decoded first:
|
||
```js
|
||
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** |
|