Web Development Multi-Tool Workflow 2026-04-18

Image to Base64 + QR Code Generation Workflow

Convert images to Base64 data URIs and generate QR codes for quick sharing. Complete workflow with Bash, Python, and Node.js code examples for automation.

Tools used: Image to Base64 + Base64 Encoder + QR Code Generator All Free

The Problem

You need to embed images directly in HTML emails, single-file documents, or API payloads without hosting files on a server. Then you want to generate a QR code so mobile users can scan and access the content instantly. Doing this manually involves multiple conversion tools and copy-pasting between them.

Why This Workflow Matters

Base64-encoded images eliminate external dependencies — your HTML email or document works offline with zero broken image links. QR codes bridge the gap between print and digital, letting users scan a code to access the full-resolution image or related content. Together, these techniques power offline-first documents, event materials, and rapid prototyping workflows.

Workflow Overview

Step 1 Image to Base64 Step 2 Base64 Encoder Step 3 QR Code Generator

Step-by-Step Instructions

Convert your image to Base64

Drag and drop your image (PNG, JPG, SVG, GIF up to 5 MB) into the Image to Base64 Converter. It generates the Base64 string and a ready-to-use data:image/png;base64,... data URI.

Verify the Base64 output

Copy the Base64 string (without the data URI prefix) and paste it into the Base64 Encoder in decode mode. Confirm the decoded binary matches the original file size. This catches truncation errors from copy-paste.

Embed the data URI in your HTML

Use the data URI directly in an <img src="data:image/png;base64,..."> tag. For CSS, use background-image: url(data:image/png;base64,...). The image loads instantly with no HTTP request.

Generate a QR code for sharing

Paste the URL where the content is hosted (or a short link) into the QR Code Generator. Download the QR code as PNG or SVG. For print materials, use SVG for lossless scaling.

Combine both in your final output

Embed the Base64 image inline in your HTML email or document, and add the QR code image linking to the hosted version. Recipients see the image immediately (Base64) and can scan the QR code to access the full-resolution version or related page.

Before & After

Separate image file + no mobile sharing

<img src="https://cdn.example.com/logo.png" alt="Logo">
<!-- Breaks if CDN is down, blocked by email clients -->
<!-- No way for print readers to access the content -->

Self-contained HTML + QR code for mobile

<img src="data:image/png;base64,iVBORw0KGgo..." alt="Logo">
<!-- Works offline, in emails, in single-file docs -->
<img src="qr-code.png" alt="Scan to view full version">
<!-- Print readers scan to access digital content -->

Automate This Workflow

Copy these scripts to automate the workflow in your preferred language:

$ Bash

# Convert image to Base64 data URI
BASE64=$(base64 -w 0 logo.png)
DATA_URI="data:image/png;base64,$BASE64"
echo "$DATA_URI" > data-uri.txt

# Generate QR code with qrencode
qrencode -o qr-code.png -s 10 "https://example.com/logo"

# Embed both in HTML
cat > output.html << 'EOF'
<img src="data:image/png;base64,${BASE64}" alt="Logo">
<img src="qr-code.png" alt="Scan to view">
EOF

Py Python

import base64
import qrcode  # pip install qrcode[pil]

# Convert image to Base64
with open("logo.png", "rb") as f:
    b64 = base64.b64encode(f.read()).decode()
    data_uri = f"data:image/png;base64,{b64}"

# Generate QR code
qr = qrcode.make("https://example.com/logo")
qr.save("qr-code.png")

# Build HTML with both
html = f'''<img src="{data_uri}" alt="Logo">
<img src="qr-code.png" alt="Scan to view">'''
with open("output.html", "w") as f:
    f.write(html)

JS Node.js

const fs = require("fs");
const QRCode = require("qrcode"); // npm i qrcode

// Convert image to Base64
const img = fs.readFileSync("logo.png");
const b64 = img.toString("base64");
const dataUri = `data:image/png;base64,${b64}`;

// Generate QR code
await QRCode.toFile("qr-code.png",
  "https://example.com/logo",
  { width: 300 }
);

// Build HTML
const html = `<img src="${dataUri}" alt="Logo">
<img src="qr-code.png" alt="Scan">`;
fs.writeFileSync("output.html", html);

Frequently Asked Questions

What is the maximum image size for Base64 encoding?

There is no hard limit, but Base64 increases file size by ~33%. For HTML emails, keep images under 100 KB (encoded ~133 KB). For data URIs in CSS, under 50 KB is ideal. Large Base64 strings slow page rendering — host large images on a CDN and use QR codes to link to them.

Can I put a Base64 image inside a QR code?

Technically no — QR codes have a maximum data capacity of about 3 KB of text. A Base64-encoded image is far too large. Instead, put a URL pointing to the hosted image inside the QR code, and use Base64 only for inline HTML embedding.

Which image format is best for Base64 encoding?

SVG is ideal for logos and icons — it is already text-based and compresses well. For photos, use WebP or optimized JPEG to minimize the Base64 string length. Avoid uncompressed BMP or TIFF, which produce unnecessarily large Base64 output.

How do I automate this workflow in CI/CD?

Use the Bash or Python scripts above in your CI/CD pipeline. Add them as a build step that converts assets to Base64, generates QR codes, and injects both into your HTML templates before deployment.

Related Workflows

🔄

Data Processing

Data Transformation Pipeline

5 tools

🔗

Web Development

URL Encoding & Decoding Workflow

4 tools

Try These Tools Now

All tools in this workflow are free and work directly in your browser — no sign-up required.

Image to Base64 Base64 Encoder QR Code Generator

← All Workflows | Step-by-Step Guides | Workflow Templates