DEV Community

Cover image for Data2Image - Hide Any File Inside a PNG Image
Benji377
Benji377

Posted on

Data2Image - Hide Any File Inside a PNG Image

#webdev #javascript #typescript #opensource

Have you ever needed to share a file on a platform that only accepts images? Or wanted to create a visual backup of important data? Data2Image lets you convert any file - PDFs, ZIP archives, documents, even executables - into a PNG image that you can decode back to the exact original bytes.

No steganography magic, no hidden pixels. Just straightforward data-to-image encoding with CRC-32 integrity checks, compression, and perfect lossless round-trips.

🌐 Try it now in your browser - no installation needed!

What is Data2Image?

Data2Image is an open-source tool that encodes arbitrary files into PNG images. Each pixel stores your data as RGBA values, creating a visual representation of your file that can be perfectly restored later.

Key features:

  • Lossless round-trip: decode always returns the exact original bytes
  • CRC-32 integrity verification: detects corrupted data
  • Deflate compression: minimizes image size
  • Filename preservation: original name is embedded in the image
  • Cross-platform: works in browsers, Node.js, Deno, and Bun

The encoded images use the .d2i.png extension, so they're still viewable as regular PNGs, they just look like colorful static!

How It Works

The encoding process is simple:

  1. Compress your file data with deflate (same as ZIP)
  2. Frame it with metadata: magic bytes, file size, CRC-32 checksum, and filename
  3. Rasterize the bytes as RGBA pixels in a square PNG image
  4. Decode reverses the process and verifies the checksum 
[4B magic "D2I\x01"]
[4B payload length]
[4B CRC-32 checksum]
[2B filename length]
[N filename (UTF-8)]
[... compressed data]
[... zero padding to fill square]
Enter fullscreen mode Exit fullscreen mode

The format is intentionally straightforward: no encryption, no obfuscation. If you want security, encrypt your file first, then encode it to an image.

Using the Web App

The easiest way to try Data2Image is the web interface, no installation, no sign-up, everything runs locally in your browser.

Encoding Files

  1. Drop files onto the drop zone (or click to browse)
  2. The app auto-detects: regular files → encode, .d2i.png → decode
  3. Click "Process All" to encode/decode in bulk
  4. Download individual results or click "Download All (ZIP)" for bulk download

Screenshot of encoding multiple files

Each encoded file gets a thumbnail preview, yes, your PDF really does look like colorful noise!

Decoding Files

Decoding is just as easy:

  1. Drop .d2i.png images into the web app
  2. The app automatically detects they're encoded files and switches to decode mode
  3. Process them, and you get back your original files with their original names

If the CRC-32 check fails (corrupted data), you'll see an error instead of a broken file.

Using the CLI

For automation and bulk operations, install the CLI tool:

npm install -g data2image
Enter fullscreen mode Exit fullscreen mode

Encode files 

# Single file
data2image encode document.pdf
# → document.pdf.d2i.png

# Bulk encode with glob
data2image encode *.jpg *.pdf -o output/

# Pipe to stdout
data2image encode secret.txt --stdout > out.png
Enter fullscreen mode Exit fullscreen mode

Decode files 

# Single file
data2image decode image.d2i.png
# → original_filename.ext

# Bulk decode
data2image decode *.d2i.png -o restored/
Enter fullscreen mode Exit fullscreen mode

The CLI shows progress indicators for bulk operations, making it perfect for scripting and CI pipelines.

Using the Library

Want to integrate Data2Image into your own project? The core library is MIT licensed:

npm install @data2image/core
Enter fullscreen mode Exit fullscreen mode

Node.js Example 

import { encode, decode } from "@data2image/core";
import { readFileSync, writeFileSync } from "fs";

// Encode
const fileData = readFileSync("document.pdf");
const pngBytes = encode(fileData, "document.pdf");
writeFileSync("document.pdf.d2i.png", pngBytes);

// Decode
const pngData = readFileSync("document.pdf.d2i.png");
const { filename, data } = decode(pngData);
console.log(filename); // "document.pdf"
writeFileSync(filename, data);
Enter fullscreen mode Exit fullscreen mode

Browser Example 

import { encode, decode } from "@data2image/core";

// Handle file upload
async function encodeFile(file) {
  const bytes = new Uint8Array(await file.arrayBuffer());
  const pngBytes = encode(bytes, file.name);

  // Create download
  const blob = new Blob([new Uint8Array(pngBytes)], { type: "image/png" });
  const url = URL.createObjectURL(blob);
  // ... trigger download
}
Enter fullscreen mode Exit fullscreen mode

The library is fully typed with TypeScript and works across all modern JavaScript runtimes.

Use Cases

Where is this useful?

  • 📤 Platform restrictions: share files on image-only platforms
  • 💾 Visual backups: create PNG archives of important documents
  • 🎨 Data art: create visual representations of file data
  • 🧪 Security research: test data exfiltration vectors
  • 📦 Archival: store data in formats accepted by archival image repositories

The Tech Stack

  • TypeScript for type safety and great DX
  • tsup for dual ESM + CJS builds
  • pako for deflate compression
  • upng-js for PNG encoding/decoding
  • Vite for the blazing-fast web interface
  • Vitest for comprehensive testing

The entire project is a monorepo with three packages:

  • @data2image/core (MIT): the encoder/decoder library
  • data2image (GPLv3): the CLI tool
  • Website (GPLv3): the drag-and-drop web app

We use a hybrid license model: the core library is permissively licensed (MIT) so you can use it anywhere, while the CLI and website are copyleft (GPLv3) to keep those tools open source.

Contributing

Data2Image is fully open source! We welcome contributions:

  • 🐛 Bug reports: found a corrupted file? Let us know
  • ✨ Feature requests: encryption? Different formats? Tell us!
  • 🔧 Pull requests: code improvements are always welcome
  • 📖 Documentation: help make the docs better

Check out the Contributing Guide to get started.

Try It Now!

Top comments (0)