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