Come fare screenshot ad altissima risoluzione in Chrome (4K, 8K, …)

Uno screenshot del mio sito web in risoluzione 8K (aperto in un visualizzatore di immagini)

Come editore, creatore di video o sviluppatore web potresti aver bisogno di screenshot di un sito web, che hanno una risoluzione più alta del tuo monitor fisico. Per esempio se avete un monitor 1920 x 1080 (full HD), ma volete che i vostri screenshot siano in 4K (3840 x 2160) o addirittura 8K (7680 x 4320).

Con i metodi tradizionali per fare uno screenshot come Snipping Tool, tuttavia, potete solo prendere screenshot che hanno la stessa risoluzione del vostro monitor. Ma Google Chrome stesso ha una funzionalità integrata per catturare screenshot a risoluzione più alta. Nel seguente tutorial vi mostrerò come utilizzarla:

Istruzioni

I passi 3, 4 e 5 devono essere fatti solo una volta. Per la seconda volta il processo sarà molto più breve.

Step 1:
Apri il sito web che vuoi screenshottare in una scheda di Chrome e premi F12 sulla tua tastiera. Questo aprirà gli strumenti di sviluppo. Tutto il codice e la roba che appare potrebbe sembrarti intimidatorio se non hai familiarità con lo sviluppo web, ma non preoccuparti. Non ci incasineremo e non potrai rompere nulla.

Strumenti per sviluppatori in Google Chrome

Step 2:
Clicca l’icona “Toggle device bar” nell’angolo in alto a sinistra del pannello degli sviluppatori.

Come aprire la barra degli strumenti dei dispositivi in Google Chrome

La vista che appare ora è una modalità che aiuta gli sviluppatori web a testare i loro siti web su diverse dimensioni dello schermo. La dimensione predefinita dello schermo è “Responsive”, ma è anche possibile scegliere altri tipi di schermo nel menu a discesa.

L'anteprima del dispositivo degli strumenti di sviluppo di Google Chrome

Step 3:
Tuttavia, non useremo nessuno dei preset ma creeremo il nostro tipo di schermo. Aprire il menu a discesa del tipo di schermo e selezionare “Modifica…”.

Menu a discesa del dispositivo negli strumenti di sviluppo di Google Chrome.

Step 4:
Apparirà una nuova barra laterale che elenca diversi modelli di telefono che possono essere utilizzati come tipi di schermo. Noi però possiamo ignorarli, e cliccare invece sul pulsante “Add custom device…”.

Aggiungi un dispositivo personalizzato negli strumenti per sviluppatori di Google Chrome

Step 5:
Ora compila i dettagli per il nuovo dispositivo schermo. Scegliete un nome come “HighRes Screenshot” e scegliete 1920 x 1080 come risoluzione dello schermo. Non preoccupatevi, questa non sarà la risoluzione dei nostri screenshot ma determina solo la dimensione del testo e degli elementi sul sito web. Gli screenshot avranno una risoluzione molto più alta.
Ora arriva la parte importante: Scegliere un rapporto pixel dispositivo (DPR). Il DPR determina la risoluzione dei nostri screenshot nel modo seguente:
Larghezza dello screenshot = 1920 * DPR
Altezza dello screenshot = 1080 * DPR
Quindi il DPR agisce come un moltiplicatore di risoluzione. Quando scegliamo che il DPR sia 4.0 per esempio, la risoluzione dello screenshot sarà:
Larghezza: 1920 * 4 = 7680 Pixel
Altezza: 1080 * 4 = 4320 Pixel
che è la risoluzione di 8K. Infine, cambia il tipo di dispositivo da “Mobile” a “Desktop” e clicca sul pulsante “Add” per creare il tuo schermo.

Come configurare un dispositivo personalizzato negli strumenti di sviluppo di Google Chrome

Fase 6:
Ora seleziona il tuo nuovo dispositivo nel menu a discesa del tipo di schermo. Questo renderà il sito web con le proprietà del dispositivo.

Selezionare il dispositivo personalizzato appena creato per l'anteprima negli strumenti di sviluppo di Google Chrome

Fase 7:
Per fare lo screenshot, clicca sui tre punti in alto a destra e seleziona “Cattura screenshot”.

Catturare uno screenshot ad alta risoluzione utilizzando gli strumenti per sviluppatori di Google Chrome

A seconda della vostra macchina, Chrome impiegherà alcuni secondi per renderizzare lo screenshot. Quando tutto è finito, lo screenshot sarà salvato nella tua cartella di download.

Lo screenshot catturato viene scaricato.

Ecco!

Hai appena creato uno screenshot 8K di un sito web. Controlla le proprietà dell’immagine se non mi credi. Oppure scarica lo screenshot qui.

Proprietà dell'immagine dello screenshot ad alta risoluzione, che ho appena fatto

Lo screenshot che hai creato, sarà memorizzato nel tuo browser e non hai bisogno di ricrearlo ogni volta. La prossima volta che volete fare uno screenshot ad alta risoluzione, basta premere F12, cliccare sull’icona “Toggle device bar”, selezionare il vostro dispositivo di screenshot e premere “Capture screenshot”. È una questione di 10 secondi!

Bonus

Se invece selezioni “Cattura screenshot a grandezza naturale” nel menu, verrà creato uno screenshot dell’intero sito web (dall’intestazione al piè di pagina). Questo è utile, quando vuoi archiviare come un sito web appariva in un certo momento.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *