Generador de imágenes placeholder: PNG, JPG, WebP o SVG | We.Inc
Crea una imagen placeholder de cualquier tamaño con tus propios colores y tu texto. Descarga PNG, JPG o WebP, o copia una data URL SVG en línea que no necesita ningún alojamiento de imágenes.
Generador de imágenes placeholder
Indica un ancho, un alto, un fondo, un color de texto y una etiqueta, y este generador dibuja un placeholder en tu navegador. Descárgalo como PNG, JPG o WebP, o copia una pequeña data URL SVG para pegarla directamente en una etiqueta img o en CSS, así tu maqueta nunca depende de un servicio de imágenes de terceros.
Elige el formato según dónde vaya el placeholder
Formato
Ideal para
Notas
Data URL SVG
Prototipos y ejemplos de código
Sin archivo, sin petición, nítido con cualquier zoom
PNG
Archivos de diseño, subidas a un CMS
Sin pérdida, todos los navegadores lo admiten
JPG
Sitios que rechazan PNG
Con pérdida, sin transparencia
WebP
Probar el peso real de la página
Con pérdida en esta herramienta, archivos pequeños
Los servicios de placeholders alojados son prácticos hasta que uno se cae o lo bloquea un filtro de red, y entonces se rompen todas las cajas grises de tu demo. Esta herramienta crea la imagen en local: obtienes un archivo real o una cadena SVG autónoma que vive dentro de tu código.
Elige un tamaño habitual de la lista o escribe tu propio ancho y alto, hasta 4000 píxeles por lado.
Elige los colores del fondo y del texto. Deja la etiqueta vacía para mostrar las dimensiones, o escribe algo como Foto de portada.
La vista previa se dibuja como SVG en tu navegador. Copia la data URL o la etiqueta img ya preparada para tu código.
Para un archivo real, elige PNG, JPG o WebP y descárgalo. Lo codifica el canvas de tu navegador, así que no se sube nada.
Mantén siempre los atributos width y height en el img, incluso en los placeholders, para que la maquetación no salte cuando llegue la foto real.
Etiqueta los placeholders con lo que debe ir ahí, como Foto del equipo o Producto de frente, para que el responsable del contenido sepa qué aportar.
Usa un fondo gris medio con texto más oscuro; las cajas blancas puras desaparecen sobre las secciones blancas de la página.
Sustituye todos los placeholders antes del lanzamiento. Busca data:image/svg+xml en tu código para encontrar los que se hayan quedado.
Preguntas frecuentes
¿Caducan alguna vez estas imágenes?
No. Un archivo descargado es tuyo, y una data URL SVG es solo texto dentro de tu página, así que no hay ningún servidor detrás que pueda desaparecer.
¿Por qué la descarga en JPG no tiene transparencia?
JPEG no tiene canal alfa. De todos modos, todos los placeholders de aquí tienen un fondo sólido, pero elige PNG o WebP si vas a editar el archivo después y necesitas una zona transparente.
¿Puedo usar la data URL SVG en CSS?
Sí. Envuélvela en url("...") dentro de background-image. La herramienta ya cambia las comillas dobles por simples y codifica #, < y > para que la cadena funcione dentro de CSS y de atributos HTML.
¿Qué navegadores pueden exportar WebP?
Todos los navegadores están obligados a exportar canvas a image/png, mientras que JPEG y WebP son opcionales. Si un navegador no puede generar WebP, devuelve un PNG sin avisar, y el nombre del archivo aquí lo indicará.
Placeholders que ayudan en lugar de ocultar problemas
Un buen placeholder tiene la misma relación de aspecto que la imagen final. Si la portada va a ser una foto 16:9, haz el prototipo con 1920 por 1080, no con un cuadrado, o la maquetación que apruebes recortará mal después.
Escribe el tamaño previsto en la caja. Así diseñadores, redactores y fotógrafos ven qué entregar sin abrir el código.
Data URLs frente a archivos
Una data URL pone los bytes de la imagen en el propio src. Para un SVG pequeño sale más barato que una petición de red y hace que el fragmento sea portable: lo pegas en cualquier sitio y se muestra.
Para cualquier cosa que vayas a subir a un CMS, guardar en un archivo de diseño o conservar, descarga mejor un archivo real. Las data URLs largas son difíciles de leer en una revisión de código.
Tamaños de placeholder habituales
Preajustes disponibles en el generador
Uso
Ancho
Alto
Tarjeta Open Graph
Portada, 16:9
Miniatura de blog
Publicación cuadrada
Historia vertical
Avatar
Foto de producto, 4:5
Banner leaderboard
Placeholder en una etiqueta img y en CSS
Placeholder SVG en línea, sin petición
La misma caja gris de 640 por 360 usada dos veces: una como origen de imagen y otra como fondo CSS.
Tarjeta Open Graph
Portada, 16:9
Miniatura de blog
Publicación cuadrada
Historia vertical
Avatar
Foto de producto, 4:5
Banner leaderboard
Tu navegador no pudo abrir un canvas.
No se pudo codificar la imagen.
Guardado {name} ({n} KB).
Crea un placeholder
Elige un tamaño, unos colores y una etiqueta opcional. Copia una data URL SVG o una etiqueta img, o descarga un PNG, JPG o WebP creado en tu navegador.