Generador de imágenes placeholder
Crea imágenes de relleno para mockups, wireframes, espacios publicitarios y pruebas. Elige cualquier ancho y alto, colores de fondo y de texto y una etiqueta, y descarga un PNG, JPG, WebP o SVG, copia un data URI o crea todo un conjunto de tamaños en un solo ZIP.
Última actualización:
Tamaños en lote: crea muchos placeholders en un ZIP
Usa los colores, el texto, la fuente y el formato elegidos arriba. El texto con {w} y {h} se completa para cada tamaño.
Cómo usar Generador de imágenes placeholder
- Introduce el ancho y el alto en píxeles, o haz clic en un tamaño predefinido como 300 × 250 o 1200 × 630.
- Elige los colores y la etiqueta. Deja el texto vacío para mostrar las dimensiones automáticamente.
- Elige el formato: PNG para texto nítido, JPG o WebP para archivos pequeños, SVG para el placeholder escalable más pequeño.
- Descarga la imagen o copia el data URI o la etiqueta img.
- ¿Necesitas muchos tamaños? Abre Tamaños en lote, escríbelos uno por línea o separados por comas y descarga un ZIP.
Tamaños de placeholder comunes
| Uso | Tamaño (px) | Relación de aspecto |
|---|---|---|
| Anuncio rectángulo mediano | 300 × 250 | 6:5 |
| Anuncio leaderboard | 728 × 90 | 8.1:1 |
| Anuncio rascacielos ancho | 160 × 600 | 4:15 |
| Anuncio de media página | 300 × 600 | 1:2 |
| Banner móvil | 320 × 50 | 32:5 |
| Imagen Open Graph / vista previa de enlace | 1200 × 630 | 1.91:1 |
| Publicación cuadrada en redes sociales | 1080 × 1080 | 1:1 |
| Publicación vertical en redes sociales | 1080 × 1350 | 4:5 |
| Historias y video vertical | 1080 × 1920 | 9:16 |
| Miniatura de video | 1280 × 720 | 16:9 |
| Pantalla Full HD o imagen principal | 1920 × 1080 | 16:9 |
¿PNG, JPG, WebP o SVG?
| Formato | Tamaño típico a 1200 × 630 (más con líneas cruzadas) | Elígelo cuando |
|---|---|---|
| SVG | Menos de 1 KB | Incrustas el placeholder en línea o como data URI, o necesitas que escale. |
| PNG | Unos 5–70 KB | Necesitas un mapa de bits real con texto nítido, para subidas o herramientas de diseño. |
| JPG | Unos 15–35 KB | Un sistema solo acepta JPEG, o pruebas flujos de subida de fotos. |
| WebP | Unos 3–15 KB | Pruebas canales de imágenes modernos. Compatible con todos los navegadores actuales. |
Los placeholders de color plano se comprimen muy bien en PNG y WebP. JPG suele ser más grande aquí porque está pensado para fotos, no para colores planos.
Consejos para usar placeholders
- Define siempre también
widthyheighten la etiqueta<img>final. Así se reserva el espacio y se evita el desplazamiento del diseño cuando carga la imagen real. - Usa una etiqueta que describa el contenido ("Foto principal", "Producto 1") para que los revisores sepan qué va ahí. Escribe
{w}y{h}en la etiqueta para que el tamaño siga visible. - Dale a cada tipo de placeholder su propio color para que los wireframes sean más fáciles de leer.
Preguntas frecuentes
¿Qué es una imagen placeholder?
Una imagen placeholder (de marcador de posición) es un gráfico provisional sencillo, normalmente un color sólido con sus dimensiones escritas, que se usa en mockups, wireframes, plantillas y pruebas hasta que la imagen real está lista. Muestra exactamente cuánto espacio ocupará la imagen final.
¿Qué formato debo elegir?
SVG es el más pequeño (unos cientos de bytes) y escala perfectamente, ideal para HTML y CSS en línea. PNG mantiene el texto nítido y admite cualquier tamaño. JPG y WebP generan archivos más pequeños para placeholders grandes del tamaño de una foto. Algunos formularios de subida solo aceptan JPG o PNG.
¿Qué es un data URI y cómo lo uso?
Un data URI incrusta la propia imagen en texto, por ejemplo data:image/svg+xml,... o data:image/png;base64,.... Puedes usarlo como src de una etiqueta img o dentro de url() en CSS sin alojar ningún archivo. Mantén los data URI pequeños; los placeholders SVG son los mejores para esto.
¿Puedo crear imágenes placeholder para tamaños de anuncios?
Sí. Los tamaños predefinidos incluyen los formatos de display IAB habituales, como 300 × 250 (rectángulo mediano), 728 × 90 (leaderboard), 160 × 600 (rascacielos ancho), 300 × 600 (media página) y 320 × 50 (banner móvil). El modo masivo los crea todos a la vez.
¿Hay un límite de tamaño?
Cada lado puede medir hasta 5000 píxeles. Las imágenes rasterizadas muy grandes consumen más memoria, así que la herramienta limita el total a 25 millones de píxeles por imagen. Los archivos SVG siguen siendo diminutos en cualquier tamaño.
¿Necesito enlazar a un servicio externo de placeholders?
No. Enlazar directamente a un servicio de placeholders en línea hace que tu página dependa del servidor de otra persona. Descargar los archivos o usar un data URI mantiene tus mockups funcionando sin conexión y en privado.
¿Se prueban todas las herramientas de FreeToolCabin para comprobar su calidad y precisión?
Sí. Cada herramienta del sitio pasa pruebas automáticas en navegadores reales para comprobar que el resultado es correcto y que no hay errores. Si encuentras un fallo o tienes una sugerencia, escríbenos a [email protected] y lo revisaremos.