You’ve seen them everywhere. Those grey boxes, the "lorem ipsum" of the visual world, or maybe just a colorful square with some numbers in the middle. Placeholder images are the quiet workhorses of the internet, but honestly, most developers and designers treat them like an afterthought. They just grab whatever link is handy and move on.
That’s a mistake.
Choosing the wrong way to handle temporary visuals can actually mess up your layout, slow down your site's perceived performance, and drive your QA team crazy. It’s not just about filling a hole in the grid. It’s about maintaining the integrity of the design while the "real" assets are stuck in a Creative Cloud export queue or waiting for client approval.
Why We Still Use Placeholder Images in 2026
It feels like we should be past this, right? With AI generating images in seconds, you’d think we’d just pop a prompt in and get a "real" photo. But the truth is, placeholder images serve a specific technical purpose that a random AI generation doesn't always solve. They are predictable. When you use a service like Placehold.jp or dummyimage.com, you are asking for a specific aspect ratio. You need to know exactly how a 1200x630 hero image is going to push the text down the page.
If you use a "real" photo that hasn't been cropped correctly, you aren't testing the site. You're just looking at a pretty picture.
I’ve seen entire production launches get delayed because the dev team used high-res 4K stock photos as "placeholders" during staging. The site looked great on their local machines. Then, they moved to a staging server, the page weight ballooned to 40MB, and the Lighthouse scores tanked. A simple, lightweight SVG placeholder would have caught the layout shifts without the overhead.
The Layout Shift Nightmare
Google’s Core Web Vitals are obsessed with Cumulative Layout Shift (CLS). You know that annoying thing where you’re about to click a button and the page jumps? That’s usually an image loading without defined dimensions. Placeholder images help prevent this by "holding" the space.
But here’s the kicker: if your placeholder is a different aspect ratio than the final image, you’ve learned nothing. You've basically lied to your browser.
The Best Tools Nobody Talks About
Everyone knows the big ones, but the landscape has shifted. If you’re still using the same service you used in 2018, you might be missing out on better functionality.
- Placehold.it (now redirecting mostly to specific clones): The OG. Simple. It’s basically just a URL where you change the dimensions at the end. Classic.
- Unsplash Source: This used to be the gold standard for "pretty" placeholders. Sadly, they’ve deprecated some of the easier API features, making it a bit more of a chore than it used to be.
- Picsum.photos: This is the current favorite for most. It’s fast, the images look real, and you can even get grayscale or blurred versions.
- SVG-based generators: This is where the pros are moving. Since an SVG is just code, it loads instantly. No HTTP request for a heavy JPG just to show a grey box.
Dynamic Content and Edge Cases
Think about a social media feed. If you’re building the next big app, you can’t just have 50 identical grey boxes. It looks broken. This is where "seeded" placeholders come in. Most modern services allow you to add a "seed" to the URL—like picsum.photos/seed/user123/200/300. This ensures that "User 123" always gets the same image, even if it’s a placeholder. It makes the UI feel consistent during testing.
Don't Forget Accessibility
It sounds weird to talk about accessibility for an image that isn't even real. But screen readers don't know it's a placeholder. If you leave a placeholder in your code with alt="placeholder", you are failing your users.
Actually, if it’s a purely decorative placeholder, the alt attribute should be empty (alt=""). This tells the screen reader to skip it. Don't let your temporary dev work create a permanent barrier for someone using assistive technology.
The "Blur-Up" Technique
This is the high-end version of the placeholder. Instead of a grey box, you use a tiny, 10x10 pixel version of the actual image and blow it up with a CSS blur filter. It’s what Medium and Gatsby popularized.
- Load a tiny, 1KB image.
- Apply a heavy CSS blur.
- Fade in the high-res image once it's ready.
It makes the site feel incredibly fast. It’s psychological. The user sees something immediately, so they perceive the load time as shorter than it actually is.
How to Actually Implement This Without Breaking Things
If you are working in a React or Vue environment, don't hardcode these URLs. Create a utility function. Something like getPlaceholder(width, height). This way, if the service you’re using goes down (and they do, frequently), you only have to change the URL in one place.
I remember a project back in '22 where the placeholder service we used just... disappeared. The site was covered in broken image icons. We had to grep/replace through 400 components. Never again.
Practical Steps for Your Next Project
Stop using random JPGs from your "Downloads" folder. It’s messy.
First, determine if you need a "functional" placeholder or an "aesthetic" one. If you’re testing layout, go with a solid color SVG that clearly displays the dimensions (e.g., "800x600"). This keeps the focus on the structure. If you’re presenting to a client, use something like LoremFlickr or Picsum to make the site feel "alive."
Second, check your constraints. If you’re building for a low-bandwidth environment, even a few placeholder JPGs can be too much. Use CSS-only placeholders. A simple <div> with a background color and an aspect-ratio property is often all you really need.
Third, always set a width and height attribute on your <img> tags. Even if the source is a placeholder. This reserves the space in the browser's rendering engine and kills layout shift before it starts.
Lastly, audit your code before production. It sounds obvious, but "placeholder-image-final-v2.png" makes it into live sites more often than you’d think. Use a linter or a simple script to flag any URLs containing "placehold," "picsum," or "dummyimage" before you merge to your main branch.
📖 Related: GPT-4 OpenAI qué es cómo funciona y por qué cambió las reglas del juego
Keep your dev environment clean, keep your layout stable, and stop treating your temporary assets like trash. They’re the scaffolding of your entire build. Treat them with a little respect.