Generate placeholder images
Solid-color PNG placeholders with size labels, drawn locally via Canvas. Pick any size up to 4096×4096, customize colors and the label, then download or copy as a data URL.
How to make a placeholder
The canvas draws a solid rectangle and centers a text label sized to ~12% of the shorter edge. PNG export and data URL both work without any network call.
- 01
Pick a size
Type any width/height up to 4096, or use a quick preset.
Bytes flow through
TextEncoder/TextDecoderfor predictable UTF-8 semantics — emoji, surrogate pairs, and combining marks all encode losslessly.sizeUTF-8TextEncoderlosslesslivesize · raw bytes800×400 · UTF-8800 × 400 px
loaded · UTF-8MIME · ready - 02
Tune colors
Pick background and text color with the native color pickers.
Hash and signature operations call
crypto.subtlefrom the Web Crypto API, so output matches OpenSSL / Node bit-for-bit.colorWeb Cryptosubtledeterministiclivefg/bg · optionscolor · livebg #1f2937
options applied · livelive - 03
Custom label
Leave blank for "W × H" or type your own caption.
Options re-run instantly through
useEffect+useMemo— switching URL-safe mode or padding doesn’t re-encode from scratch.labelmemoisedoptionsinstantreactivelabel · encodedtext · readyHero @ 1200×630
encoded · livelossless - 04
Download or copy
PNG export or a base64 data URL — both 100% local.
Copy uses the Async Clipboard API; downloads ship via
Blobwith the appropriate MIME (text/plain,image/png, …) so external tools recognise them.exportclipboardblobMIME-correctclient-sideok · copiedready · doneDownloaded
shipped · ready to shipsuccess
Encoding without surprises
Always UTF-8 first
Use TextEncoder / TextDecoder for bytes ↔ string conversion. btoa alone breaks on non-ASCII.
URL-safe vs standard Base64
Standard uses +, /, =; URL-safe swaps to -, _, no padding. Don’t mix them.
Hashes aren’t passwords
SHA-256 is fast; that’s good for fingerprints, bad for passwords. Use bcrypt / argon2 for credentials.
Watch padding rules
Some decoders are strict about = padding, others auto-pad. If round-trips fail at exactly 1 or 2 bytes, check padding.
Use Web Crypto for keys
Generate cryptographic keys via crypto.subtle, never Math.random. The latter is predictable.
JWT decode ≠ verify
Decoding a JWT just splits and base64-decodes. Verification needs the issuer’s public key / shared secret.
When to drop a placeholder
Design comps, layout drafts, demos.
Design comps
Hero placeholders without dipping into stock photos. Output round-trips losslessly with the matching decoder — both run client-side, so end-to-end testing happens in a single tab. Encoding flows through TextEncoder for predictable UTF-8 semantics.
RFC-compliantLayout testing
Verify responsive behavior at known aspect ratios. Web Crypto's subtle.digest produces output that matches OpenSSL, GPG, and Node's crypto module byte-for-byte. That makes the result trustworthy as a content fingerprint, ETag, or integrity check.
OpenSSL-matchedOG / social images
Quick 1200×630 placeholder while final art is in progress. Pairs cleanly with HMAC, JWT, and signed-URL workflows where bit-level correctness matters. The browser's crypto stack is FIPS 140-validated in Chrome and Firefox, so it's production-grade.
losslessApp stubs
Card thumbnails for prototypes and demos. Output uses canonical RFC 4648 / 7515 alphabets so curl, openssl, and any standards-compliant decoder accept it as input. URL-safe variants drop padding for tokens that travel in query strings.
byte-identicalImage loaders
Generate blur-up base colors matched to your design. Heavy hashing runs through useMemo so large inputs don't block typing. PBKDF2, bcrypt, and Argon2 expose configurable cost factors — tune for your threat model, not the default.
spec-gradeStorybook fixtures
Predictable dummy images for component states. Same input plus same options always yields identical bytes. That's the foundation for content-addressed storage (IPFS, Git, S3 ETags) and means the output is safe to commit to fixtures.
production-readyFrequently asked questions
Something missing?
Tell us what you need. We ship the top requests every two weeks.