Staaarter

PNG to Bytes Converter

Reads an uploaded PNG file's raw bytes, verifies its 8-byte PNG file signature, and outputs every byte as a plain comma-separated decimal number list - handy for pasting into source code, documentation, or a byte-level comparison. A free online tool from Staaarter, right in your browser.

Runs locallyUpdated 2026-07-26
By Staaarter Team
converterimagepng

Overview

Introduction

This tool reads a PNG file's raw bytes and lists every one as a plain decimal number, entirely in your browser.

It's a simple, readable alternative to a hex editor or Base64 encoding when you need to inspect or copy a file's exact byte values.

What Is PNG to Bytes Converter?

A client-side PNG-to-byte-list converter that reads an uploaded file's raw bytes, confirms it starts with a valid PNG signature, and joins every byte's decimal value with a comma and space.

Unlike the pixel-level converters in this category, this tool works on the file's literal bytes (headers, compressed chunk data, everything), not decoded pixel colors.

How PNG to Bytes Converter Works

The uploaded file's bytes are read directly (no canvas decoding involved) and checked against PNG's fixed 8-byte file signature before anything else happens.

Once validated, every byte in the file is converted to its decimal string representation and joined into one comma-separated line of text.

When To Use PNG to Bytes Converter

Use it when you need to inspect, document, or paste a small PNG's exact byte contents somewhere that expects plain numbers rather than Base64 or hex.

It's also useful for quickly generating a byte-array literal for embedding a small PNG directly in source code.

Features

Advantages

  • Runs entirely client-side; your file never leaves the browser.
  • Produces plain, human-readable decimal numbers rather than a compact but opaque encoding.
  • Validates the PNG signature up front, catching accidentally-uploaded non-PNG files immediately.

Limitations

  • Output size grows roughly 3-4x the original file size as text, so this isn't practical for large PNGs.
  • Unlike Base64, this format isn't compact enough for embedding in URLs or transport-oriented contexts.

Examples

Convert a minimal PNG signature

Input

An 8-byte file containing exactly the PNG signature

Output

"137, 80, 78, 71, 13, 10, 26, 10"

Each of the 8 signature bytes is listed in decimal, comma-separated.

Reject a non-PNG file

Input

A 4-byte file that isn't a PNG

Output

An error: "This file doesn't start with a valid PNG signature."

The signature check runs before any byte listing happens.

Best Practices & Notes

Best Practices

  • Use this on small files (icons, tiny sprites) where a readable byte list is practical; for larger files, Base64 is more compact.
  • Pair with the matching Bytes to PNG converter to verify a round trip reproduces the exact same file.

Developer Notes

The pure conversion logic mirrors the existing PNG to Base64 converter's structure - the same PNG signature check, but joining decimal byte values with Array.from(bytes).join(', ') instead of base64-encoding them.

PNG to Bytes Converter Use Cases

  • Embedding a tiny PNG's exact bytes directly in source code
  • Documenting or diffing a small PNG file's byte contents
  • Teaching or debugging PNG file structure at the byte level

Common Mistakes

  • Using this on a large PNG and getting an unwieldy amount of text - Base64 or direct binary handling is more practical at scale.
  • Forgetting that this reads the file's raw bytes, not decoded pixel colors - it won't match a pixel-level RGB/RGBA byte dump.

Tips

  • Combine with the Bytes to PNG converter to test round-tripping a file exactly.
  • If you need a more compact text representation, use the PNG to Base64 converter instead.

References

Frequently Asked Questions