Saltar al contenido

Herramienta

Siguiente pasoQuitar fondo

Cómo funciona

  1. 01

    Elegir la imagen

    Arrastre un archivo o selecciónelo en el dispositivo. PNG, JPG, WebP, AVIF o HEIC hasta 20 MB.

  2. 02

    Leer el mapa

    La capa de color aparece sobre la imagen. Con el control deslizante la hace más o menos visible y la compara con el original.

  3. 03

    Medir y exportar

    Dibuje un rectángulo sobre un elemento clave para el porcentaje. Exporte el PNG superpuesto, el mapa transparente o el JSON.

Privacidad

El cálculo ocurre solo en su dispositivo. Sus imágenes no salen del navegador, no se envían a ningún servidor y se borran al cerrar la pestaña. Así la herramienta encaja con diseños sin publicar, bocetos de anuncios y archivos confidenciales, en el marco del RGPD.

Deje una imagen y vea, como una capa de color, hacia dónde va la mirada en el primer momento. Las zonas cálidas atraen mucho y las frías poco. Sirve para miniaturas, anuncios, cabeceras, logotipos y carteles: ¿el foco cae donde debe? Marque una zona y obtenga su parte de atención en porcentaje. Todo ocurre en el navegador, sin subida.

01: Cómo usarlo

¿Cómo usar esta herramienta?

  1. Elija una imagen o suéltela (PNG, JPG, WebP, AVIF o HEIC hasta 20 MB)
  2. Elija el modelo: Rápida funciona en cualquier dispositivo, Precisa necesita WebGPU. Descarga única y luego en caché
  3. El mapa aparece sobre la imagen. Ajuste la opacidad con el control deslizante
  4. Opcional: dibuje un rectángulo sobre un botón, un logotipo o un rostro para ver el porcentaje
  5. Exporte la superposición en PNG, el mapa transparente en PNG o un JSON para seguir trabajando

¿Qué hace esta herramienta?

La herramienta genera, a partir de una sola imagen, un mapa de calor de atención: una capa de color que predice dónde cae la mirada en los primeros segundos. Las zonas cálidas (rojo, amarillo) significan «atrae mucho» y las frías (azul) significan «tiende a pasar desapercibido». El cálculo corre por completo en su navegador, mediante WebAssembly o WebGPU, con una red neuronal especializada entrenada para predecir la saliencia visual.

Además puede dibujar un rectángulo sobre un elemento importante, un botón, un logotipo o un rostro, y obtener su puntuación de foco: la parte de la atención total prevista que cae en esa zona. Hay tres exportaciones: la imagen superpuesta en PNG, el mapa solo como PNG transparente para seguir en su editor, y un archivo JSON con la puntuación y los puntos más fuertes.

¿Cómo predice la IA la atención?

El sitio al que una persona mira primero es en gran parte previsible. La investigación de la percepción distingue la atención involuntaria (de abajo arriba) de la voluntaria (de arriba abajo). La involuntaria la mueven rasgos de la imagen: contrastes fuertes, zonas claras, bordes, colores y, sobre todo, los rostros atraen la mirada antes de cualquier decisión consciente.

Ese comportamiento de abajo arriba es justo lo que la red aprendió de miles de registros reales de mirada. Recibe su imagen y estima, para cada zona, la probabilidad de una fijación en los primeros segundos. El resultado es un mapa de probabilidad que la herramienta colorea y coloca sobre su imagen. Es una predicción a partir de patrones aprendidos, no la grabación de una persona real.

¿Cuándo son fiables los resultados?

El mapa describe bien la primera mirada refleja sobre una imagen fija: muestra qué elementos destacan y cuáles se pierden. Para una miniatura, un anuncio o una composición suelta es un indicador rápido y gratuito, donde un pretest saldría caro.

Los límites son claros. El modelo solo predice la atención involuntaria del primer instante. No sabe qué busca alguien a propósito, qué lee, qué marca prefiere ni el orden de su mirada. Tampoco separa por público, edad o conocimiento previo. El mapa es, por tanto, una predicción de la primera mirada, no un seguimiento ocular real ni un sustituto de pruebas con usuarios. Por el artículo 50 del reglamento europeo de IA, la herramienta muestra este aviso de forma permanente bajo cada resultado: use el mapa como indicador, no como prueba.

¿Para qué sirve un mapa de calor de atención?

El uso más frecuente es componer piezas en las que cuenta la primera impresión. En una miniatura comprueba si el rostro y el título son los puntos calientes, o si un detalle secundario roba la mirada. En un anuncio o una pieza para redes comprueba que el producto y la llamada a la acción reciben atención. En una cabecera dibuja un rectángulo sobre el botón y ve, con la puntuación, si destaca o si queda en una zona fría.

El mapa también sirve para un logotipo, un envase o un cartel: muestra si la marca está en el centro de la atención. La exportación JSON deja los resultados listos para seguir, por ejemplo para documentar varios bocetos o pasar los puntos calientes al paso siguiente.

Privacidad local en el navegador

Las entradas permanecen dentro de la pestaña del navegador. No se envían a servidores de kittokit, no se almacenan y no se usan para seguimiento. Algunas herramientas ML cargan un modelo o un archivo de ejecución la primera vez; esa petición solicita solo la URL del recurso, nunca tu archivo ni tu texto. Al cerrar la página, solo pueden quedar datos de caché del navegador, que puedes borrar en cualquier momento.

Aviso sobre resultados de IA

Esta herramienta crea o evalúa contenido con un modelo de IA. Según el artículo 50 del EU AI Act, el contenido generado o editado con IA debe indicarse de forma transparente cuando se publica. Trata la salida como una estimación, revísala antes de publicarla y no la uses para decisiones críticas sin supervisión profesional.