Generador de imágenes placeholder
Crea una imagen de relleno simple con el tamaño exacto que necesitas y las medidas escritas encima, para maquetas, diseños y pruebas.
Funciona completamente en tu navegador
Déjalo vacío para mostrar el tamaño.
Ancho y alto de 1 a 8000 píxeles, hasta 100 megapíxeles en total. El texto ocupa una sola línea y se ajusta al tamaño.
Cómo crear una imagen placeholder
- Escribe un ancho y un alto, o pulsa un tamaño predefinido como 1200 × 630 para una tarjeta de redes sociales o 300 × 250 para un anuncio.
- Elige los colores de fondo y del texto. Deja el texto vacío para mostrar el tamaño, o escribe tu propia etiqueta.
- Elige PNG, JPEG, WebP o SVG y pulsa Descargar, o copia la imagen como data URI.
Cómo elegir el tamaño de un placeholder
Una imagen placeholder ocupa el lugar de una imagen real mientras armas una página, así que lo útil es que tenga la forma correcta. Los diseños se rompen más por la relación de aspecto que por la resolución: una imagen principal de 16:9 se comporta distinto que un avatar cuadrado aunque ambas sean pequeñas. Escribir el tamaño sobre la imagen permite que cualquiera que vea la maqueta sepa qué medidas necesita cada espacio.
Los tamaños predefinidos cubren medidas que aparecen una y otra vez: 1200 × 630 es la forma que usan la mayoría de las redes sociales para la vista previa de enlaces, 1080 × 1080 una publicación cuadrada, 1920 × 1080 y 1280 × 720 los formatos de video habituales, 300 × 250 y 728 × 90 dos espacios publicitarios estándar, y 150 × 150 un avatar típico.
Para el uso real, recuerda que un placeholder es un color plano. PNG y SVG lo guardan casi sin ocupar espacio, mientras que JPEG en tamaño grande agrega desenfoque alrededor del texto. Si pegas la imagen en el código como data URI, mantenla pequeña: cada byte de la imagen se repite en tu página.
Consejos
- ¿Necesitas la imagen real en ese tamaño? Redimensionar imagen y Recortar imagen ajustan una foto al espacio exacto.
- Para incrustar una imagen terminada como texto, usa Imagen a Base64.
- Elige colores que combinen con el Convertidor de colores y contraste.
Preguntas frecuentes
¿Sale algo de mi dispositivo?
No. Nada de lo que escribes se envía a ningún lado. Tu navegador dibuja la imagen y la descarga se crea en tu dispositivo.
¿Qué formato debo elegir?
SVG ocupa unos pocos cientos de bytes y se ve nítido a cualquier tamaño, así que va bien para diseños web. PNG es exacto y sin pérdida para colores planos. JPEG y WebP generan archivos más livianos en tamaños grandes, y JPEG deja el texto un poco suave. Algunos lugares que aceptan cargas, como muchos campos de un CMS, solo admiten imágenes de mapa de bits, así que ahí usa PNG.
¿Cómo se elige el tamaño del texto?
Automáticamente. El texto se hace lo más grande posible en una sola línea dentro de alrededor del 80 por ciento del ancho y el 40 por ciento del alto, así que tanto un banner ancho como 728 × 90 como uno alto como 160 × 600 se ven bien.
¿Para qué sirve la data URI?
Una data URI es la imagen escrita como texto, para que puedas pegarla directamente en una etiqueta img de HTML o en un fondo CSS sin un archivo aparte. Funciona bien con imágenes pequeñas. Un PNG grande se convierte en una cadena larga que infla tu página, así que la herramienta te avisa cuando el resultado es más grande de lo práctico y no copia nada que supere 1 MB.
¿El SVG necesita fuentes especiales?
No. Usa la fuente sans-serif del sistema, así que se ve un poco distinto en cada dispositivo pero siempre cabe, y el texto se escapa para que caracteres como & y < sean seguros.
¿Cuáles son los límites de tamaño?
Cada lado puede medir de 1 a 8000 píxeles y el total puede llegar a 100 megapíxeles. Las imágenes más grandes tardan más en dibujarse y es posible que algunos programas no las abran.