Está armando un layout, pega la típica URL de placeholder y no carga. El navegador lo inunda con advertencias de contenido mixto, la pestaña se congela durante medio minuto. ¿Le suena familiar?

Los servicios de placeholder de principios de la década de 2010 están muriendo en silencio: los dominios no se renuevan, los certificados TLS expiran, los límites de tasa restringen las solicitudes. Descubrir esto una hora antes de una fecha límite no tiene ninguna gracia.

Probamos manualmente 14 herramientas activas: desde rectángulos de color hasta generación por IA y avatares deterministas. Cada una soporta HTTPS, mantiene una disponibilidad estable y no lo dejará en la estacada cuando el backend no esté listo pero usted ya necesite mostrar el layout.

💡 Resumen rápido:

• Tipología: bloques de color, rellenos fotográficos, SVG con entrega Edge, avatares, mockups de dispositivos y generación por IA; hay una herramienta para cada tarea.
• Velocidad: placeholders.dev y placeholdr.dev se ejecutan en Cloudflare Workers y sirven contenido desde la ubicación Edge más cercana.
• Seguridad: los 14 servicios funcionan sobre HTTPS. Sin advertencias de contenido mixto en absoluto.
• Código listo para usar: cada servicio proporciona una plantilla de URL que puede copiar y pegar en <img src> en segundos.

Criterios de selección: qué hace que un servicio sea adecuado para mockups funcionales

Los parámetros que utilizamos para evaluar cada herramienta:

• Solo HTTPS. El contenido mixto en 2026 es una señal de alerta. Los servicios sin TLS no entraron en la lista.
• CDN** o entrega Edge.** La cobertura global implica baja latencia desde cualquier ubicación.
• Mantenimiento activo. Commits o actualizaciones recientes en el último año.
• Sintaxis de URL predecible. El patrón debe ser obvio a primera vista, sin necesidad de leer documentación.
• Formatos modernos. WebP, AVIF, SVG; sin ellos, un servicio no puede competir.

Tabla comparativa

1. Placehold.co: el estándar de oro para bloques de color

Llegó para reemplazar al poco fiable via.placeholder.com y se convirtió en la opción predeterminada. Colores HEX, Google Fonts, tamaño: todo va en la URL. SVG, WebP, PNG. El patrón es obvio a primera vista: /600x400/EEE/31343C?text=Hero+Image.

Ventajas:

• SVG, WebP, PNG: tres formatos en un solo servicio.
• Colores HEX y Google Fonts directamente en la cadena de consulta.
• CDN estable con latencia mínima.

Desventajas:

• Solo bloques de color. El servicio no genera fotos.

1
<img src="https://placehold.co/600x400" alt="Placeholder">
2
<img src="https://placehold.co/600x400/EEE/31343C?text=Hero+Image" alt="Hero">
3
<img src="https://placehold.co/600x400.webp" alt="WebP format">

🔗 Placehold.co

2. Lorem Picsum: rellenos fotográficos para mockups realistas

"Lorem Ipsum, pero para imágenes." Entrega fotos reales de su base de datos, perfecto cuando los cuadrados de color desentonan. El parámetro seed fija una imagen, algo invaluable para las pruebas de interfaz de usuario.

Los filtros (grayscale, blur) añaden flexibilidad. No requiere atribución.

Ventajas:

• Fotos de calidad para mockups, no basura de stock.
• Filtros de desenfoque y escala de grises.
• seed para repetibilidad en cada solicitud.

Desventajas:

• Sin control preciso sobre el contenido de la foto. Obtiene lo que haya quedado en el encuadre.

1
<img src="https://picsum.photos/800/600" alt="Random photo">
2
<img src="https://picsum.photos/seed/product/400/300" alt="Fixed photo">
3
<img src="https://picsum.photos/800/600?grayscale&blur=2" alt="Filtered">

🔗 Lorem Picsum

3. DummyImage: preajustes para cualquier tarea

El servicio con la personalización más amplia para placeholders de texto. Su característica principal son las docenas de preajustes: formatos publicitarios (Leaderboard, Wide Skyscraper), relaciones de aspecto (16:9, 4:3), resoluciones populares. Colores de fondo y texto mediante HEX, formatos PNG, JPEG, GIF.

Sin CDN, la velocidad depende de la ubicación geográfica. No es crítico para el desarrollo local.

Ventajas:

• Docenas de plantillas predefinidas para anuncios, pantallas y composiciones estándar.
• Control total sobre el color de fondo y del texto.

Desventajas:

• Sin CDN. La latencia se nota desde Australia o Japón.

1
<img src="https://dummyimage.com/728x90/000/fff" alt="Leaderboard ad">
2
<img src="https://dummyimage.com/16:9x1080" alt="HD ratio">

🔗 DummyImage

4. Placeholders.dev: SVG desde servidores perimetrales

Funciona sobre Cloudflare Workers y entrega SVG desde servidores perimetrales. Lo de «súper rápido» no es jerga de marketing: la entrega desde la ubicación más cercana de Cloudflare implica una latencia de milisegundos de un solo dígito. El SVG ofrece una nitidez perfecta en pantallas Retina a cualquier escala.

Ventajas:

• Generación al vuelo mediante Cloudflare Workers.
• Nitidez en cualquier pantalla gracias al SVG.
• Entrega perimetral desde la ubicación de red más cercana.

Desventajas:

• Solo SVG. No se admiten formatos rasterizados.

1
<img src="https://images.placeholders.dev/?width=400&height=300&bgColor=%23f0f0f0&textColor=%23333" alt="SVG placeholder">

🔗 placeholders.dev

5. DiceBear: avatares deterministas

Genera avatares bajo el principio de «una semilla, un resultado». Pase un correo electrónico o un nombre de usuario y obtendrá el mismo avatar en cada solicitud. Invaluable para listas de usuarios y paneles de administración: el contenido luce poblado sin la molestia de las fotos reales.

Más de veinte estilos, desde pixel art hasta rostros realistas. Todo en SVG. La API es abierta.

Ventajas:

• Dos docenas de estilos de avatar.
• Generación determinista: la semilla garantiza la repetibilidad.
• SVG para un escalado perfecto.

Desventajas:

• Solo SVG. Para avatares rasterizados necesitará un conversor adicional.

1
<img src="https://api.dicebear.com/9.x/avataaars/[email protected]" alt="User avatar">

🔗 DiceBear

6. UI Avatars: iniciales en lugar de imágenes

Genera avatares con las iniciales del usuario sobre un fondo de color. Perfecto para comentarios, chats y paneles de administración donde no se necesitan fotos, pero los círculos grises sin rostro resultan molestos. El tamaño, la fuente, el color de fondo y el color del texto se configuran mediante parámetros en la URL.

El servicio es completamente abierto: código fuente en GitHub, puede levantar su propia instancia en 10 minutos. Una ventaja significativa para proyectos con requisitos de privacidad.

Ventajas:

• Iniciales en lugar de imágenes con carga instantánea.
• Control total sobre el color de fondo, el color del texto y la fuente.
• Código abierto en GitHub.

Desventajas:

• Solo texto sobre un fondo de color. No admite ilustraciones.

1
<img src="https://ui-avatars.com/api/?name=John+Doe&size=128&background=0D8ABC&color=fff" alt="JD Avatar">

🔗 UI Avatars

7. Lorem Flickr: fotos con licencia Creative Commons

Busca fotos con licencia Creative Commons en Flickr y las sirve como marcadores de posición. En comparación con Lorem Picsum, aquí obtiene tomas más «espontáneas» y menos composiciones preparadas. La calidad varía, pero para maquetas donde la autenticidad importa, eso es una ventaja.

El parámetro lock fija la imagen. La búsqueda por palabra clave acota la selección.

Ventajas:

• Búsqueda por palabra clave.
• lock para mantener la imagen fija.
• Creative Commons con licencias transparentes.

Desventajas:

• Calidad impredecible: desde una obra maestra hasta una instantánea borrosa.

1
<img src="https://loremflickr.com/1280/720" alt="Flickr Image">

🔗 Lorem Flickr

8. Placeit: maquetas profesionales de dispositivos

Una plataforma de Envato con cerca de 3000 plantillas de maquetas: iPhone, Samsung, equipos de escritorio, portátiles, tabletas. El servicio es de pago (suscripción a Envato), pero para presentar diseños a clientes o en portafolios, ofrece resultados indistinguibles de los renderizados de estudio.

Arrastrar y soltar: suba una captura de pantalla, elija un dispositivo, descárguela. Para presentaciones comerciales, se amortiza de inmediato.

Ventajas:

• Cerca de 3000 plantillas de dispositivos y escenarios.
• Interfaz de arrastrar y soltar que no requiere habilidades de diseño.

Desventajas:

• De pago. Las maquetas gratuitas tienen marcas de agua.

🔗 Placeit

9. ASSETS.SO: marcadores de posición temáticos con personalidad

Añade contexto a la rutina diaria de un desarrollador. Categorías: juegos, películas, música, deportes, calzado. Un sitio de películas con fotogramas reales se ve más convincente que un prototipo con cuadrados de colores. La API es simple: /game.jpg?w=1280&h=720.

Ventajas:

• Categorías temáticas para distintos nichos.
• API extremadamente simple.

Desventajas:

• Control mínimo sobre el contenido.

1
<img src="https://via.assets.so/game.jpg?w=1280&h=720" alt="Game Asset">

🔗 ASSETS.SO

10. RoboHash: avatares robot para datos de prueba

Genera robots únicos a partir de cualquier texto. El principio es el mismo que DiceBear (generación determinista), pero con carácter: cada robot tiene su propia expresión y esquema de color. Estilos: robots clásicos, monstruos, gatos robot.

Adecuado para prototipos donde quiera añadir personalidad a los perfiles de prueba.

Ventajas:

• Generación determinista a partir de texto.
• Tres estilos: robots, monstruos, gatos.
• Código abierto.

Desventajas:

• Solo PNG. No admite SVG.

1
<img src="https://robohash.org/[email protected]" alt="Robot avatar">

🔗 RoboHash

11. Bacon Mockup: tocino en cualquier resolución

Deliciosas imágenes de tocino en cualquier resolución. Para sitios de restaurantes, blogs de comida o para gastar bromas a colegas. Suena a chiste, pero el servicio lleva varios años funcionando de forma estable.

Alta resolución, API sencilla. De nicho, pero memorable.

Ventajas:

• Fotos de alta resolución.
• API extremadamente simple.

Desventajas:

• Temática limitada. Inútil fuera de proyectos gastronómicos.

1
<img src="https://baconmockup.com/1280/720" alt="Bacon">

🔗 Bacon Mockup

12. Placebeard.it: rudeza en cada píxel

La respuesta a placekitten, algo más terrenal y masculino. Fotos a color o en blanco y negro de personas barbudas en cualquier proporción. Para barberías, ropa masculina y startups hipster. Admite escala de grises. El servicio lleva mucho tiempo funcionando de manera estable.

Ventajas:

• Fotos temáticas, ideales para el segmento masculino.
• Admite escala de grises.

Desventajas:

• Temática limitada. No apto para audiencias femeninas.

1
<img src="https://placebeard.it/1280x720" alt="Beard">

🔗 Placebeard.it

13. Placebear: fuerza natural en bruto

Marcadores de posición grandes, peludos y a veces peligrosos. Ideales para probar la adaptabilidad en imágenes con texturas complejas: el pelaje, la hierba y la corteza ofrecen material abundante para verificar la compresión y el redimensionado.

Fotos de alta resolución, tiempo de actividad estable. No es para todos los proyectos, pero vale la pena tenerlo en marcadores.

Ventajas:

• Fotos de alta resolución.
• Tiempo de actividad estable.

Desventajas:

• Contenido específico. No todos los clientes apreciarán un oso en su maqueta.

1
<img src="https://placebear.com/1280/720" alt="Bear">

🔗 Placebear

14. Placeholdr.dev: generación de placeholders con IA

El actor más reciente en este nicho: generación con IA mediante el modelo de difusión Flux en Cloudflare Workers con caché R2. La primera solicitud tarda varios segundos en renderizarse; las siguientes se sirven al instante desde la caché.

Formato de URL: /{width}x{height}/{prompt}. Estilos: photographic, artistic, anime, oil-painting, 3d-render, cartoon. seed (1-3) fija la variante. Gratuito, no requiere registro.

Ventajas:

• Generación con IA: descripciones en lenguaje natural en lugar de códigos HEX.
• Seis estilos, desde fotorrealismo hasta renderizado 3D.
• Entrega en el edge mediante Cloudflare Workers.

Desventajas:

• La primera solicitud es lenta (varios segundos para renderizar).
• Servicio joven (lanzado en enero de 2026); su estabilidad a largo plazo es incierta.

1
<img src="https://placeholdr.dev/600x400/minimalist modern office" alt="AI-generated office">
2
<img src="https://placeholdr.dev/320x320/cat?style=anime" alt="AI anime cat">
3
<img src="https://placeholdr.dev/1024x768/camera?style=3d-render&seed=3" alt="AI 3D camera">

🔗 placeholdr.dev

Consideraciones técnicas: CSP, modo sin conexión y por qué las URLs antiguas dejan de funcionar

Cabeceras Content-Security-Policy

Si su sitio utiliza CSP estricta, los servicios externos de placeholders serán bloqueados por el navegador por defecto. Actualice la directiva img-src:

1
Content-Security-Policy: img-src 'self' https://placehold.co https://picsum.photos;

Importante: elimine estos dominios del CSP antes de desplegar a producción. Los placeholders son para desarrollo, no para sitios en vivo.

Desarrollo local sin internet

Para desarrollo sin conexión o proyectos con requisitos de privacidad:

• Generación de placeholders en el lado del cliente mediante Canvas o SVG.
• Script generador local en Node.js.
• Archivos de placeholder estáticos en el repositorio.

Por qué las URLs antiguas dejan de funcionar

La mayoría de los servicios de principios de la década de 2010 eran proyectos paralelos: se lanzaban, se mantenían un par de años y luego se abandonaban. El dominio expira, el certificado caduca y la URL se convierte en calabaza. Elija servicios con commits recientes y soporte comercial.

⁉️🤔 Preguntas frecuentes

¿Puedo usar placeholders en producción?

No. Los servicios de placeholders son solo para desarrollo y prototipado. Límites de solicitudes, tiempos de inactividad, latencia bajo carga. Sustituya los placeholders por recursos reales antes del lanzamiento.

¿Por qué algunos servicios sobreviven durante años mientras que otros mueren en un par de temporadas?

La diferencia está en el modelo de soporte. Los servicios comerciales o patrocinados tienen recursos dedicados y reciben actualizaciones estables. Los proyectos paralelos individuales funcionan a base de entusiasmo. Revise el historial de commits: si el último fue hace tres años, busque una alternativa.

¿Cómo fijo la misma imagen en cada recarga?

Use el parámetro seed. Lorem Picsum: /seed/product/400/300. DiceBear: [email protected]. RoboHash: cualquier texto en la URL. placeholdr.dev: ?seed=1 (tres variantes). Una misma semilla siempre produce un mismo resultado.

¿Tengo que actualizar el CSP para los placeholders?

Sí. Si su sitio tiene configuradas cabeceras Content-Security-Policy, añada los dominios del servicio a la directiva img-src; de lo contrario, el navegador bloqueará la carga. No olvide eliminarlos antes del despliegue.

¿Afectan los placeholders externos a la velocidad de desarrollo local?

Cada etiqueta <img> con una URL externa realiza una solicitud HTTP. Los servicios con CDN y Edge funcionan rápido, pero para una autonomía total, mantenga un conjunto de placeholders estáticos en su repositorio.

¿Qué formato es mejor para los placeholders?

SVG para formas geométricas y texto: peso mínimo, escalado perfecto. WebP para placeholders de fotos: notablemente más ligero que JPEG con la misma calidad. PNG cuando necesite transparencia. AVIF si los navegadores de su público objetivo lo soportan.

¿Puedo usar imágenes de estos servicios en maquetas comerciales?

La mayoría de los servicios proporcionan contenido de forma gratuita y sin atribución. Los servicios basados en Flickr funcionan con Creative Commons; verifique la licencia de cada foto. Placeit requiere una suscripción a Envato para descargas sin marca de agua.

Qué guardar en marcadores: el desglose final de placeholders en 2026

Nuestras selecciones para el trabajo diario: Placehold.co para bloques de color, Lorem Picsum para maquetas con fotos y DiceBear para avatares. Estos tres servicios cubren la gran mayoría de las tareas.

¿Necesita velocidad en Retina? placeholders.dev con SVG en el edge. ¿Quiere imágenes contextuales sin buscar en bancos de imágenes? placeholdr.dev con generación por IA. ¿Preparando una presentación comercial? Placeit con sus tres mil maquetas.

La regla principal sigue siendo la misma: los placeholders viven en el servidor de desarrollo. Antes del despliegue, sustituya cada URL externa por un recurso real. Mantenga dos o tres servicios de respaldo en marcadores; lo que funcionaba ayer podría dejar de estar disponible mañana.