Generador de Imágenes de Marcador

Una imagen de marcador de posición es un gráfico de relleno temporal que reserva el espacio exacto que ocupará una foto real antes de que exista el arte final. En lugar de mostrar la foto de un producto o una imagen principal, muestra un color sólido, un degradado o un patrón, normalmente con las dimensiones en píxeles estampadas encima para que puedas confirmar que el espacio se renderiza con el tamaño previsto. Una imagen real transmite contenido y significado; un marcador de posición solo aporta estructura de diseño. Diseñadores y desarrolladores usan marcadores de posición durante mockups, prototipos y páginas sin terminar para que el diseño luzca completo y correctamente proporcionado mientras los recursos definitivos aún se están produciendo. Generarlo con el tamaño final también evita que el contenido salte cuando la imagen real se carga más tarde. Introduce el ancho, el alto, el color y la etiqueta arriba para crear un marcador de posición con el tamaño exacto en segundos.

Cumulative Layout Shift, una de las Core Web Vitals de Google, mide cuánto se mueve inesperadamente el contenido visible mientras carga una página. Una causa habitual son las imágenes sin espacio reservado: el navegador deja una caja de altura cero, renderiza el texto de alrededor y luego empuja todo hacia abajo cuando finalmente llega la imagen. Cargar desde el principio un marcador de posición con el tamaño correcto soluciona esto porque el navegador ya conoce las dimensiones de la caja de la imagen, así que el contenido permanece fijo cuando el archivo definitivo lo sustituye. El mismo efecto se logra definiendo atributos explícitos de width y height, razón por la cual el fragmento HTML listo para copiar de esta herramienta incluye ambos más loading="lazy". Construir diseños con marcadores de posición del tamaño final durante el desarrollo hace que tu puntuación de CLS refleje la realidad de producción y no un hueco temporal. Define tus dimensiones exactas arriba y copia el marcado generado para fijar la caja de la imagen en su lugar.

Las dimensiones habituales para redes sociales y web son fáciles de olvidar de memoria, por eso esta herramienta incluye más de 28 preajustes de tamaño agrupados en Redes Sociales, Web, Impresión y Pantallas. Entre los tamaños más usados están el cuadrado de Instagram de 1080 por 1080 píxeles, la miniatura de YouTube de 1280 por 720, y la imagen Open Graph para compartir de 1200 por 630, que es el estándar para las vistas previas de enlaces en la mayoría de plataformas. Los preajustes de impresión cubren páginas como el A4, y el grupo de Pantallas incluye resoluciones hasta 4K UHD. Un solo clic aplica los valores de píxeles exactos, eliminando las suposiciones y el riesgo de un recorte desajustado por unos pocos píxeles. También puedes bloquear la relación de aspecto para que al ajustar un lado el otro se escale automáticamente. Elige un preajuste arriba y descarga el marcador de posición como PNG, JPG o WebP, o genera un conjunto completo de una sola vez.

Sí. La pestaña de Generación por Lotes te permite enumerar varios tamaños, cada uno con su propia etiqueta, y descargarlos todos en una sola pasada usando tu configuración actual de fondo y texto. Esto es mucho más rápido que recrear cada imagen una por una y mantiene un aspecto coherente en todo el conjunto. Un uso típico es producir marcadores de posición responsivos para un mismo componente, como las variantes de escritorio, tablet y móvil, de modo que cada punto de ruptura tenga un relleno con el tamaño correcto antes de que existan los recursos reales. Como la herramienta dibuja cada imagen de forma local con la API Canvas del navegador, la generación por lotes se ejecuta por completo en tu dispositivo, sin subidas ni registro, y sigue funcionando incluso sin conexión. Configuras el color, el degradado o patrón, el texto superpuesto y el formato de salida una sola vez, y se aplican a todas las imágenes del lote. Abre la pestaña de Generación por Lotes arriba para crear un conjunto responsivo completo en segundos.

Ambas opciones funcionan, y la elección correcta depende de tu flujo de trabajo. Descargar un archivo PNG, JPG o WebP te da un recurso autónomo que vive dentro de tu proyecto, sigue funcionando sin conexión y nunca depende de que un servidor externo permanezca activo. Esto es ideal para mockups definitivos, entregas de diseño y páginas que deben renderizarse de forma fiable. Una URL de marcador de posición alojada es útil para prototipos rápidos en los que prefieres referenciar una imagen en lugar de gestionar archivos; esta herramienta puede construir URLs de solicitud para tres servicios externos, placehold.co, via.placeholder.com y dummyimage.com, así que solo pegas un enlace en vez de un archivo. La contrapartida es que las URLs remotas añaden una solicitud de red y dejan de funcionar si el servicio no está disponible. Para cada imagen, la herramienta también genera fragmentos listos para copiar en HTML, JSX, CSS y Markdown. Elige tu fuente de imagen arriba y luego descarga el archivo o copia la URL generada.