Generador de imágenes placeholder

Descárgala o insértala en línea

Elige el formato idóneo para cada tarea. SVG apenas ocupa unos cientos de bytes en un placeholder básico y conserva su nitidez a cualquier resolución. PNG mantiene limpios los colores planos y las tipografías, siendo el formato de mapa de bits con mayor compatibilidad. WebP funciona en todos los navegadores modernos y suele generar archivos más ligeros que PNG, incluso con gráficos planos. JPG resulta útil si tus herramientas lo exigen de forma estricta: no admite transparencias y puede generar bandas visibles en los degradados. Para mapas de bits, selecciona @2x o @3x si buscas nitidez en pantallas de alta densidad manteniendo el mismo tamaño CSS; las dimensiones excesivas se reducen automáticamente a unos 16 megapíxeles, el límite habitual del elemento canvas en Safari y muchos dispositivos móviles.

La opción Copiar como entrega la imagen embebida como data URI en el formato que prefieras: una etiqueta <img> con dimensiones explícitas, sintaxis Markdown para archivos README o documentación, una propiedad CSS background-image con su respectivo aspect-ratio, o un componente <img> para React. El código SVG se codifica con formato URL en lugar de base64, lo que facilita su lectura directa y mantiene un peso similar o inferior.

¿Buscas una URL directa como /600x400?

Existen servicios web de placeholders que generan una imagen al vuelo mediante enlaces como /600x400. Son cómodos al principio, pero si el servicio deja de funcionar o altera sus rutas, todos los prototipos vinculados dejan de verse al instante; además, introducen peticiones externas innecesarias en cada visita. Una data URI insertada en tu código es una alternativa autónoma: la copias una vez y funciona sin conexión, en prototipos, historias de Storybook y bancos de pruebas. Hay dos excepciones a tener en cuenta: muchos clientes de correo (incluido Gmail) bloquean imágenes en data URI, por lo que es preferible usar un PNG descargado; asimismo, insertar imágenes inline excesivamente grandes sobrecarga el HTML, resultando mejor guardarlas como archivos independientes.

Tres usos habituales del concepto «placeholder»

• Imagen de maqueta o diseño: un recuadro con las medidas exactas que reserva el espacio de una fotografía definitiva pendiente de entrega: justo lo que genera esta herramienta.
• Imagen por defecto o de respaldo (fallback): el recurso visual que se muestra cuando un elemento no tiene fotografía asignada, como un producto sin catálogo o un perfil sin avatar. Conviene que sea neutro, respete la proporción final y cuente con un texto alternativo descriptivo.
• Marcador de posición durante la carga: una vista previa minúscula y difuminada o un bloque de color plano que aparece mientras se descarga el recurso principal, como el atributo blurDataURL en Next.js. Un SVG sencillo de color sólido o degradado generado aquí cumple a la perfección esta función.

Tamaños comunes de placeholders

Las redes sociales ajustan con frecuencia sus formatos recomendados; verifica siempre las especificaciones vigentes de cada plataforma antes de preparar los artes finales.

Buenas prácticas para no romper tu diseño

• Define siempre width y height (o la propiedad CSS aspect-ratio) en la etiqueta de la imagen. Así el navegador reserva el espacio necesario antes de descargar el recurso y se evitan saltos de contenido bruscos (el desplazamiento medido por CLS en Core Web Vitals).
• Utiliza la relación de aspecto definitiva para detectar desde las primeras fases posibles errores de encuadre con imágenes adaptables o propiedades como object-fit: cover.
• Muestra las dimensiones en el texto durante las revisiones de diseño para que el equipo identifique con claridad qué recursos gráficos faltan por producir.
• Asigna alt="" a los placeholders decorativos y reemplaza cada imagen temporal antes de publicar en producción: dejar un placeholder visible en un sitio en vivo se considera un fallo de entrega.