¿Qué es una imagen placeholder y para qué se usa?

Una imagen placeholder es una imagen genérica que ocupa el espacio de una imagen real durante el desarrollo de una web o aplicación. Se usa cuando el diseño o prototipo está listo pero las imágenes definitivas aún no están disponibles: ayuda al equipo a visualizar el layout final, evita errores de imagen rota en el navegador, y mantiene las proporciones y jerarquía visual del diseño. También se usan en documentación, tutoriales y ejemplos de código.

¿Qué presets de dimensiones están disponibles?

Incluye 5 presets para los formatos más comunes: 16:9 a 1280×720 px (formato video y banners web), 1:1 a 800×800 px (imágenes de producto e Instagram), 4:3 a 1024×768 px (formato clásico de fotografía y slides), Open Graph a 1200×630 px (previsualizaciones en redes sociales), y Banner a 1500×500 px (cabeceras web y Twitter). También puedes introducir dimensiones personalizadas hasta 5000×5000 px.

¿Puedo personalizar el texto de la imagen?

Sí. Por defecto muestra las dimensiones exactas (ej: "1280×720") para que sea inmediatamente informativa durante el desarrollo. Puedes escribir cualquier texto personalizado: el nombre de la sección ("Hero image"), el tipo de contenido ("Foto del producto"), o cualquier etiqueta descriptiva. El texto se centra automáticamente y se escala proporcionalmente al tamaño de la imagen.

¿Puedo elegir el color de fondo y del texto?

Sí. Hay presets de colores de fondo: gris claro (#CCC, el clásico de placeholders), gris muy claro, azul, verde, rojo y naranja. Puedes usar el selector de color para cualquier tono personalizado. Para el texto hay 4 presets: gris medio, gris oscuro, blanco y negro. Combinando fondo y texto puedes crear placeholders con la paleta de colores de tu proyecto.

¿En qué formato se descarga la imagen?

Las imágenes placeholder se descargan en formato PNG para máxima compatibilidad y calidad. PNG es el formato correcto para imágenes sintéticas con colores planos y texto, ya que no introduce artefactos de compresión como JPEG. El nombre del archivo incluye las dimensiones automáticamente (ej: "placeholder_1280x720.png").

¿Puedo usar las imágenes en proyectos comerciales?

Sí, sin restricciones. Las imágenes se generan en tu navegador usando la Canvas API y son completamente tuyas. No hay marcas de agua, derechos de autor ni términos de uso especiales. Puedes usarlas en proyectos personales y comerciales, wireframes, presentaciones a clientes, documentación técnica y cualquier otro uso.

¿Cómo se usan las placeholders en código HTML y CSS?

Descarga la imagen y úsala en tu proyecto como cualquier imagen normal. En HTML: ` `. En CSS: `background-image: url(placeholder_800x600.png)`. En React o Vue: ` `. También puedes usar servicios de placeholder online como `https://via.placeholder.com/800x600` directamente en el src sin descargar nada, pero esos servicios requieren conexión externa.

Imagen placeholder

Crea imágenes placeholder con el tamaño, color de fondo y texto que necesites. Presets de proporción estándar: 16:9, 1:1, 4:3, OG (1200×630) y Banner. Descarga en PNG. Canvas API, 100% en el navegador.

Gratis, sin registro y sin subir archivos a ningún servidor: el procesamiento ocurre en tu navegador · Actualizado el 18 de septiembre de 2026

Ancho (px)

Alto (px)

Texto personalizado (opcional)

Color de fondo

Color de texto

Placeholders en diseño web y prototipado rápido

En el flujo de trabajo de diseño web y desarrollo frontend, las imágenes placeholder son esenciales en las etapas tempranas: permiten construir y revisar layouts completos antes de tener las imágenes definitivas. Herramientas como Figma, Adobe XD y Sketch las usan internamente; frameworks como Bootstrap incluyen componentes placeholder por defecto. Generar tus propias en el tamaño exacto que necesitas es más preciso que usar servicios externos que pueden estar caídos o lentos.',

Documentación técnica, mockups y presentaciones a clientes

Las imágenes placeholder son muy útiles en presentaciones a clientes para mostrar propuestas de diseño sin necesitar las imágenes finales; en documentación técnica de APIs y guías de integración donde se necesitan imágenes de ejemplo; en mockups de apps para App Store y Google Play; y en tutoriales y vídeos educativos sobre desarrollo web donde quieres imágenes neutras y consistentes. Personaliza el texto y los colores para que encajen con la identidad visual de cada proyecto.

Otras herramientas

Redimensionar imagen

Cambia el tamaño por píxeles exactos o porcentaje.

Convertir formato

Convierte entre JPG, PNG, WebP y AVIF al instante.

Generador OG Image

Crea imágenes Open Graph 1200×630 para compartir en redes sociales.

Preguntas frecuentes

¿Qué es una imagen placeholder y para qué se usa?: Una imagen placeholder es una imagen genérica que ocupa el espacio de una imagen real durante el desarrollo de una web o aplicación. Se usa cuando el diseño o prototipo está listo pero las imágenes definitivas aún no están disponibles: ayuda al equipo a visualizar el layout final, evita errores de imagen rota en el navegador, y mantiene las proporciones y jerarquía visual del diseño. También se usan en documentación, tutoriales y ejemplos de código.
¿Qué presets de dimensiones están disponibles?: Incluye 5 presets para los formatos más comunes: 16:9 a 1280×720 px (formato video y banners web), 1:1 a 800×800 px (imágenes de producto e Instagram), 4:3 a 1024×768 px (formato clásico de fotografía y slides), Open Graph a 1200×630 px (previsualizaciones en redes sociales), y Banner a 1500×500 px (cabeceras web y Twitter). También puedes introducir dimensiones personalizadas hasta 5000×5000 px.
¿Puedo personalizar el texto de la imagen?: Sí. Por defecto muestra las dimensiones exactas (ej: "1280×720") para que sea inmediatamente informativa durante el desarrollo. Puedes escribir cualquier texto personalizado: el nombre de la sección ("Hero image"), el tipo de contenido ("Foto del producto"), o cualquier etiqueta descriptiva. El texto se centra automáticamente y se escala proporcionalmente al tamaño de la imagen.
¿Puedo elegir el color de fondo y del texto?: Sí. Hay presets de colores de fondo: gris claro (#CCC, el clásico de placeholders), gris muy claro, azul, verde, rojo y naranja. Puedes usar el selector de color para cualquier tono personalizado. Para el texto hay 4 presets: gris medio, gris oscuro, blanco y negro. Combinando fondo y texto puedes crear placeholders con la paleta de colores de tu proyecto.
¿En qué formato se descarga la imagen?: Las imágenes placeholder se descargan en formato PNG para máxima compatibilidad y calidad. PNG es el formato correcto para imágenes sintéticas con colores planos y texto, ya que no introduce artefactos de compresión como JPEG. El nombre del archivo incluye las dimensiones automáticamente (ej: "placeholder_1280x720.png").
¿Puedo usar las imágenes en proyectos comerciales?: Sí, sin restricciones. Las imágenes se generan en tu navegador usando la Canvas API y son completamente tuyas. No hay marcas de agua, derechos de autor ni términos de uso especiales. Puedes usarlas en proyectos personales y comerciales, wireframes, presentaciones a clientes, documentación técnica y cualquier otro uso.
¿Cómo se usan las placeholders en código HTML y CSS?: Descarga la imagen y úsala en tu proyecto como cualquier imagen normal. En HTML: `<img src="placeholder_800x600.png" alt="placeholder">`. En CSS: `background-image: url(placeholder_800x600.png)`. En React o Vue: `<img src={placeholder} />`. También puedes usar servicios de placeholder online como `https://via.placeholder.com/800x600` directamente en el src sin descargar nada, pero esos servicios requieren conexión externa.