FakecreditcardDownload it or inline it
Pick a format for the job. SVG is a few hundred bytes for a simple placeholder and stays sharp at any size. PNG keeps flat colours and text crisp and is the most widely accepted bitmap. WebP works in every current browser and is usually smaller than PNG, also for flat colours. JPG is for tools that insist on it: it has no transparency and can show banding on gradients. For bitmaps, choose @2x or @3x to get a sharp image on high-density screens at the same CSS size; very large images are scaled down to about 16 megapixels, the canvas limit of Safari and many phones.
Copy as gives you the image embedded as a data URI in the code you need: an <img> tag with width and height, Markdown for READMEs and docs, a CSS background-image with the matching aspect-ratio, or a React <img>. The SVG is URL-encoded rather than base64-encoded, so the code stays readable and is usually no larger than base64 would be.
Need a URL like /600x400?
Online placeholder services return an image for a URL such as /600x400. They are convenient until one of them shuts down or changes its URLs, and every mockup that hot-linked it breaks at once; they also add a third-party request to each page view. An inline data URI is a self-contained replacement: copy it once and it works offline, in prototypes, Storybook stories and test fixtures. Two exceptions: many email clients, Gmail included, don’t display data-URI images, so download a PNG for emails; and very large inline images make your HTML heavy, so download big ones as files.
Three meanings of “placeholder image”
- Dummy image during design: a box of the right size that stands in for a photo still to come — what this generator makes.
- Fallback or default image: what users see when content has no picture, such as a product without a photo or a profile without an avatar. Make it neutral, keep the final aspect ratio and give it alt text that says what is missing.
- Loading placeholder: a tiny blurred preview or a solid colour shown while the real image loads, such as
blurDataURLin Next.js. A small solid or gradient SVG from this page works as one.
Common placeholder sizes
| Use | Size (px) | Ratio |
|---|---|---|
| Open Graph / link preview (Facebook, LinkedIn) | 1200 × 630 | ≈ 1.91:1 |
| X (Twitter) large image card | 1200 × 600 | 2:1 |
| Instagram square post | 1080 × 1080 | 1:1 |
| Instagram portrait post | 1080 × 1350 | 4:5 |
| Stories, Reels, TikTok | 1080 × 1920 | 9:16 |
| YouTube thumbnail, HD video | 1280 × 720 | 16:9 |
| Full HD hero or slide | 1920 × 1080 | 16:9 |
| Blog or card image | 600 × 400 / 800 × 600 | 3:2 / 4:3 |
| E-commerce product image | 1000 × 1000 | 1:1 |
| Medium rectangle ad (MPU) | 300 × 250 | 6:5 |
| Leaderboard ad | 728 × 90 | ≈ 8:1 |
| Wide skyscraper ad | 160 × 600 | 4:15 |
| Mobile banner ad | 320 × 50 | 32:5 |
| Avatar / profile picture | 150 × 150 (circle) | 1:1 |
Social networks change their recommended sizes from time to time, so check the platform’s current specification before you produce final artwork.
Placeholders that don’t hurt your layout
- Always set width and height (or CSS
aspect-ratio) on the image. The browser then reserves the space before it loads and the page doesn’t jump — the layout shift that Core Web Vitals measure as CLS. - Use the final aspect ratio, so cropping problems with responsive images and
object-fit: covershow up early. - Keep the dimensions as text in design reviews, so everybody sees which asset size is still missing.
- Give decorative placeholders
alt=""and replace every dummy image before launch: a placeholder in production is a bug.
Perguntas frequentes
What is a placeholder image?
Uma imagem provisória que substitui a imagem definitiva: um bloco com as dimensões e cores adequadas, frequentemente com as medidas escritas, usado em layouts, protótipos e modelos até que as fotos finais fiquem prontas. O termo também é usado para imagens padrão (fallback) quando não há mídia cadastrada ou para prévias desfocadas exibidas durante o carregamento.
What size should a placeholder image be?
O tamanho exato da imagem final ou, no mínimo, a mesma proporção (aspect ratio) — 1200 × 630 para prévias de links, 1080 × 1080 para posts quadrados, 1920 × 1080 para banners de largura total. Usar dimensões fiéis revela falhas de layout e problemas de corte antes da chegada das imagens reais.
Are the placeholder images free to use?
Sim. Elas são geradas diretamente no seu dispositivo com base nas suas próprias configurações, sem nada para licenciar: use livremente em projetos comerciais, templates e trabalhos de clientes sem precisar de atribuição.
Is there a URL I can link to, like /600x400?
Não, e isso é intencional: tudo é gerado diretamente no seu navegador, sem servidores remotos para hotlink. Em vez disso, copie a imagem como tag <img>, Markdown ou CSS — o data URI é autossuficiente e continua funcionando mesmo offline.
Can I make a transparent or round placeholder?
Sim. Marque Fundo transparente para formatos PNG, WebP ou SVG (o JPG não suporta transparência e terá fundo branco) e selecione o formato circular ou com cantos arredondados, com borda opcional, ideal para avatares e cards.
What is the largest size I can create?
Até 4000 × 4000 pixels em @1x. Arquivos PNG e WebP muito grandes podem levar alguns instantes para codificar; já o SVG é gerado instantaneamente em qualquer resolução.