Captura de pantalla retina y por qué el texto de una grabación se ve borroso

Una página web se maqueta en píxeles CSS y la pantalla la dibuja en píxeles físicos. La relación entre ambos es el device pixel ratio: 1 en una pantalla clásica, 2 en lo que Apple llama Retina y la web HiDPI, 3 en muchos móviles. Con una relación de 2, una página de 1280 píxeles de ancho se dibuja con 2560 píxeles físicos, así que cada letra tiene cuatro veces más píxeles para definir su forma.

Una captura retina conserva esos píxeles. Una captura a relación 1 de la misma página tira tres cuartas partes, y ningún paso posterior puede recuperarlas. Esa es toda la idea: la nitidez se decide al capturar, no al exportar.

Si el formato en sí es nuevo para ti, la entrada qué es un screencast explica lo básico antes de entrar en píxeles.

Hemos perseguido el texto borroso en muchos renders. Estas son las causas que encontramos y lo que hace nuestro sistema con cada una.

La quinta fila sorprende. La medimos en webs de marketing reales: maquetado a los 1920 píxeles completos, un texto de 14 píxeles ocupaba el 1,3 % de la altura del encuadre; maquetado a 1280 píxeles y ampliado, el mismo texto ocupaba el 1,94 %, la mitad más grande, sin tocar el diseño de escritorio de la página. Un texto nítido pero demasiado pequeño sigue sin leerse.

Cada escena grabada produce dos cosas, y no son intercambiables.

Un clip de vídeo. El navegador graba la escena mientras sucede: el cursor que se desliza, el clic, el desplazamiento, la página que responde. Esa grabación se hace al tamaño de la ventana, 1280 píxeles de ancho para un vídeo 16:9 y 414 para uno 9:16. Probamos a pedir al grabador el tamaño completo del vídeo: no entrega la imagen retina, coloca la página en un marco más grande con bandas. Comparado con la página tal como se muestra, grabar al tamaño de la ventana y ampliar dio un SSIM de 0,93; grabar al tamaño del vídeo, 0,65 (0,89 frente a 0,61 en vertical). Así que el clip se graba al tamaño de la ventana y se amplía una sola vez, con cuidado, a 1920×1080 o 1080×1920.

Una imagen retina fija. Al final de la acción, con el cursor oculto, hacemos una captura a densidad completa: 2× en escritorio, es decir 2560 píxeles de ancho antes de bajar a 1920, y 3× en la ventana de móvil. En una escena de desplazamiento es la página entera. Esa imagen es la miniatura de la escena, el fondo desenfocado detrás de las escenas animadas posteriores y la imagen sobre la que se reproduce la escena si su clip no se puede recortar bien. Como lleva más píxeles de los que muestra el encuadre, la cámara puede acercarse sin perder nitidez.

Las reglas de cámara son las mismas para los dos. En un vídeo de escritorio, una escena que apunta a una tarjeta o a un botón encuadra sobre él, hasta unas 1,9× para un elemento de ese tamaño, y luego se queda quieta; una sección a todo el ancho no recibe zoom, porque ya llena el encuadre. Un vídeo vertical nunca se amplía: la maquetación móvil ya ocupa todo el ancho y cualquier zoom la recortaría. Más sobre formatos en la guía de relación de aspecto.

Algunas páginas perdonan una grabación blanda: un titular de 60 píxeles se lee con cualquier calidad. HIBIKISHOP PC, no. Es una base de datos de precios de photocards de K-pop y su página es una cuadrícula de tarjetas pequeñas, cada una con grupo, miembro, álbum y precio de mercado. Nuestro vídeo de 44 segundos, en 16:9, empieza con «Still losing track of your K-Pop photocard prices?» y sigue con la búsqueda entre 16.238 tarjetas por grupo, miembro o álbum, los cambios diarios de precio sacados de Pocamarket y una tarjeta que subió un 486 %.

Cada una de esas afirmaciones es una cifra impresa en pequeño en la página. Es justo el caso para el que existe la captura retina: si el espectador no puede leer la tarjeta bajo la locución, la locución le pide que se fíe de su palabra. Dos decisiones sostienen una página así. La ventana de 1280 píxeles hace que el texto de la cuadrícula llegue más grande al encuadre que una maquetación a todo el ancho. Y cuando una escena apunta a una tarjeta en vez de a toda la cuadrícula, la cámara tiene margen para encuadrarla y mantenerse, así que el precio se lee en un móvil.

Si grabas una página así, apunta en cada escena a una tarjeta, una fila o un filtro, no a la cuadrícula entera. Una cuadrícula grabada de lejos es textura; una tarjeta grabada de cerca es un dato.

Si grabas tu propia pantalla, se aplican las mismas reglas.

O sáltate la grabación: pega la URL y grabamos la página con estos ajustes ya aplicados, en unos 10 minutos (mira de web a vídeo). La captura retina no es una opción de pago: así se hace cada vídeo, incluido el primero gratis de cualquier web; los planes están en precios. Las ventajas e inconvenientes de cada camino están en screencasts automáticos o manuales y en PageToVid frente a los grabadores de pantalla.