Home › Developer Tools › Placeholder Image Generator

Placeholder Image Generator

Make dummy images for mockups, wireframes, ad slots and tests. Choose any width and height, background and text colors and label, and download a PNG, JPG, WebP or SVG, copy a data URI, or create a whole set of sizes in one ZIP.

Presets
Placeholder image preview
Format
Bulk sizes: create many placeholders as a ZIP

Uses the colors, text, font and format chosen above. Text with {w} and {h} is filled in for each size.

Advertisement
Advertisement

How to use the Placeholder Image Generator

  1. Enter the width and height in pixels, or click a preset such as 300 × 250 or 1200 × 630.
  2. Pick the colors and label. Leave the text empty to show the dimensions automatically.
  3. Choose the format: PNG for sharp text, JPG or WebP for small files, SVG for the smallest scalable placeholder.
  4. Download the image or copy the data URI or img tag.
  5. Need many sizes? Open Bulk sizes, list them one per line or separated by commas, and download a ZIP.

Common placeholder sizes

UseSize (px)Aspect ratio
Medium rectangle ad300 × 2506:5
Leaderboard ad728 × 908.1:1
Wide skyscraper ad160 × 6004:15
Half-page ad300 × 6001:2
Mobile banner320 × 5032:5
Open Graph / link preview image1200 × 6301.91:1
Square social post1080 × 10801:1
Portrait social post1080 × 13504:5
Stories and vertical video1080 × 19209:16
Video thumbnail1280 × 72016:9
Full HD screen or hero image1920 × 108016:9

PNG, JPG, WebP or SVG?

FormatTypical size at 1200 × 630 (more with cross lines)Choose it when
SVGUnder 1 KBYou embed the placeholder inline or as a data URI, or need it to scale.
PNGAbout 5–70 KBYou need a real bitmap with crisp text, for uploads or design tools.
JPGAbout 15–35 KBA system only accepts JPEG, or you test photo upload flows.
WebPAbout 3–15 KBYou test modern image pipelines. Supported by all current browsers.

Flat-colored placeholders compress extremely well as PNG and WebP. JPG is usually larger here because it is designed for photos, not flat color.

Tips for using placeholders

  • Always set width and height on the final <img> tag too. It reserves the space and prevents layout shift when the real image loads.
  • Use a label that describes the content ("Hero photo", "Product 1") so reviewers know what belongs there. Write {w} and {h} in the label to keep the size visible.
  • Give each placeholder type its own color so wireframes are easier to read.

Frequently asked questions

What is a placeholder image?

A placeholder image is a simple stand-in graphic, usually a solid color with its dimensions written on it, used in mockups, wireframes, templates and tests until the real image is ready. It shows exactly how much space the final image will take.

Which format should I choose?

SVG is the smallest (a few hundred bytes) and scales perfectly, ideal for inline HTML and CSS. PNG keeps text crisp and supports any size. JPG and WebP give smaller files for large photo-sized placeholders. Some upload forms only accept JPG or PNG.

What is a data URI and how do I use it?

A data URI embeds the image itself in text, for example data:image/svg+xml,... or data:image/png;base64,.... You can use it as the src of an img tag or inside CSS url() without hosting a file. Keep data URIs small; SVG placeholders are best for this.

Can I make placeholder images for ad sizes?

Yes. Presets include the common IAB display sizes such as 300 × 250 (medium rectangle), 728 × 90 (leaderboard), 160 × 600 (wide skyscraper), 300 × 600 (half page) and 320 × 50 (mobile banner). Bulk mode creates them all at once.

Is there a size limit?

Each side can be up to 5000 pixels. Very large raster images take more memory, so the tool limits the total to 25 million pixels per image. SVG files stay tiny at any size.

Do I need to link to an external placeholder service?

No. Hot-linking an online placeholder service makes your page depend on someone else's server. Downloading the files or using a data URI keeps your mockups working offline and private.

Related tools

Image ResizerResize images to any size without losing quality.Image to Base64Convert images to Base64 data URIs, CSS backgrounds and HTML img tags in your browser.SVG to PNGConvert SVG graphics to PNG or JPEG at any scale.Lorem Ipsum GeneratorGenerate placeholder text as paragraphs, words or lists, with HTML.JSON FormatterBeautify, minify and validate JSON, with a collapsible tree view.QR Code GeneratorMake QR codes for links, Wi-Fi, email and more.Barcode GeneratorCreate Code 128, EAN-13, UPC-A, EAN-8, Code 39 and ITF-14 barcodes as PNG or SVG.JSON to Excel ConverterTurn JSON into a styled .xlsx spreadsheet; nested arrays become their own linked sheets.Password GeneratorCreate strong passwords and passphrases.UUID GeneratorGenerate UUID v4 and v7 / GUIDs in bulk and copy or download them.Hash GeneratorGenerate MD5, SHA-1, SHA-256 and SHA-512 hashes of text or files.MD5 Hash GeneratorGenerate MD5 hashes of text, lines or files and verify checksums.SHA-256 Hash GeneratorSHA-256 and HMAC-SHA256 hashes of text, lines or files, in hex or Base64.SQL Formatter & BeautifierFormat, beautify or minify SQL queries for MySQL, PostgreSQL and more.JavaScript BeautifierFormat and beautify messy or minified JavaScript, or minify it.HTML FormatterBeautify and indent HTML code with a live preview.CSS FormatterBeautify CSS with indent controls and optional property sorting.Base64 Encoder DecoderEncode or decode Base64 text and files, and make data URIs.URL Encoder DecoderPercent-encode or decode URLs, query strings and form data.HTML Entity Encoder / DecoderEscape and unescape HTML entities, named or numeric.XML FormatterBeautify, validate and minify XML with a collapsible tree view.JSON to CSVConvert JSON data to CSV for spreadsheets.CSV to JSONConvert CSV data to JSON with live preview.Excel to CSVConvert XLSX spreadsheets to CSV.Unzip FilesOpen and extract ZIP files online.RAR & 7z ExtractorOpen RAR, 7z and other archives online and extract files.ZIP File CreatorCompress files and folders into a ZIP.Regex TesterTest and debug regular expressions live.CSV ViewerOpen a CSV or TSV file as a sortable, filterable table.Excel Viewer (XLSX / XLS)Open XLSX, XLS and ODS spreadsheets in your browser without Excel.YAML Validator & FormatterValidate, format and minify YAML, and convert YAML to JSON or back.Bcrypt Hash Generator & CheckerCreate bcrypt password hashes and check a password against a hash.UTM Campaign URL BuilderAdd UTM tracking parameters to links and make a QR code.Schema Markup Generator (JSON-LD)Create JSON-LD structured data for FAQ, Product, Article and more.Htaccess & Nginx Redirect GeneratorBuild 301 redirects for .htaccess, Nginx and Netlify or Cloudflare _redirects.Line Ending ConverterConvert text and files between CRLF, LF and CR line endings.Meta Tag GeneratorCreate SEO, Open Graph and X meta tags with live previews.Robots.txt GeneratorBuild a robots.txt file with rules, sitemap lines and AI-bot blocking presets.Sitemap GeneratorTurn a list of URLs into a valid XML sitemap file.Open Graph PreviewPaste OG tags and preview how links look on Facebook, X and LinkedIn.Markdown to HTMLConvert Markdown to clean HTML with a live editor.XML to JSONConvert XML to JSON with validation.Binary TranslatorConvert text to binary, hex, octal and back.Email ValidatorCheck email lists and spot disposable addresses.Website Down CheckerCheck if a website is down for everyone.Fake Data GeneratorGenerate mock data as JSON, CSV or SQL.File Info ViewerCheck file size, type, date and MD5/SHA hashes.Text Encoding ConverterDetect and convert text file encodings like UTF-8, UTF-16 and Latin-1.Deep Link GeneratorCreate links that open directly in apps.JSON ViewerExplore JSON as a collapsible tree, search keys and values and copy any node's path.HTML MinifierMinify HTML: strip comments and whitespace safely and see how many bytes you save.HMAC GeneratorGenerate and verify HMAC signatures with SHA-256, SHA-512, SHA-1 or MD5.URL ParserBreak a URL into its parts and edit query string parameters with a live rebuild.SQLite ViewerOpen .db and .sqlite files in your browser, browse tables and run SQL queries.CSS MinifierMinify CSS with csso or a built-in engine and see the size saved instantly.CRC32 Checksum CalculatorCalculate CRC-32, CRC-32C, CRC-16 and Adler-32 checksums of text or large files.User Agent ParserSee your user agent and parse any UA string into browser, OS, engine and device.YouTube Embed Code GeneratorCreate responsive YouTube embed code with start time, autoplay, loop and privacy mode.DOCX ViewerOpen and read Word .docx files in your browser, then print or save them as HTML.JavaScript MinifierMinify JavaScript with Terser: compress, mangle and see how many bytes you save.JWT DecoderDecode JSON Web Tokens, read the claims and expiry, and verify HS256 signatures.EPUB ReaderOpen and read EPUB e-books in your browser with pages, a table of contents and font controls.JSON MinifierMinify and validate JSON, sort keys and see exactly how many bytes you save.JWT GeneratorCreate and sign HS256, HS384 or HS512 JSON Web Tokens in your browser and verify them.What Is My BrowserSee your browser, version, OS, engine, screen and which web features it supports.Font ViewerPreview TTF, OTF, WOFF and WOFF2 fonts with sample text, waterfall, glyphs and metadata.Markdown EditorWrite Markdown with a toolbar, live split preview, autosave and .md or HTML export.Random String GeneratorGenerate secure random strings and tokens in bulk with any length and character set.HTTP Status CodesSearch every HTTP status code with plain-English meanings, causes, fixes and RFC references.TTF to WOFF2 ConverterConvert TTF and OTF fonts to WOFF2 or WOFF and get a ready @font-face CSS snippet.Code Diff CheckerCompare two code files side by side or unified, with syntax colors and changes highlighted.API Key GeneratorCreate secure API keys and secrets with prefixes, checksums and SHA-256 hashes for storage.MIME Type LookupFind the MIME type for any file extension, or the extensions for a MIME type, in 400+ entries.Cron Expression GeneratorBuild crontab schedules visually, read them in plain English and see the next run times.Password Strength CheckerSee how strong a password really is, how long it takes to crack and how to improve it.Subnet CalculatorCalculate IPv4 network, broadcast, host range, masks and host count, and split subnets.SERP Snippet PreviewPreview your title tag and meta description with pixel-accurate truncation on desktop and mobile.Regex Cheat Sheet75+ ready-to-use regex patterns for emails, URLs, IPs and dates, each with a live test box.Caesar CipherEncode and decode Caesar shift ciphers and crack unknown shifts with a ranked brute force.IPv6 Expander & CompressorExpand IPv6 addresses to full form or compress them per RFC 5952, one or many at once.GraphQL FormatterPretty-print and indent GraphQL queries, mutations and schemas, or minify them, instantly.Vigenère CipherEncrypt and decrypt Vigenère and Autokey ciphers, and crack unknown keys with frequency analysis.Chmod CalculatorConvert Linux file permissions between checkboxes, octal (755) and symbolic (rwxr-xr-x) notation.JSON to TypeScriptGenerate TypeScript interfaces or types from JSON, with nested types and optional fields.Morse Code TranslatorTranslate text to Morse code and back, then play it as sound or a blinking light, or save a WAV.HTML Table GeneratorBuild HTML tables in an editable grid with styles, header rows, CSV import and live preview.Atbash CipherEncode and decode Atbash ciphers (A↔Z, B↔Y) in Latin or Hebrew, with a live letter mapping table.CSS Box Shadow GeneratorDesign layered CSS box shadows with a live preview, presets and one-click Copy CSS.Bulk URL OpenerOpen a list of URLs in new tabs at once or in batches, with cleanup, dedupe and delay.Hex to Text ConverterConvert hex to text and text to hex with UTF-8 support and space, 0x, \x or comma formats.CSS Border Radius GeneratorRound each corner, draw elliptical 8-value radii or random blob shapes and copy the CSS.Hreflang Tag GeneratorCreate hreflang tags, sitemap entries and Link headers for every language and region, validated.ASCII TableFull ASCII code chart 0–255 in decimal, hex, octal, binary and HTML, with search and copy.CSS Button GeneratorDesign CSS buttons with gradients, borders, shadows and hover and active states, then copy the code.Canonical Tag GeneratorNormalize URLs and create rel=canonical tags and HTTP headers, for one page or a whole list.Unicode Character LookupFind Unicode characters by name or code point and copy them with UTF-8, HTML and code escapes.CSS Flexbox GeneratorBuild flexbox layouts visually: set container and item properties, then copy the CSS and HTML.Twitter Card GeneratorCreate X / Twitter Card meta tags with Open Graph fallbacks, character counters and a live preview.Punycode ConverterConvert international domain names, emails and URLs between Unicode and xn-- Punycode, in bulk.CSS Grid GeneratorDraw CSS grid layouts: set tracks and gaps, drag to name areas, then copy the CSS and HTML.PX to REM ConverterConvert px to rem or em and back, with a 1-100px table and a whole-CSS converter.JSON to XML ConverterConvert JSON to well-formed XML with attributes, arrays and pretty print.JSON to YAML ConverterConvert JSON to clean YAML as you type, with indent, quoting and sort options.YAML to JSON ConverterConvert YAML to pretty or minified JSON, with errors pinned to the exact line.HTML to Markdown ConverterTurn HTML or pasted rich text into clean Markdown with tables and live preview.Markdown Table GeneratorBuild Markdown tables in a grid or paste from Excel/CSV, with alignment and preview.JSON ValidatorCheck JSON with the exact line and column of each error, fix tips and one-click auto-fix.JSON Escape / UnescapeEscape text for a JSON string, unescape \n and \" back to text, or stringify a whole object.URL Slug GeneratorTurn titles into clean, SEO-friendly URL slugs: accents, stop words, separators and bulk lines.JavaScript Keycode FinderPress any key to see its JavaScript key, code, keyCode, which, location and modifiers.Glassmorphism CSS GeneratorDesign frosted-glass UI cards with blur, transparency and border sliders, then copy the CSS.CSS Text Shadow GeneratorLayer CSS text shadows with a live preview and neon, 3D, outline and retro presets.Base64 to ImagePaste a Base64 string or data URI to preview, identify and download the image.DNS LookupLook up A, AAAA, MX, TXT, NS, CNAME, SOA and CAA records with TTLs over secure DNS.HTML Editor (Live Preview)Write HTML, CSS and JavaScript and see a live, sandboxed preview as you type.QR Code ScannerScan QR codes with your camera or from an image and safely read the link or text.JSON CompareCompare two JSON documents and see every added, removed and changed path.Hex to DecimalConvert hex to decimal instantly with steps and signed mode.Decimal to HexConvert decimal to hex instantly with steps and signed mode.Binary to DecimalConvert binary to decimal instantly with steps and signed mode.Decimal to BinaryConvert decimal to binary instantly with steps and signed mode.Binary to HexConvert binary to hex instantly with steps and signed mode.Hex to BinaryConvert hex to binary instantly with steps and signed mode.Binary CalculatorAdd, subtract, multiply, divide, AND, OR, XOR and shift binary numbers with decimal values.Hex CalculatorHexadecimal + − × ÷ and AND, OR, XOR, NOT, shifts with decimal and binary equivalents.Two's Complement CalculatorDecimal to two's complement binary and back for 4-64 bits, with invert-and-add-1 steps.RAID CalculatorUsable capacity, efficiency and fault tolerance for RAID 0, 1, 5, 6, 10, 50 and 60 arrays.XML to CSV ConverterConvert XML to CSV: detects repeating records, flattens nested data, pick your columns.CSV to XML ConverterConvert CSV to well-formed XML with custom root and row names, escaping and pretty print.TOML to JSON ConverterConvert TOML to JSON and JSON to TOML with a full v1.0 parser and clear error lines.JSON to Go StructTurn JSON into Go structs with inferred types, nested structs and json tags.JSON to Python ClassGenerate Python dataclasses, Pydantic models or TypedDicts with type hints from JSON.JSON to C# ClassConvert JSON to C# classes or records with System.Text.Json or Newtonsoft attributes.JSON Schema GeneratorTurn sample JSON into a draft 2020-12 JSON Schema with types, required fields and formats.JSONPath TesterTest JSONPath expressions live: filters, slices, wildcards and recursive search, with matches highlighted.JSON SorterSort JSON keys A-Z recursively, sort arrays by value or by a key, then pretty-print or minify.JSON to HTML TableConvert a JSON array of objects into clean HTML table code with CSS styles and a live preview.CSV to SQL ConverterConvert CSV to SQL CREATE TABLE and INSERT statements for MySQL, PostgreSQL, SQLite or SQL Server.HTML to JSX ConverterConvert HTML to valid React JSX: className, htmlFor, style objects, self-closing tags and events.CSS Clip-Path GeneratorDraw CSS clip-path shapes by dragging points: polygons, circle, ellipse and inset. Copy the CSS.CSS Animation GeneratorCreate CSS keyframe animations from 23 presets with live preview, timing controls and Copy CSS.CSS Triangle GeneratorMake CSS triangles in 8 directions with the border trick or clip-path. Set size and color, copy CSS.CSS Loader GeneratorPick from 14 pure CSS spinners and loaders, set color, size and speed, then copy the HTML and CSS.Cubic Bezier GeneratorDrag the control points to design a CSS easing curve, compare it with linear and copy cubic-bezier().CSS Filter GeneratorAdjust blur, brightness, contrast, hue, sepia and drop-shadow on an image and copy the CSS filter.CSS Specificity CalculatorCalculate CSS selector specificity (a, b, c), including :is(), :not(), :has() and :where(), and compare.Gitignore GeneratorBuild a .gitignore from 50+ templates for languages, frameworks, IDEs and OS, merged and deduped.License GeneratorCreate a LICENSE file for MIT, Apache, GPL, BSD, ISC, MPL or Unlicense with your name and year.ULID GeneratorGenerate sortable ULIDs and UUID v7 in bulk, monotonic option, and decode their timestamps.IPv4 to IPv6 ConverterConvert IPv4 to IPv4-mapped, 6to4 and NAT64 IPv6, extract IPv4 from IPv6, and get int/hex/binary.cURL to Code ConverterConvert curl commands to JavaScript fetch, Axios, Python requests, Node.js, PHP and Go code.Base32 Encoder / DecoderEncode and decode Base32 (RFC 4648), Base32hex, Crockford and z-base-32 from text, hex or files.Base58 Encoder / DecoderEncode and decode Base58 and Base58Check (Bitcoin alphabet) from text or hex, with checksum verification.Unicode Escape / UnescapeConvert text to \uXXXX, \u{...}, \x, &#...; or CSS escapes and decode them back.File Hash CheckerGet MD5, SHA-1, SHA-256 and SHA-512 checksums of files and verify them against a hash.TOTP GeneratorGenerate 2FA one-time codes from a secret key, create otpauth QR codes and verify codes.RSA Key GeneratorGenerate 2048, 3072 or 4096-bit RSA key pairs as PEM, PKCS#1, JWK or OpenSSH, locally.SSL Certificate DecoderDecode PEM SSL/X.509 certificates: subject, issuer, expiry, SANs, key and fingerprints.Text Encryption ToolEncrypt and decrypt text with a password using AES-256-GCM, entirely in your browser.Htpasswd GeneratorCreate .htpasswd entries with bcrypt, APR1-MD5 or SHA-1 for Apache and Nginx basic auth.Code to ImageTurn code into a beautiful syntax-highlighted PNG with themes, window frame and background.Mermaid Diagram EditorWrite Mermaid code and see flowcharts, sequence, Gantt and ER diagrams live. Export SVG or PNG.API Request TesterSend GET, POST, PUT and DELETE requests with headers and a body, then inspect the response.WebSocket TesterConnect to a ws:// or wss:// server, send messages and watch a timestamped live log.WHOIS LookupLook up who registered a domain or IP: registrar, creation and expiry dates, name servers, status.Mailto Link GeneratorBuild encoded mailto: links with cc, bcc, subject and body, plus HTML code and a QR code.WhatsApp Link GeneratorCreate wa.me click-to-chat links with a pre-filled message, button HTML and a QR code.Google Maps Embed GeneratorTurn an address or coordinates into responsive Google Maps iframe embed code, no API key.Neumorphism CSS GeneratorDesign soft UI neumorphic shapes with live preview and copy the box-shadow CSS.SVG Wave GeneratorMake layered SVG waves for section dividers and export SVG, PNG or a CSS background.SVG Blob GeneratorGenerate random organic SVG blob shapes with gradients and export SVG, PNG or CSS clip-path.Excel to JSON ConverterConvert Excel sheets (XLSX, XLS, ODS) to JSON with header row, type and shape options.CSV to Excel ConverterConvert CSV files to a real .xlsx workbook with typed numbers and dates, one sheet per file.CSV SplitterSplit a large CSV into smaller files by row count, file count or column value, header kept.CSV MergerCombine many CSV files into one, matching columns by name, with dedupe and a source column.VCF to CSV ConverterConvert vCard (.vcf) contacts to CSV for Google or Outlook, or turn a CSV back into a VCF.Calendar Event (.ics) GeneratorCreate an .ics calendar invite with time zone, reminders and repeats + Google/Outlook links.Octal to DecimalConvert octal to decimal instantly with steps and signed mode.Decimal to OctalConvert decimal to octal instantly with steps and signed mode.Binary to OctalConvert binary to octal instantly with steps and signed mode.Octal to BinaryConvert octal to binary instantly with steps and signed mode.Hex to OctalConvert hex to octal instantly with steps and signed mode.