Data URI

Data URIs (Data URI scheme) embed binary data as Base64-encoded strings directly within a URI, following the format data:image/png;base64,iVBORw0KGgo.... Instead of referencing an external file, the data itself is contained in the URI. This approach has specific advantages for QR code display in web applications.

Generating QR code images as data URIs offers several benefits. First, no external files are needed - an HTML <img src="data:image/svg+xml;base64,..."> tag displays a QR code without uploading image files to a server. Second, HTTP requests are reduced since no additional request for an image file is necessary, speeding up page load times. Third, email embedding becomes easier because some email clients that block external images can still display data URI images inline.

The primary drawback is that Base64 encoding increases data size by approximately 33%. A QR code image that would be 3 KB as a file becomes roughly 4 KB as a data URI embedded in HTML. For small QR codes (under a few KB), this overhead is negligible. However, for larger or higher-resolution QR code images, the HTML document becomes bloated and browser caching cannot be applied to the image data separately from the page.

In practice, data URIs work best for dynamically generated QR codes that are unique per page view - such as session-specific authentication codes or one-time payment codes. For static QR codes that appear on multiple pages, regular file references with proper caching headers are more efficient. SVG format data URIs are particularly useful for QR codes because SVG compresses well and scales without quality loss.