Generador de imágenes placeholder

Cómo crear una imagen placeholder

1. Introduce el Ancho (px) y el Alto (px), de 1 a 10.000 píxeles. La vista previa y su proporción se actualizan mientras escribes.
2. Escribe un Texto, o déjalo vacío para que aparezca el tamaño, por ejemplo «1200×630».
3. Elige el Color de fondo y el Color del texto.
4. Deja el Tamaño de letra (px) en 0 para un tamaño automático que se ajuste a la imagen, o indica un tamaño en píxeles. Elige una Fuente.
5. Elige el Formato: PNG, JPG, WebP o SVG, y haz clic en Descargar imagen.

Para crear muchos tamaños a la vez, abre Lote de tamaños habituales, marca los que necesites (o usa Seleccionar todo / No seleccionar nada) y haz clic en Descargar los tamaños seleccionados (ZIP). Cada imagen usa los colores, la fuente y el formato de arriba; si el texto está vacío, cada imagen muestra su propio tamaño.

Qué formato elegir

• SVG es el más ligero (unos pocos cientos de bytes, sea cual sea el tamaño) y se ve nítido con cualquier zoom. Es ideal para maquetas, prototipos y plantillas HTML. El texto usa una fuente del sistema, así que su aspecto puede variar un poco de un ordenador a otro.
• PNG da píxeles exactos y sin pérdida. Elígelo para herramientas de diseño y cuando se necesite un mapa de bits real.
• JPG genera archivos ligeros en tamaños grandes y se acepta en todas partes, incluidos los gestores de contenidos antiguos.
• WebP es más ligero que PNG y JPG y lo admiten todos los navegadores actuales.

Los formatos de mapa de bits están limitados a unos 16,7 millones de píxeles (por ejemplo, 4096 × 4096), el canvas más grande que pueden codificar los navegadores. SVG no tiene ese límite.

Tamaños habituales del lote

Los tamaños de anuncio siguen las unidades estándar de la IAB que usan la mayoría de las redes publicitarias; los tamaños para redes sociales corresponden a las recomendaciones de las principales plataformas.

¿Para qué sirven las imágenes placeholder?

Un placeholder (imagen de relleno o marcador de posición) reserva exactamente el espacio que ocupará una imagen antes de que exista la definitiva. Así, diseñadores y desarrolladores pueden comprobar una maqueta, probar los puntos de corte responsive o enseñar a un cliente dónde irán los elementos visuales sin buscar fotos de stock. Imprimir las medidas en la imagen deja claro qué tamaño espera cada hueco, y un gris neutro mantiene la atención en la maqueta y no en el contenido.

Como esta herramienta crea archivos reales, puedes usarlos sin conexión, añadirlos a un repositorio o llevarlos a una herramienta de diseño, sin depender de un servicio externo de placeholders que podría caerse o rastrear a los visitantes.