Trình tạo ảnh giữ chỗ

Generate a Placeholder Image in Seconds

This placeholder image generator builds custom dummy images for mockups, wireframes, prototypes and front-end development — entirely in your browser. Set the width and height, choose a background and text color, add an optional label, and you have a clean placeholder ready to download or paste straight into your code.

Unlike hosted services that render images on a server (placehold.co, dummyimage.com, via.placeholder.com), every image here is generated locally with SVG and the HTML Canvas API. That makes it instant, private, free, and able to keep working offline — no requests, no rate limits, and nothing is ever uploaded to any server.

Step-by-Step: How to Create a Custom Placeholder Image

Creating a placeholder takes under 10 seconds: 1) Type your width and height in pixels, or select a size preset (1200×630 for OG images, 1080×1080 for Instagram, 1280×720 for video thumbnails, 256×256 for avatars). 2) Pick your background color using the color picker, or select a palette preset like "Gray" for the classic placeholder look. 3) Optionally add custom text — if left blank, the image automatically shows its own dimensions. 4) Choose your export format: SVG for web use (smallest, sharpest), PNG for raster with transparency, JPG or WebP for photo-compatible formats. 5) Click Download to save the file, or switch to the Code tab to copy a data URI, an <img> tag, or CSS background rule ready to paste into your project.

SVG, PNG, JPG or WebP — Choosing the Right Format

For a flat color box with a label, SVG is usually the right pick: it's only a few hundred bytes, stays sharp at any resolution, and embeds cleanly as a data URI. It's the default here, and a step up from the PNG-only output of most placeholder tools. SVG data URIs also work in every modern browser and email client.

Need a raster file instead? Export PNG (with full transparency support), JPG for the most broadly compatible format, or WebP for the smallest raster file size. Whatever you choose, the live preview shows exactly what you'll get before you save it — no surprises when you open the file.

Why This Beats placehold.co and Other Hosted Services

Services like placehold.co, dummyimage.com, and via.placeholder.com hand you a URL that hotlinks their server. This creates dependencies: if their service goes down, is rate-limited, or gets blocked by a Content Security Policy, your mockup breaks. They also track which pages request their images, raising privacy concerns for internal prototypes.

This tool gives you something more portable: a self-contained data URI you can drop into an <img src> or CSS url(), the raw SVG markup, a ready-to-paste <img> snippet with matching dimensions, or a CSS background rule. Because the image is embedded, there's no extra file to upload, no broken hotlink if a service goes down, and no third-party usage tracking. Copy, paste, done.

Presets for Social Media, Ads, Avatars and Thumbnails

Building a layout that needs many image slots? The preset sizes cover the formats you reach for most — social and OG images (1200×630), ad units (728×90, 300×250), square posts (1080×1080), stories (1080×1920), banners, product shots, book covers, and video thumbnails (1280×720). Sizing a placeholder to match the real slot keeps your layout stable and prevents the cumulative layout shift (CLS) that hurts Core Web Vitals scores.

Aspect ratio presets (1:1, 4:3, 16:9, 9:16, and more) with an optional aspect lock let you maintain proportions as you scale. Turn on the lock, change one dimension, and the other adjusts automatically — perfect for designing responsive image grids where every card must maintain the same ratio regardless of container width.

Private, Instant and Free — Works on All Devices

There's no account, no watermark, and no limit on how many images you create. Every placeholder is generated on your own device, so it's a fast, privacy-friendly tool for designers and developers working with confidential designs or internal mockups. Works on Windows, Mac, Linux, iPhone, iPad, and Android — open it in any modern browser and start generating immediately.

The tool even works offline once the page has loaded. Bookmark it and generate a perfectly sized placeholder image the moment a mockup needs one — no searching for a placeholder service URL, no worrying about rate limits, and no account to log into. Your designs stay yours.

Standard Image Dimensions Every Web Designer Should Know

Matching your placeholder to a real-world dimension removes guesswork when the final asset arrives. Hero banners are typically 1920×1080 px (full-HD, 16:9) or 1440×600 px (a shorter cinematic crop common in marketing sites). Open Graph share images — the preview card that unfurls when a URL is shared on Twitter/X, Facebook, and LinkedIn — must be at least 1200×630 px; anything smaller gets replaced by the platform's generic icon. Blog post featured images follow the same 16:9 shape at 1200×675 px, which scales cleanly from desktop cards to mobile full-width.

Thumbnails default to the classic 4:3 ratio at 400×300 px or the now-standard video ratio at 320×180 px (16:9). Avatar and profile images are almost always displayed as circles but stored square — 400×400 px is the safe minimum before platforms like Twitter/X or LinkedIn compress the detail away. Product images for e-commerce are square by convention, with 800×800 px giving enough resolution for zoom functionality without enormous file sizes. E-mail headers run narrow and shallow: 600 px wide (the maximum most e-mail clients render) and 200–300 px tall. For mobile-first designs, 390×844 px matches the iPhone 15 logical canvas and 393×873 px matches the iPhone 16, giving you a true full-screen placeholder for native-feeling web-app mockups.

Knowing these numbers means you can prototype at real scale from day one. A 1200×630 OG placeholder in your meta tag lets you verify the share-card layout in a browser preview tool before photography is complete. A 400×400 avatar in a comment thread shows exactly how much face a circle crop will reveal at its rendered 40 px diameter. Getting the sizes right at the placeholder stage is the cheapest way to catch layout problems before production assets exist.

Aspect Ratios, CSS aspect-ratio, and Cumulative Layout Shift

An aspect ratio is the proportional relationship between an image's width and height, expressed as width:height — for example 16:9 (widescreen video and most desktop heroes), 4:3 (classic television and many card thumbnails), 1:1 (square: Instagram posts, product tiles, avatars), or 2:3 (portrait: Pinterest pins, book covers, mobile-first stories). Ratios matter more than absolute pixel dimensions for layout, because a CSS grid of 16:9 cards stays visually consistent whether each card is 320 px or 800 px wide.

The CSS aspect-ratio property — introduced in 2021 and now universally supported across Chrome, Safari, Firefox, and Edge — lets a browser reserve the correct vertical space for an image before the file has downloaded. Writing img { aspect-ratio: 16 / 9; width: 100%; } causes the browser to paint a 16:9 box immediately, so the surrounding content is never pushed down when the image arrives. Without it, the browser sees zero height until the image loads, then suddenly shifts everything below — this is the Cumulative Layout Shift (CLS) problem, one of Google's three Core Web Vitals. A CLS score above 0.1 is penalised in search rankings, making aspect-ratio a SEO concern as much as a design one.

This is also why placeholder images with explicit width and height attributes matter: <img width="1200" height="630"> gives the browser the ratio it needs to reserve space before any CSS or JavaScript loads. Modern browsers calculate the intrinsic aspect ratio from those attributes and apply it immediately — a behaviour standardised in HTML5 and now the recommended practice in Google's web performance guidelines. When you copy an <img> tag from this tool, the matching width and height are already included, so the slot never shifts when real content loads in.

SVG Placeholders, Data URIs, and the Shimmer Skeleton Pattern

An SVG placeholder is nothing more than a <rect> element filled with a colour, wrapped in an <svg> tag with matching width and height. At its simplest, the entire file is under 200 bytes — far smaller than even a 1×1 GIF. Because SVG is an XML text format, it scales to any display resolution without blurring, making it the sharpest possible placeholder at any screen density including 3× Retina displays. SVG also supports CSS classes and custom properties, so the same placeholder can switch between a light-mode grey and a dark-mode slate with a single CSS rule and no extra download.

A data URI encodes the image directly inside the attribute value, removing the need for a separate HTTP request entirely. The pattern src="data:image/svg+xml,%3Csvg…%3E" (URL-encoded) or the base64 variant embed the file inline in your HTML or CSS. This is ideal for critical above-the-fold placeholders: the browser paints them during the initial HTML parse, before any external resource has been fetched, so there is zero flash-of-missing-image. The trade-off is that the encoded string adds bytes to the HTML document itself — typically 30–40 % overhead for base64 — so data URIs are best reserved for small placeholders rather than large photographs.

For perceived performance, many large platforms — Facebook, YouTube, LinkedIn — use a shimmer skeleton animation: a pale grey rectangle with a bright highlight that sweeps left-to-right on a loop, mimicking movement and signalling that content is loading. User research consistently shows that an animated placeholder feels faster than an equivalent blank space, even when the actual load time is identical. The effect is implemented with a CSS @keyframes animation moving a linear gradient across the element — pure CSS, zero JavaScript, no images. As a development placeholder you do not need the animation, but understanding it clarifies why flat grey boxes remain the design standard: they share the same neutral visual language as the shimmer skeleton, so developers and designers immediately understand them as "content not yet loaded" rather than missing or broken assets.

Responsive Images, LQIP, and the Largest Contentful Paint Connection

A single placeholder size is fine for prototyping, but shipping real images to production means deciding which pixel dimensions to actually serve. The srcset attribute lets you list multiple pre-resized versions of the same image (image-480w.jpg 480w, image-1200w.jpg 1200w), and the browser picks the most appropriate one based on the device's screen width and pixel density. Paired with the sizes attribute — which tells the browser how wide the image will be rendered at each viewport breakpoint — this combination can cut image payload by 50–70 % on mobile devices without any JavaScript. Your placeholder should match the largest srcset size so the layout never shifts when the biggest version loads.

The Low-Quality Image Placeholder (LQIP) pattern takes data URIs a step further: instead of a blank box, you embed a tiny, heavily blurred thumbnail (often as small as 10×10 px, base64-encoded) as the placeholder src. This gives users an immediate — if blurry — preview of the actual image content while the full resolution version loads in the background. JavaScript (or native loading="lazy") swaps the src once the full image is ready. The blurred preview occupies the exact same space as the final image, so there is zero layout shift, and the visual transition from blurred to sharp communicates progress far more clearly than a grey box. Tools like Next.js next/image and Gatsby's image plugin generate LQIP data automatically during the build step.

The hero or featured image at the top of a page is almost always the browser's Largest Contentful Paint (LCP) element — the metric Google uses to measure how quickly a page feels loaded. LCP must complete in under 2.5 seconds on a median mobile connection to score "Good" in Core Web Vitals. Using loading="eager" (the default for above-the-fold images), preloading the image with <link rel="preload" as="image">, and serving a next-generation format like WebP or AVIF via the <picture> element are the three highest-impact optimisations for LCP. Your placeholder strategy affects this score directly: a correctly sized placeholder with explicit dimensions tells the browser to reserve space immediately, and a preloaded real image fills that space before the user notices the swap — keeping LCP fast and CLS at zero.