Screenshot Retina

Uno screenshot Retina è acquisito su un display Retina o ad alta densità e misura 2x o 3x il viewport visibile in pixel: è più nitido, ma anche più pesante.

Related workflow terms: Densità di pixel.

Perché gli screenshot Retina sono più grandi

Su un display a densità standard, un pixel CSS corrisponde a un pixel fisico. Una finestra del browser larga 1440 pixel CSS produce uno screenshot largo 1440 pixel.

Su un display Retina con device pixel ratio (DPR) di 2, ogni pixel CSS viene disegnato su una griglia 2x2 di pixel fisici. La stessa finestra larga 1440 pixel CSS genera quindi un'immagine larga 2880 pixel. Con DPR 3, comune sui dispositivi mobili di fascia alta, l'output arriva a 4320 pixel.

Il risultato è più nitido e contiene più dettagli per unità visiva, ma il file è molto più grande. Uno screenshot Retina 2x ha quattro volte i pixel di un'acquisizione 1x dello stesso viewport, perché raddoppiano sia larghezza sia altezza. Anche il peso aumenta: un PNG da 500 KB a 1x può arrivare a 1,5-2 MB a 2x.

È un risultato che sorprende molti utenti. Anche l'acquisizione di una piccola parte dello schermo produce un'immagine grande e ad alta risoluzione, perché i pixel fisici sono molti più di quelli logici visibili.

Dove conta

• Visualizzazione sul Web — se inserisci uno screenshot 2x alle sue dimensioni complete, apparirà grande il doppio del previsto. Imposta larghezza e altezza CSS o l'attributo width per mostrarlo alla misura logica corretta; sui display Retina resterà molto nitido.
• Stampa — i pixel aggiuntivi sono un vantaggio. Uno screenshot 2x può avere abbastanza risoluzione per una stampa a 300 DPI di dimensioni ragionevoli, mentre la versione 1x dello stesso viewport potrebbe apparire sgranata.
• Documentazione — gli screenshot Retina appaiono nitidi sugli schermi ad alta densità, ma possono essere inutilmente pesanti sul Web. Un ridimensionamento a 1,5x o le immagini responsive bilanciano nitidezza e peso.
• Archiviazione — acquisire centinaia di pagine su un display Retina produce molti più dati rispetto alla stessa serie a 1x. Considera l'aumento dei file quando pianifichi spazio e larghezza di banda.

Come controllare la risoluzione di acquisizione

La maggior parte degli strumenti e dei browser headless permette di impostare esplicitamente il rapporto tra pixel del dispositivo.

In Puppeteer e Playwright, l'opzione deviceScaleFactor controlla il DPR. Il valore 1 produce un'acquisizione a densità standard; il valore 2 genera l'equivalente Retina, indipendentemente dal display fisico.

Su macOS, lo strumento integrato con Cmd+Maiusc+3 o Cmd+Maiusc+4 acquisisce sempre al DPR nativo del display. Su un MacBook Retina significa 2x. Alcuni strumenti di terze parti offrono invece un'opzione 1x.

In Windows, Strumento di cattura con Win+Maiusc+S usa il fattore di ridimensionamento del sistema, che può essere 100% (1x), 125%, 150% (circa 1,5x) o 200% (2x), secondo display e impostazioni.

Alcuni strumenti automatici accettano un DPR specifico per ogni acquisizione e possono generare versioni 1x e 2x nella stessa esecuzione.

Nei processi ripetibili, "Retina" è in pratica un modo breve per dire "acquisizione con un rapporto tra pixel del dispositivo esplicito". Una volta controllato nel codice, puoi scegliere tra immagini 1x leggere e adatte alla revisione oppure versioni 2x più nitide per marketing, stampa e archivio.

Errori comuni

• Mostrare sul Web gli screenshot Retina alle dimensioni complete. Un'immagine larga 2880 pixel, senza dimensioni CSS, occupa 2880 pixel CSS su un display standard, molto più del previsto. Imposta sempre le dimensioni di visualizzazione.
• Non considerare il peso nelle acquisizioni in serie. Acquisire 500 pagine a 2x anziché a 1x quadruplica all'incirca lo spazio totale. Prima di avviare una serie grande, verifica che la risoluzione Retina serva davvero.
• Ridurre con un algoritmo di ricampionamento scadente. Il metodo nearest-neighbor rende frastagliati i bordi quando porta un'immagine da 2x a 1x. Usa un ricampionamento bicubico o Lanczos.
• Presumere che tutte le acquisizioni siano Retina. Se il gruppo usa dispositivi diversi, alcune immagini saranno 1x e altre 2x. Uniforma il DPR oppure usa strumenti automatici che lo impostano esplicitamente.