WebP Buffer renderer

When to use

Use QRCodeWebPRenderer when Node.js-compatible code needs small raster bytes for a file, HTTP response, attachment, or object store, and the destination accepts WebP. The output is lossless WebP, so it keeps every pixel of the PNG Buffer renderer output while usually being much smaller: a default QR code for https://qrcodesdk.dev is about 310 bytes as WebP and 1.1 KB as PNG.

Minimal example

import {qrcode} from '@qrcodesdk/core';
import {QRCodeWebPRenderer} from '@qrcodesdk/node';

const webp = qrcode('https://qrcodesdk.dev').render(QRCodeWebPRenderer());

Styled example

import {qrcode} from '@qrcodesdk/core';
import {diagonal, finder} from '@qrcodesdk/core/style';
import {QRCodeWebPRenderer} from '@qrcodesdk/node';

const webp = qrcode('https://qrcodesdk.dev').render(
  QRCodeWebPRenderer({
    style: {
      moduleSize: 8,
      modules: diagonal(),
      finder: finder({ring: diagonal(), color: '#7c3aed'}),
    },
  }),
);

See Customize appearance for every color, shape, and finder option.

Return value

The renderer synchronously returns a Node.js Buffer containing a complete lossless WebP (VP8L) file. Pixels are identical to the PNG renderer’s output for the same options: the width and height are style.moduleSize × (matrix width + 2 × style.quietZone), shaped edges are anti-aliased, and RGBA colors keep their alpha. Output above 8192 × 8192 pixels (67,108,864 pixels) throws QRCodeError with code INVALID_OPTIONS before any pixels are allocated.

Renderer-specific options

QRCodeWebPRendererOptions accepts style and centerImage. TypeScript rejects every other key; the renderer does not repeat that check at runtime.

Option	Type	Default	Effect
style	QRCodeVisualStyle	shared defaults	Applies graphical dimensions, colors, and shapes
centerImage	QRCodeRasterCenterImage	undefined	Draws a center image from rasterCenterImage()

The encoder has no quality or effort setting. Output is always lossless.

Center image

Create the center image with rasterCenterImage() from PNG bytes, as for the PNG renderer. One center image can be reused across the PNG, WebP, GIF, and JPEG renderers:

import {readFile} from 'node:fs/promises';

import {qrcode} from '@qrcodesdk/core';
import {QRCodeWebPRenderer, rasterCenterImage} from '@qrcodesdk/node';

const centerImage = rasterCenterImage(await readFile('./logo.png'), {size: 0.3});
const webp = qrcode('https://qrcodesdk.dev')
  .errorCorrection('H')
  .render(QRCodeWebPRenderer({centerImage}));

Renderer-specific constraints

• The center-image source must contain PNG bytes, even for WebP output. See the PNG renderer constraints for its limits.
• Most current browsers, image tools, and HTTP clients display WebP. Choose PNG when a destination such as an older email client or document format does not accept it.
• Option values are copied when QRCodeWebPRenderer() is called.

Related guides

• Customize appearance for shared styling and scan reliability.
• Add a center image for reading and sizing a PNG center image.
• Download or save for writing the Buffer to disk.
• Serve a QR code for image/webp HTTP responses.