Generador de imágenes de relleno, crea imágenes de prueba en tu navegador
Genera imágenes de relleno íntegramente en tu navegador. Define tamaño, colores, texto y formato (PNG, JPEG, WebP o SVG) y descarga o copia un data URI.
Cargando Generador de imágenes de relleno, crea imágenes de prueba en tu navegador… Si no ocurre nada, activa JavaScript.
Una imagen de relleno (placeholder) es un gráfico provisional que ocupa el lugar de las fotos e ilustraciones definitivas mientras se diseña o desarrolla una página. Este generador las crea al instante y por completo dentro de tu navegador: elige un ancho y un alto (de 1 a 4000 píxeles, con preajustes de un clic para tamaños comunes como 1920×1080 o 1200×630), escoge un color de fondo y de texto, escribe tu propia etiqueta si quieres y descarga el resultado como PNG, JPEG, WebP o SVG. Por defecto, la imagen lleva impresas sus propias dimensiones, la convención en la que confían los desarrolladores para identificar los huecos de un diseño de un vistazo.
Preguntas frecuentes
¿Para qué se usa una imagen de relleno?
¿Esta herramienta contacta con un servicio como placehold.co?
¿Qué formato de salida debería elegir?
¿Qué es un data URI y cuándo conviene usarlo?
¿Por qué la herramienta me avisa de que mi data URI es grande?
¿Cuál es el tamaño máximo de imagen que puedo generar?
¿Puedo poner mi propio texto en el placeholder?
¿Cómo se elige el tamaño de fuente en modo automático?
¿Por qué el SVG suele ser mejor que el PNG para placeholders?
¿Puedo usar las imágenes generadas con fines comerciales?
Acerca de Generador de imágenes de relleno, crea imágenes de prueba en tu navegador
La mayoría de los servicios de placeholders funcionan solicitando una imagen a un servidor remoto, lo que significa que cada maqueta que abres dispara peticiones de red, se rompe cuando estás sin conexión, ralentiza el desarrollo local y filtra las URL de tu trabajo en curso a un tercero. Esta herramienta hace el mismo trabajo con cero participación de la red: la imagen se dibuja en un lienzo (o se construye como marcado SVG) directamente en tu dispositivo. No se solicita, sube ni registra nada en ninguna parte, las vistas previas se muestran al instante y el generador sigue funcionando en un avión, detrás de un cortafuegos corporativo estricto o en un entorno de demostración sin conexión.
Además de descargar un archivo, puedes copiar la imagen como data URI y pegarla directamente en un atributo src o en un background-image de CSS, lo que mantiene los prototipos rápidos totalmente autocontenidos, sin archivos de recursos que gestionar. La herramienta te avisa cuando un data URI se está haciendo grande, porque base64 infla el tamaño alrededor de un tercio y los URI muy grandes hinchan el HTML y las hojas de estilo. Si eliges la salida SVG, también puedes copiar el propio código SVG, que suele ser la opción más pequeña y nítida, ya que escala a cualquier resolución y a menudo pesa solo unos cientos de bytes.
Los usos habituales incluyen wireframes y maquetas de diseño, datos de ejemplo para CMS, pruebas unitarias y de maquetación que necesitan una imagen de tamaño exacto, sustitutos de tarjetas Open Graph y redes sociales (el preajuste 1200×630), miniaturas de vídeo (1920×1080) y cuadrículas de comercio electrónico a la espera de la fotografía de producto. El tamaño de fuente se calcula automáticamente para que la etiqueta siga siendo legible en cualquier dimensión, o puedes fijarlo manualmente para un aspecto concreto. Cuando lleguen los recursos reales, el redimensionador de imágenes y el generador de favicons de este sitio te ayudan a prepararlos, y el generador de degradados puede producir fondos provisionales más decorativos.
Lorem Ipsum para imágenes: cómo los placeholders se convirtieron en un básico de la web
Mucho antes de la web, los diseñadores de imprenta marcaban las maquetas sin terminar con las letras FPO, abreviatura de "for position only" (solo para posición), estampadas sobre el material gráfico provisional para que nadie enviara por error una imagen de borrador a la imprenta. El texto recibía el mismo tratamiento mediante el "greeking" y el famoso pasaje Lorem Ipsum, latín revuelto usado como relleno desde que los tipógrafos lo popularizaron en los años 60 a partir de un texto de Cicerón del siglo I. Cuando el diseño pasó a las pantallas, la caja gris FPO lo acompañó y simplemente aprendió a describirse a sí misma, con sus dimensiones en píxeles impresas en el centro.
La web convirtió los placeholders en un servicio. A principios de la década de 2010 apareció una oleada de pequeños sitios de propósito único donde la propia URL era la API: placehold.it servía cajas grises del tamaño que escribieras en la dirección, placekitten.com devolvía fotografías de gatitos recortadas a las dimensiones solicitadas, y lorempixel, placebear, fillmurray (fotos de Bill Murray) y placecage (Nicolas Cage) siguieron la misma receta. Los placeholders de gatitos y famosos se convirtieron en una broma recurrente del trabajo de agencia, y más de un equipo tiene una historia sobre una foto de gato o de Nicolas Cage que sobrevivió por accidente hasta una demo con el cliente o un lanzamiento en producción.
Esa comodidad tenía un coste oculto: todo placeholder remoto es una dependencia de red. Cuando el popular servicio lorempixel se volvió inestable y placehold.it cambió de dominio, incontables maquetas, tutoriales e incluso bases de código publicadas se llenaron de imágenes rotas, un pequeño recordatorio de que los recursos enlazados en caliente se pudren. La práctica moderna ha vuelto hacia los placeholders autocontenidos, pequeños SVG en línea, data URI en base64 y archivos generados localmente, que es exactamente el enfoque de esta herramienta: la clásica caja gris etiquetada con sus dimensiones, pero sin el servidor.