User Rating 0.0
Total Usage 0 times
Configuration
AR: 3:2


0%
Live Preview
600 x 400 • PNG • ~45KB
Is this tool helpful?

Your feedback helps us improve.

About

This tool is a client-side powerhouse for designers and developers who require instant, high-fidelity placeholder assets without relying on external CDNs or bandwidth-heavy requests. By leveraging the browser's Canvas API, it generates pixel-perfect binaries locally, ensuring zero latency and absolute privacy.

Unlike basic generators, this engine handles complex rendering logic including automatic text wrapping, perceptual contrast adjustment, and procedural noise generation. It solves the common pain point of illegible text on dark backgrounds by utilizing the YIQ color space algorithm to dynamically determine the optimal font color. Whether you are wireframing a responsive layout, testing a CMS, or building a prototype, this tool provides the exact dimensions and formats required by modern web standards.

placeholder generator dummy image canvas tools mockup wireframing

Formulas

To ensure text legibility against any background color, the tool calculates the YIQ Contrast Value. This converts the RGB color space into a luma value (brightness) to decide between black or white text.

YIQ = (R × 299) + (G × 587) + (B × 114)1000

If YIQ 128, the background is bright, so the text color (Ctext) is set to black. Otherwise, it is white:

{
Black if YIQ 128White otherwise

Reference Data

StandardNameDimensions (px)Aspect Ratio
IAB StandardMedium Rectangle300 × 2501.2:1
IAB StandardLeaderboard728 × 908.09:1
IAB StandardWide Skyscraper160 × 6001:3.75
IAB StandardLarge Rectangle336 × 2801.2:1
IAB StandardBillboard970 × 2503.88:1
Social MediaInstagram Post1080 × 10801:1
Social MediaInstagram Story1080 × 19209:16
Social MediaTwitter Card (Large)800 × 4181.91:1
Social MediaFacebook Cover820 × 3122.63:1
Social MediaYouTube Thumbnail1280 × 72016:9
VideoSD (480p)640 × 4804:3
VideoHD (720p)1280 × 72016:9
VideoFull HD (1080p)1920 × 108016:9
Video4K UHD3840 × 216016:9
DevicesiPhone SE375 × 6679:16
DevicesiPhone 14 Pro393 × 8521:2.17
DevicesiPad Mini768 × 10243:4

Frequently Asked Questions

The generator includes an algorithmic text wrapper. It measures the width of your custom text against the canvas width (minus padding). If a word exceeds the remaining line width, it pushes the text to a new line automatically, adjusting the vertical centering dynamically.
Yes. Pure colors compress extremely well in PNG and JPEG formats. Adding procedural noise introduces high-frequency pixel variations, which reduces the efficiency of compression algorithms (especially DEFLATE in PNG), resulting in larger file sizes. Use noise sparingly if bandwidth is a concern.
To maintain visual balance, the font size is calculated as a function of the smallest dimension of the image (min(width, height) * 0.15). This ensures the text remains proportional whether you generate a 50px icon or a 4000px billboard.
No. This tool generates images locally in your browser (Data URIs or Blobs). It does not host the image on a server. You must download the file or copy the Base64 string to embed it directly in your HTML.