Cómo hacer capturas de pantalla en ultra alta resolución en Chrome (4K, 8K, …)

Una captura de pantalla de mi sitio web en resolución 8K (abierta en un visor de imágenes)

Como editor, creador de vídeos o desarrollador web puede necesitar capturas de pantalla de un sitio web, que tengan una resolución superior a la de su monitor físico. Por ejemplo, si tienes un monitor de 1920 x 1080 (Full HD), pero quieres que tus capturas de pantalla estén en 4K (3840 x 2160) o incluso en 8K (7680 x 4320).

Con los métodos tradicionales para hacer una captura de pantalla, como Snipping Tool, sin embargo, sólo puedes hacer capturas que tengan la misma resolución que tu monitor. Pero el propio Google Chrome tiene una funcionalidad incorporada para capturar pantallas de mayor resolución. En el siguiente tutorial te mostraré cómo hacer uso de ella:

Instrucciones

Los pasos 3, 4 y 5 sólo deben hacerse una vez. Para la segunda vez el proceso será mucho más corto.

Paso 1:
Abre la página web que quieres capturar en una pestaña de Chrome y pulsa F12 en tu teclado. Esto abrirá las herramientas para desarrolladores. Todo el código y las cosas que aparecen pueden parecerte intimidantes si no estás familiarizado con el desarrollo web, pero no te preocupes. No nos vamos a meter con eso y no puedes romper nada.

Herramientas de desarrollo en Google Chrome

Paso 2:
Haz clic en el icono «Alternar barra de dispositivos» en la esquina superior izquierda del panel de desarrolladores.

Cómo abrir la barra de herramientas de dispositivos en Google Chrome

La vista que aparece ahora es un modo que ayuda a los desarrolladores web a probar sus sitios web en diferentes tamaños de pantalla. El tamaño de pantalla por defecto es «Responsive» pero también se pueden elegir otros tipos de pantalla en el menú desplegable.

La vista previa de dispositivos de las herramientas para desarrolladores de Google Chrome

Paso 3:
Sin embargo, no utilizaremos ninguno de los preajustes sino que crearemos nuestro propio tipo de pantalla. Abre el menú desplegable del tipo de pantalla y selecciona «Editar…».

Menú desplegable del dispositivo en las herramientas para desarrolladores de Google Chrome.

Paso 4:
Aparecerá una nueva barra lateral en la que se enumeran varios modelos de teléfonos que se pueden utilizar como tipos de pantalla. Sin embargo, podemos ignorarlos y, en su lugar, hacer clic en el botón «Añadir dispositivo personalizado…».

Añadir un dispositivo personalizado en las herramientas para desarrolladores de Google Chrome

Paso 5:
Ahora rellena los detalles del nuevo dispositivo de pantalla. Elige un nombre como «Captura de pantalla de alta resolución» y elige 1920 x 1080 como resolución de pantalla. No te preocupes, esta no será la resolución de nuestras capturas de pantalla, sino que sólo determina el tamaño del texto y los elementos de la web. Las capturas de pantalla tendrán una resolución mucho mayor.
Ahora viene la parte importante: La elección del ratio de píxeles del dispositivo (DPR). El DPR determina la resolución de nuestras capturas de pantalla de la siguiente manera:
Ancho de la pantalla = 1920 * DPR
Altura de la pantalla = 1080 * DPR
Así que el DPR actúa como un multiplicador de la resolución. Si elegimos que el DPR sea 4,0 por ejemplo, la resolución de la captura de pantalla será:
Ancho: 1920 * 4 = 7680 Píxeles
Altura: 1080 * 4 = 4320 Píxeles
que es la resolución de 8K. Por último, cambia el tipo de dispositivo de «Móvil» a «Escritorio» y haz clic en el botón «Añadir» para crear tu dispositivo de pantalla.

Cómo configurar un dispositivo personalizado en las herramientas para desarrolladores de Google Chrome

Paso 6:
Ahora selecciona tu nuevo dispositivo en el menú desplegable del tipo de pantalla. Esto renderizará la web con las propiedades del dispositivo.

Seleccionando el dispositivo personalizado recién creado para su previsualización en las herramientas para desarrolladores de Google Chrome

Paso 7:
Para hacer la captura de pantalla, haz clic en los tres puntos de la parte superior derecha y selecciona «Capturar pantalla».

Capturar una captura de pantalla en alta resolución con las herramientas para desarrolladores de Google Chrome

Dependiendo de tu máquina, Chrome tardará varios segundos en renderizar la captura de pantalla. Cuando todo haya terminado, la captura de pantalla se guardará en tu carpeta de descargas.

La captura de pantalla capturada se está descargando.

Ya está!

Acabas de crear una captura de pantalla de 8K de un sitio web. Comprueba las propiedades de la imagen si no me crees. O descarga la captura de pantalla aquí.

Propiedades de la imagen de la captura de pantalla de alta resolución, que acabo de tomar

El dispositivo de pantalla que has creado, se guardará en tu navegador y no tendrás que volver a crearlo cada vez. La próxima vez que quieras hacer una captura de pantalla de alta resolución, sólo tienes que pulsar F12, hacer clic en el icono «Alternar barra de dispositivos», seleccionar tu dispositivo de captura de pantalla y pulsar «Capturar pantalla». Es cuestión de 10 segundos!

Bonus

Si en lugar de eso seleccionas «Capturar pantalla a tamaño completo» en el menú, se creará una captura de pantalla de todo el sitio web (desde la cabecera hasta el pie). Esto es útil, cuando quieres archivar cómo se veía un sitio web en un momento determinado.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *