Cómo anotar capturas de pantalla de una web (y enviarlas)

Saber anotar capturas de pantalla de una web bien hechas ahorra más tiempo que elegir una herramienta u otra. Una captura con un recuadro rojo y la frase «el logo pisa el menú en pantallas de 1366 px» se arregla el mismo día; una captura llena de garabatos con un «mira lo adjunto» acaba en otro correo preguntando qué querías decir. En esta guía verás las cuatro formas de anotar capturas (herramientas del sistema, del navegador, apps dedicadas y widgets de feedback), cuándo conviene cada una y cómo es una buena anotación.

Qué es anotar una captura de pantalla

Anotar una captura de pantalla es añadir marcas visuales (flechas, recuadros, resaltados, texto) a una imagen de la pantalla para que quien la reciba vea exactamente a qué te refieres. En proyectos web, la captura anotada suele ser el centro de un informe de bug o de una petición de cambio de diseño, y la recibe alguien que no estaba mirando tu pantalla cuando viste el problema.

La anotación es solo la mitad. La otra mitad es el contexto: qué página, qué navegador, qué tamaño de pantalla. Tenlo presente al comparar herramientas, porque unas lo recogen solas y otras no.

Opción 1: herramientas del sistema (gratis y ya instaladas)

Windows: Recortes

Pulsa Win+Mayús+S, selecciona la zona y haz clic en la notificación para abrir la captura en Recortes (Snipping Tool). El editor tiene lápiz, marcador, formas como flechas y rectángulos, borrador, recorte y deshacer, según la ayuda de Microsoft. Guarda la imagen o pégala directamente en un correo o en el chat.

Mac: Captura de pantalla y Markup

Pulsa Mayús-Comando-4 para seleccionar una zona (o Mayús-Comando-5 para abrir la app Captura de pantalla con más opciones) y haz clic en la miniatura que aparece en la esquina. Se abre Markup, donde puedes dibujar, añadir formas, flechas y texto, y resaltar. La guía de Apple recoge todos los atajos.

Cuándo conviene: reportas algún error de vez en cuando, eres tú quien encuentra los fallos y no te importa escribir a mano la URL y el navegador.

Límites: cada captura hay que guardarla, adjuntarla y explicarla a mano, y nada registra la URL ni el navegador. Los clientes casi nunca lo hacen de forma constante.

Opción 2: capturas desde el navegador

Los navegadores capturan algo que las herramientas del sistema no: la página completa, de arriba abajo.

Fuentes: soporte de Mozilla y la herramienta de captura de Microsoft Edge, revisadas en octubre de 2026. Las opciones de marcado de Edge han cambiado entre versiones, así que comprueba lo que te aparece.

Cuándo conviene: necesitas toda la página en una imagen, por ejemplo para comentar espaciados entre secciones o enviar al cliente una prueba completa. Captúrala en el navegador y anótala después con la herramienta del sistema o una de las apps siguientes.

Opción 3: apps de captura y anotación

Son más rápidas si haces capturas a diario, añaden desenfoque, pasos numerados o enlaces en la nube, y algunas son gratis.

Cuándo conviene: tú o tu equipo hacéis decenas de capturas a la semana, o necesitas desenfocar datos de clientes antes de enviar una imagen.

Límites: cada persona que reporta necesita instalar la app y aprender a usarla. Para tu equipo, perfecto. Para un cliente que revisa una web cada dos años, no.

Opción 4: widgets de feedback en la propia web

Un widget de feedback es un pequeño script que añades a la web y que muestra un botón de feedback en todas las páginas. Quien revisa hace clic, el widget captura la página, la anota ahí mismo y la envía. Captura, comentario, URL y datos del navegador llegan juntos a un panel o a tu herramienta de gestión de proyectos.

Así funciona GiveFeedback.io:

1. Pegas un script en el <head> de la web (hay guías de instalación para WordPress, Shopify, Wix, Squarespace y otros).
2. Aparece un botón «Give Feedback» en la web. El cliente hace clic, sin crearse ninguna cuenta.
3. El navegador pide permiso para capturar la pestaña y se captura la parte visible de la página.
4. El cliente la anota con flechas, rectángulos, elipses, texto, lápiz o marcador, en cinco colores, y añade título, descripción y tipo (Bug, Propuesta, etc.).
5. El informe llega con la URL, resolución de pantalla, sistema operativo, navegador y versión, idioma y zona horaria, listo para enviarse a Notion o Asana.

Cuándo conviene: clientes, testers o compañeros no técnicos revisan una web durante el diseño, el desarrollo o antes del lanzamiento. Recibes informes homogéneos sin enseñar a nadie a usar una app de capturas.

Límites, con sinceridad: GiveFeedback.io captura la parte visible de la pantalla, no la página completa; no tiene herramienta de desenfoque, ni graba vídeo ni registros de consola. En el plan gratuito las capturas llevan marca de agua. El widget está en inglés, aunque la app tiene versión en español. Si lo que necesitas es depurar errores de JavaScript, te irá mejor una herramienta con captura de consola; comparamos varias en nuestra guía de herramientas de feedback visual web.

Qué opción te conviene

Muchas agencias usan dos: una app para el trabajo interno y un widget para las revisiones con clientes.

Cómo anotar una captura para que el fallo se arregle

Estas reglas importan más que la herramienta.

1. Captura la zona justa

Incluye lo suficiente para orientarse (la cabecera o el título de la sección), pero no toda la pantalla con la barra de marcadores y 30 pestañas abiertas. Si el problema depende del ancho de pantalla, indícalo.

2. Una marca por problema

Un rectángulo o una flecha. Si ves tres problemas en la misma pantalla, envía tres informes: los desarrolladores arreglan y cierran incidencias de una en una, y una captura con cinco problemas numerados suele acabar con cuatro arreglados y uno olvidado.

3. Una frase en la imagen o en el título

Escribe qué falla y qué esperabas: «El texto del botón se corta, debería decir "Reserva una llamada"». No «esto», no «arreglar», no «??».

4. Usa el color con intención

Rojo para errores y otro color para sugerencias, siempre igual. Evita el marcador encima del texto que quieres que se lea: puede tapar justo lo que señalas.

5. Oculta los datos privados

Si la página muestra correos de clientes, números de pedido o datos personales, desenfócalos o recórtalos antes de enviar. Si tu herramienta no desenfoca, recorta.

6. Añade el contexto

URL, navegador y versión, sistema operativo y tamaño de pantalla. Los widgets de feedback lo añaden solos; con otras herramientas, escríbelo debajo de la imagen.

Ejemplo malo y ejemplo bueno

Malo: una captura de toda la pantalla con tres círculos rojos, dos flechas y un «¿¡!?» garabateado, enviada por correo con el asunto «web».

Bueno:

Título: El botón de enviar del formulario de contacto pisa el pie en móvil Anotación: un rectángulo rojo alrededor del botón y del pie, con la etiqueta «pisa el pie» Esperado: 24 px de separación entre botón y pie, como en el diseño URL: https://staging.ejemplo.es/contacto/Entorno: Chrome 129, Android 14, 412×915

Con eso, el desarrollador abre la URL con el mismo tamaño de pantalla y ve el fallo en un minuto. Si quieres una plantilla completa, mira cómo escribir un informe de bugs.

Cómo hacer llegar la captura al desarrollador

Una captura anotada que se queda en la carpeta de Descargas no sirve de nada. Acordad un único sitio al que van todas:

• Vuestra herramienta de tareas. Adjunta la imagen a una tarea en Asana, Notion, Jira o similar, una tarea por problema. Tienes guías para llevar capturas anotadas a Asana y gestionar el feedback web en Notion.
• Un panel de feedback compartido. Widgets como GiveFeedback.io guardan cada informe en una lista con estado (abierto, resuelto, archivado), para que nada se pierda en hilos de correo.
• Ni WhatsApp ni el correo. Sirven para una duda puntual. En una ronda de revisión con 40 comentarios se convierten en un problema de búsqueda.

Si te quedas con una sola idea: un problema, una marca, una frase, más la URL y el navegador. Elige la herramienta que se lo ponga más fácil a quien reporta, que en las revisiones con clientes suele ser la que no tienen que instalar. Puedes probar GiveFeedback.io gratis en tu próximo proyecto y ver si encaja.