utilyfe

Placeholder Image Generator

A dummy image in any size, colour and text, ready to download, copy or paste into your HTML.

Runs entirely in your browser. Nothing you enter is uploaded or stored.

600 × 400 px · PNG

Lato

Made in your browser. The image is drawn on this page and never uploaded. The link in the address bar keeps your settings so you can bookmark or share them; the format, font and sharpness are remembered on this device.

Settings

The image updates as you type

Size

Leave it empty to show the size. Press Enter for a new line. The text shrinks to fit.

Font

Hex, rgb(), hsl() or a colour name. Add alpha to make it see-through, like #00000080.

Format

Sharpness

2× and 3× draw the file bigger, to show at the size above and stay sharp on high-resolution screens.

Also try:Image CompressorPNG to JPG ConverterWebP to JPG Converter

How to use the Placeholder Image Generator

  1. 1Type the width and height, or pick a ready-made size for a screen, a social post or an ad.
  2. 2Change the text, font and colours, or tick Transparent background. The preview updates as you type.
  3. 3Choose the format, and 2× or 3× if the image is for high-resolution screens.
  4. 4Press Download to save the file, Copy image to paste it into a document or design, or Copy HTML for an img tag with the image inside.

What a placeholder image is for

A placeholder stands in for a picture that doesn’t exist yet: the hero photo still being shot, the product images a client hasn’t sent, the ad a campaign will fill later. It’s the right size, so the layout around it behaves exactly as it will with the real picture, and it says its size on it, so anyone looking at the mockup knows what has to go there. Designers drop them into wireframes, developers into templates and tests, and writers into drafts.

Choosing the size

Type the size the real image will be shown at. The ready-made list covers the common ones: screens (HD 1280 × 720, Full HD 1920 × 1080, 4K), social posts (an Instagram post is 1080 × 1080, a link preview 1200 × 630, a YouTube thumbnail 1280 × 720) and the standard ad sizes, like the 300 × 250 medium rectangle and the 728 × 90 leaderboard. The swap button turns a landscape size into a portrait one, and Keep the shape changes the height with the width, so a 16:9 image stays 16:9.

Which format to download

PNG is the safe choice: sharp text, and it can be transparent. JPG suits a placeholder for a photo, where a page or a tool expects one, but it can’t be transparent. WebP is smaller than both and works in every current browser. GIF is for old systems and email tools that want one. SVG is drawing instructions instead of pixels, so it’s tiny and stays sharp at any size, and is the best choice for a web page you control.

Sharp on high-resolution screens

Phones and Retina screens use two or three real pixels for every pixel a web page asks for. A 600 × 400 image shown at 600 × 400 on them is stretched and looks soft. Pick 2× and the file is drawn at 1200 × 800 instead: shown at 600 × 400, it’s sharp. Copy HTML writes the shown size into the tag for you.

Made in your browser

There’s no server behind this page. The preview, the files and the copied code are all made by your browser, so what you type isn’t sent anywhere, and nothing is stored apart from your format, font and sharpness, kept on this device so they’re ready next time.

Questions

How big can the image be?
Anything from 1 px. PNG, JPG, WebP and GIF files can be up to 4000 px on each side, so at 2× you can type up to 2000, since the file is drawn twice as big. SVG goes up to 20,000 px. A bigger number is refused with a message that says so: the tool never quietly shrinks your image to something you didn't ask for.
Can the background be transparent?
Yes. Tick Transparent background, or give a colour an alpha value, like #00000080 for half see-through black. PNG, WebP and SVG keep it exactly. A GIF pixel can only be fully see-through or solid, and a JPG can't be see-through at all, so it's filled with white. The page tells you when either happens.
What do 2× and 3× do?
They draw the file two or three times bigger than the size you type, and name it to match, like placeholder-600x400@2x.png. Shown at 600 × 400 on a phone or a Retina screen, it stays sharp instead of looking soft. Copy HTML writes the size you typed into the img tag, so the image shows at the right size.
Can I paste it straight into my HTML?
Yes. Copy HTML copies an img tag with the image itself inside it, as a data URI, plus its width and height so the page doesn't jump while it loads. An SVG is usually only a few kilobytes. Anything over 250 KB of code is turned down with a message, because a page that heavy is slow: download the file instead.
Is there an image URL, like placehold.co/600x400?
No. Those sites draw each image on their server when the URL is opened, so your page depends on their server being up. Here the image is made in your browser, so there's no server to ask. Copy HTML puts the image inside the tag instead, and Copy link gives a link that opens this page with the same settings.
Which fonts can I use?
Lato (the default), Lora, Montserrat, Noto Sans, Open Sans, Oswald, Playfair Display, Poppins, PT Sans, Raleway, Roboto and Source Sans, all in bold. In an SVG the text is turned into shapes, so it looks the same on any device, even one without the font. The fonts cover Latin letters; other scripts and emoji are drawn with your device's fonts, and an SVG then keeps them as text.
Can the text have more than one line?
Yes, press Enter for a new line. Leave the box empty and the image shows its size, like 600 × 400. The text is made as large as fits in 60% of the width and half the height, and centred.
Is anything uploaded?
No. The image is drawn by your browser on this page, and the files are made there too. Nothing is sent to a server or logged. The link in the address bar holds your settings after a #, a part of the address browsers never send to a website.