En resumen: las imágenes placeholder son gráficos ficticios, grises (o de color), a las dimensiones exactas, que sustituyen las fotos reales mientras diseñas. Su verdadero valor es que reservan el espacio correcto pronto, así el layout se comporta igual antes y después de que lleguen los recursos finales — sin reflujo, sin sorpresas. Esta guía cubre cuándo usarlas, qué formato exportar y cómo evitar el layout shift.
Esperar la fotografía definitiva antes de construir un layout es al revés. Las imágenes placeholder te permiten fijar primero las dimensiones y luego colocar los visuales reales sin que el diseño se mueva bajo tus pies.
Reservar el espacio, no solo llenarlo
Lo más valioso que hace un placeholder es mantener el ancho y el alto exactos que usará la imagen real. Si un layout se construye en torno a imágenes sin dimensiones reservadas, colocar los recursos finales lo hace saltar todo — el texto se recoloca, los botones se mueven, y en la web esto aparece como Cumulative Layout Shift. Diseñar desde el inicio con placeholders del tamaño correcto hace que el cambio final cambie la imagen, no la posición.
Respeta dimensiones y proporción reales
Un placeholder solo sirve si coincide con lo que viene. Fija las dimensiones en píxeles reales y el aspect ratio de la imagen final — un hero 16:9, un avatar 1:1, una miniatura 4:3 — para que el mockup refleje la realidad. Etiquetar cada placeholder con su tamaño (muchos generadores lo imprimen en la imagen) facilita detectar un desajuste en revisión.
Retina y alta densidad
En pantallas de alta densidad una imagen necesita más píxeles físicos que su tamaño de layout. Exportar un placeholder a 2×, 3× o 4× te deja probar cómo se verá el recurso real en pantallas retina y confirmar que has planificado el archivo más grande que necesitará la versión final.
Qué formato exportar
- PNG / WebP — para mockups y prototipos en pantalla.
- SVG — independiente de la resolución, minúsculo, ideal cuando el tamaño exacto aún es fluido.
- Base64 / Data URI — incrusta el placeholder directamente en HTML o CSS, útil para un prototipo autónomo sin archivos externos.
Un flujo práctico
- Enumera los huecos de imagen de tu layout y sus dimensiones reales.
- Genéralos en el Generador de Imágenes Placeholder — usa el modo por lotes para producir todos los tamaños de una vez.
- Colócalos en el diseño y confirma que nada se mueve al redimensionar el viewport.
- Sustituye los recursos reales uno a uno; como el espacio está reservado, el layout se queda quieto.
Si también necesitas texto ficticio para rellenar el contenido alrededor de esas imágenes, combina el Generador de Lorem Ipsum para que todo el mockup se lea con una densidad realista.
Errores comunes que evitar
- Usar placeholders con la proporción equivocada, de modo que la imagen real se recorta de forma inesperada.
- No reservar las dimensiones de la imagen, causando layout shift cuando llegan las finales.
- Ignorar el escalado retina y subestimar el tamaño del archivo.
- Enviar un placeholder a producción porque nunca se sustituyó.