Q3Private by design. Your placeholder is generated locally in your browser. Nothing is uploaded, Q3 Labs does not store your images or text, and no account is needed.
Whole numbers from 10 to 4,096 px.
Long text is wrapped and shrunk to fit. If it still can't fit, it ends with an ellipsis (…).
Only the text is drawn; the background is left see-through. The preview shows a checkerboard behind transparent areas.
Preview
1,200 × 630 px
- Dimensions
- 1,200 × 630 px
- Aspect ratio
- 40:21 (1.90:1)
- Pixel count
- 756,000
Saves as placeholder-1200x630.png
HTML snippet
<img src="placeholder-1200x630.png" width="1200" height="630" alt="Placeholder image" />The snippet points to the file you download, saved wherever you host it. Q3 Labs does not host your image, so there is no public image link. The settings link only stores your settings (size, colors, text, format), never the image itself.
What is a placeholder image?
A placeholder image is a temporary picture that fills an image slot until the real one is ready. It reserves the space, shows the intended proportions, and often displays its own dimensions or a short label, so everyone reviewing a design can see what will go where.
It is deliberately plain: usually a flat color with text. That keeps attention on the layout, keeps the file tiny, and makes it obvious that it is not final content.
How to create a placeholder image
- Set the size. Type a width and height in pixels, or start from a common size. The aspect ratio and pixel count update as you go.
- Add text. Write a label such as "Blog Image" or "Product Image", or leave the field empty to show the dimensions.
- Pick colors. Choose a background and text color with the pickers, hex codes or one of the ready-made pairs.
- Choose a format. PNG, JPEG or WebP, with a quality slider for JPEG and WebP, and an optional transparent background for PNG and WebP.
- Download. Save the file, or copy an HTML snippet or the image details.
Common placeholder image sizes
There is no single right size. Choose dimensions that match the slot you are designing for. These are commonly used sizes, not requirements:
| Size (px) | Aspect ratio | Commonly used for |
|---|---|---|
| 300 × 250 | 6:5 | A frequently used display-ad size, often called the medium rectangle. |
| 728 × 90 | 364:45 | A wide, short banner, often called a leaderboard. |
| 970 × 250 | 97:25 | A large desktop banner, often called a billboard. |
| 320 × 100 | 16:5 | A common mobile banner size. |
| 1200 × 630 | 40:21 (about 1.9:1) | A widely used size for link-preview (Open Graph) and blog featured images. |
| 1200 × 628 | 300:157 (about 1.91:1) | A near-identical variant that is also commonly used for link images. |
| 1080 × 1080 | 1:1 | A square image, common for social posts and product grids. |
| 1080 × 1350 | 4:5 | A portrait image, common for social feed posts. |
| 1080 × 1920 | 9:16 | A full-screen vertical image, common for stories-style layouts. |
| 1920 × 1080 | 16:9 | Full HD widescreen: hero banners, slides and video thumbnails. |
Platforms and ad networks change their recommendations over time, so confirm the current size on the platform itself before producing final artwork. To find the size of an image you already have, use the Image Size Finder.
Where placeholder images are used
Web development
Developers use placeholders to build and test layouts (grids, cards, carousels, lazy loading) before content exists, and to check that images of different shapes don't break the design.
UI/UX design
In wireframes and prototypes, a labelled placeholder communicates the size and proportion of an image slot without distracting reviewers with unfinished artwork.
Blogs and content sites
Featured-image placeholders let editors draft posts and set up templates ahead of illustration, and show how a card will look in an archive or a shared link.
eCommerce
Product listings need every image slot to look consistent. Placeholders help you design category grids, and can stand in temporarily for products awaiting photography.
During a website build
Client reviews often happen before final images arrive. Placeholders keep proportions accurate so approving a layout means the finished page won't shift when real images are dropped in.
Testing and documentation
Test suites, screenshots, tutorials and bug reports all benefit from a predictable image of a known size, generated on demand.
Placeholder images vs real images
Placeholders are a working tool, not a finished asset. They let you make layout decisions early, but they say nothing about your product, service or brand. Real images do the persuading, and search engines and screen-reader users rely on relevant images with meaningful alt text to understand a page.
- Use placeholders while designing, building and reviewing.
- Swap in real images, at the same dimensions, before publishing.
- Once you have real images, shrink them with the Image Compressor and check what they contain with the Image Metadata Viewer.
PNG vs JPEG vs WebP
| Format | Transparency | Compression | Good for |
|---|---|---|---|
| PNG | Yes | Lossless | Flat colors and crisp text, which is ideal for most placeholders. |
| JPEG | No | Lossy (adjustable quality) | Maximum compatibility, when you don't need transparency. |
| WebP | Yes | Lossy (adjustable quality) | Small files on modern browsers, with transparency if needed. |
For a flat-color placeholder, the file size differences are usually tiny. Pick the format that matches where you will use the image.
How to choose placeholder dimensions
Match the placeholder to the real image as closely as you can. Use the aspect ratio first (16:9, 4:3, 1:1 and so on), because that decides how the layout behaves. Then choose pixel dimensions at least as large as the space the image occupies. For sharp results on high-density screens, real images are usually supplied larger than their displayed size.
For fixed slots, such as ad units and cards with set dimensions, use the exact size you have been given. For flexible layouts, pick a ratio and let the image scale. If you're building or redesigning a site, our web design and UX team and web development services can help plan image sizes, performance and layout together.
Private, in-browser generation
The placeholder is drawn with your browser's built-in canvas and saved directly to your device. There is no upload, no server-side image generation and no external image service. Q3 Labs doesn't receive or store your image or your text. Because nothing is hosted, this tool doesn't give you a public image URL. You download the file and host it wherever you need it.
Text is drawn using your device's own fonts, so the exact letterforms can differ slightly between computers and phones.
Frequently Asked Questions
Explore more
Measure any image with the Image Size Finder, shrink the final files with the Image Compressor, and see what a photo really contains with the Image Metadata Viewer. Turn a logo into site icons with the Favicon Generator, preview your share image with the Open Graph Preview, or create a QR code. Browse all our free tools.
Related tools & resources
Related tools
- Case ConverterConvert text to uppercase, lowercase, title case, camelCase, snake_case and more. Nothing leaves your browser.
- Image Size FinderCheck an image's width, height, aspect ratio and file size in your browser. Nothing is uploaded.
- URL Encoder & DecoderPercent-encode or decode URLs and URI components, with encodeURI and encodeURIComponent modes. Nothing is upl…
Learn more
- Web Development GuidesPlatform choice, launch sequencing, and the technical fundamentals every website needs before it goes live.
- Web DevelopmentSlow, hard-to-maintain websites quietly cap growth by hurting Core Web Vitals, SEO, and conversion rate.
Related articles
- How Much Does a Business Website CostA business website costs anywhere from $500 to $50,000, and most small businesses land between $3,000 and $15…
- How to Create a Website in 2026: AI Builders vs. WordPress vs. Custom CodeAI website builders, a WordPress website build, or fully custom code: the fastest route to a genuinely high-p…