Cómo anotar capturas de pantalla de una web (Mac, Windows y online)

Saber anotar capturas de pantalla bien ahorra más tiempo que elegir una herramienta u otra. Una captura de una web con un recuadro rojo y una frase como «el logo se monta sobre el menú en pantallas de 1366 px» se arregla el mismo día; una llena de garabatos con «mira el adjunto» recibe una respuesta preguntando qué querías decir. Windows, macOS y los navegadores principales ya traen todo lo necesario para capturar y marcar una página; lo que decide que se arregle es cómo señalas el problema.

¿Qué es anotar una captura de pantalla?

Anotar una captura de pantalla es añadir marcas visuales como flechas, recuadros, resaltados y texto a una imagen de la pantalla para que quien la recibe vea exactamente a qué te refieres. En trabajo web, la captura anotada suele ser el núcleo de un aviso de error o de una petición de cambio de diseño, y va a alguien que no estaba mirando tu pantalla cuando viste el problema.

La anotación solo hace la mitad del trabajo. La otra mitad es el contexto: qué página, qué navegador, qué tamaño de pantalla. Tenlo en cuenta en las opciones de abajo, porque algunas recogen ese contexto por ti y la mayoría no.

¿Cómo se anota una captura de pantalla en Windows?

Pulsa Windows + Mayúsculas + S, arrastra sobre la zona que quieras y haz clic en la notificación para abrir la captura en Recortes. Su editor tiene lápiz, resaltador, formas como flechas y rectángulos, borrador, recorte y deshacer. Guarda la imagen o pégala directamente en un correo, un chat o una tarea. No hay que instalar nada.

La ayuda de Recortes de Microsoft explica todas las opciones. Recortes basta si reportas un error de vez en cuando y eres tú quien encuentra los problemas. Lo que no hace: guardar la URL de la página, el navegador ni el tamaño de pantalla, así que tienes que escribirlos tú debajo de la imagen.

¿Cómo se anota una captura de pantalla en Mac?

Pulsa Mayúsculas + Comando + 4 para seleccionar una zona, o Mayúsculas + 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 Marcación, donde puedes dibujar, añadir formas, flechas y texto, resaltar y recortar antes de guardar o arrastrar la imagen adonde tenga que ir.

La guía de Apple recoge todos los atajos. Igual que Recortes, Marcación es gratis y sirve para un uso puntual, y tampoco sabe nada de la página que has capturado: añade la URL y el navegador a mano.

¿Cómo se captura y se anota una página web entera?

Captura la página completa con el navegador y después anota la imagen con cualquier editor. Firefox y Microsoft Edge tienen una opción de página completa en sus herramientas de captura, y Chrome puede hacer una captura a tamaño completo desde las herramientas de desarrollo. Las capturas de página entera sirven para comentar espaciados o maquetación a lo largo de una página larga.

Fuentes: la ayuda de capturas de Firefox, la documentación del menú de comandos de Chrome y la herramienta integrada de Edge, revisadas en octubre de 2026. Las opciones de anotación de Edge cambian entre versiones, así que mira lo que te aparece a ti.

¿Se puede anotar una captura online o en Chrome?

Sí, de dos formas. Las extensiones del navegador y las herramientas de anotación web permiten capturar o subir una captura, marcarla en el navegador y compartir un enlace. Un widget de feedback instalado en la propia web va más allá: quien revisa pulsa un botón en la página, la anota ahí mismo y el aviso llega con la URL y los datos del navegador.

Las categorías, a 2026:

• Apps de captura de escritorio: herramientas gratuitas de código abierto en Windows y apps de pago en Mac y Windows añaden desenfoque, pasos numerados, captura con scroll y enlaces en la nube. Útiles para un equipo que hace decenas de capturas a la semana; cada persona necesita la app instalada.
• Extensiones y anotadores web: capturas o pegas una imagen, la anotas en una pestaña y compartes un enlace. Rápido, pero cada persona que revisa tiene que instalar o encontrar la herramienta, y la URL y el navegador se siguen escribiendo a mano.
• Widgets de feedback en la web: un script en la web muestra un botón de feedback en todas las páginas. Nadie instala nada, y la captura, el comentario, la URL y los datos del navegador llegan juntos a un panel o a tu gestor de proyectos.

Muchas agencias usan dos: una app de escritorio para el trabajo interno y un widget para las revisiones con clientes. Para la comparativa completa, mira cómo elegir una herramienta de feedback visual.

¿Cómo se anota una captura de una web para que se arregle?

Captura lo suficiente de la página para orientarse, pon una marca sobre un problema, etiquétala con qué falla y qué esperabas, usa los colores con criterio, oculta los datos privados y adjunta la URL, el navegador y el tamaño de pantalla. Un problema por captura: quien desarrolla corrige y cierra incidencias de una en una, y cinco marcas en una imagen suelen acabar con cuatro arregladas y una olvidada.

• Captura la zona adecuada: incluye la cabecera o el título de la sección para orientarse, no tu barra de marcadores y treinta pestañas. Si el problema depende del ancho de pantalla, dilo.
• Una marca por problema: un rectángulo o una flecha. Tres problemas son tres capturas.
• Una etiqueta corta: «El texto del botón se corta, debería decir "Reservar llamada"», no «esto», «arreglar» ni «??».
• Colores con criterio: rojo para errores, otro color para sugerencias. No pongas resaltador sobre el texto que quieres que se lea.
• Datos privados ocultos: desenfoca o recorta correos, números de pedido y datos personales antes de enviar.
• Contexto adjunto: URL, navegador y versión, sistema operativo y tamaño de pantalla. Los widgets lo añaden solos; con otras herramientas, escríbelo debajo de la imagen.

Ejemplo malo: una captura de pantalla completa con tres círculos rojos, dos flechas y un «?!» garabateado, enviada por correo con el asunto «web».

Ejemplo bueno:

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

Quien desarrolla puede abrir esa URL al mismo tamaño de pantalla y ver el problema en un minuto. Para todos los campos, usa nuestra plantilla de reporte de errores.

¿Cómo llegan las capturas anotadas al equipo de desarrollo?

Pactad un único sitio al que vayan todas las capturas: una tarea en el gestor de proyectos del equipo, una por incidencia, o un panel de feedback compartido con estados. El chat y el correo sirven para una pregunta suelta, pero una ronda de revisión con cuarenta comentarios se convierte en un problema de búsqueda, y las capturas en la carpeta de Descargas de alguien no ayudan a nadie.

Así lo resuelve GiveFeedback.io, paso a paso:

1. Instalar: pega un script en el <head> de la web (en la ayuda hay guías para WordPress, Shopify, Wix, Squarespace, PrestaShop y Google Tag Manager).
2. Pulsar: aparece un botón «Give Feedback» en la web; el cliente lo pulsa, sin cuenta.
3. Capturar: en un ordenador el navegador pide permiso para capturar la pestaña (en el móvil no hace falta) y se captura la parte visible de la página.
4. Anotar: el cliente marca con flechas, rectángulos, elipses, texto, lápiz o resaltador, en cinco colores, y añade un título, una descripción y un tipo, como Bug.
5. Entregar: el aviso llega con la URL, la resolución de pantalla, el sistema operativo, el navegador y su versión, el idioma y la zona horaria, y puede crearse como incidencia en Jira, tarjeta en Trello, tarea en Asana, ClickUp o Wrike, elemento en monday.com, página en Notion, mensaje en Slack o Discord, o email a tu equipo.

Si solo te quedas con una 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.