Imagen de relleno
Placeholder Image
Genera una imagen de relleno de color plano o degradado en cualquier tamaño, con las dimensiones escritas encima.
Una caja gris exactamente del tamaño que necesitas, con las dimensiones dibujadas encima, para un diseño que está esperando la fotografía real. Sale como un data URI SVG que puedes pegar directamente en CSS, más pequeño que cualquier PNG y sin costar una petición.
'/%3E%3Ctext x='50%25' y='50%25' fill='%23ffffff' font-family='system-ui, sans-serif' font-size='79' text-anchor='middle' dominant-baseline='central'%3E1200×630%3C/text%3E%3C/svg%3E)
Data URI de SVG
580 BCodificado con porcentajes en lugar de base64: un 25 % más pequeño, y todavía se puede leer. Pégalo directamente en background-image: url("…")
Cómo se usa
Fija el tamaño
Las dimensiones exactas en píxeles del hueco. Con la etiqueta activada se dibujan sobre la imagen, que es lo que hace evidente una caja de tamaño equivocado en un diseño.
Elige sólido, degradado o ruido
Sólido y degradado se quedan en SVG. El ruido tiene que ser PNG, porque un campo aleatorio por píxel como SVG serían megabytes de rectángulos.
Copia el data URI
Codificado con porcentajes y no en Base64: alrededor de un 25 % más pequeño, y sigue siendo legible en la hoja de estilos.
Preguntas frecuentes
¿Por qué la versión SVG no está disponible para el ruido?
Porque SVG no tiene ninguna primitiva aleatoria por píxel que renderice idéntica en todos los motores. Expresarlo literalmente significa un rectángulo por píxel, que para una caja de 400×300 son 120 000 elementos.
¿El ruido cambia cada vez?
No: tiene semilla, así que los mismos ajustes dan la misma imagen. Un marcador de posición que cambiara en cada renderizado inutilizaría una batería de pruebas de regresión visual.
¿Puedo usarlos en producción?
El data URI, sí: son unos cientos de bytes y nunca da un 404, que es más de lo que puede decirse de un servicio de terceros de imágenes de relleno. Solo acuérdate de quitarlos, porque un marcador de posición que llegó a producción es invisible en la revisión de código.
Puede recibir de
Generador de BlurHash y ThumbHash
BlurHash / ThumbHash
Codifica una imagen en una cadena corta de BlurHash o ThumbHash para usarla como marcador mientras carga.
Generador de Lorem Ipsum
Lorem Ipsum Generator
Genera párrafos, frases o palabras de relleno en latín, inglés, coreano, japonés o chino.
Generador de avatares
Avatar Generator
Genera un identicon o un avatar de iniciales siempre igual para el mismo nombre o correo, en SVG o PNG.
Después
Estas aceptan lo que produce esta herramienta, así que el resultado puede pasar directamente.
Generador de BlurHash y ThumbHash
BlurHash / ThumbHash
Codifica una imagen en una cadena corta de BlurHash o ThumbHash para usarla como marcador mientras carga.
Maquetas de dispositivo
Device Mockup
Coloca una captura dentro de un marco de teléfono, tableta, portátil o navegador, con fondo y sombra.
Imagen a Base64 o data URI
Image to Base64 / Data URI
Codifica una imagen como cadena Base64 o como data URI listo para pegar en CSS, HTML o JSON.
Quitar el fondo de una imagen
Background Remover
Recorta un fondo plano o de un solo color en el espacio OKLab y devuelve un PNG transparente, con pincel para corregir los bordes.
Borrar los datos EXIF de una foto
EXIF Remover
Elimina los metadatos de cámara, GPS y edición de las fotos sin tocar un solo píxel, y sin que la foto salga de tu navegador.
Generador de favicon
Favicon Generator
Produce el juego completo de iconos —ICO, PNG, icono de Apple y manifiesto web— junto con el HTML para pegar.