Ritagliare immagine

Come funziona il ritaglio

Quando si apre un’immagine, il browser la trasforma in pixel con createImageBitmap() e ne raddrizza l’orientamento. Sull’anteprima si trascina un riquadro di ritaglio; lo strumento riporta quel riquadro dalle misure sullo schermo ai pixel dell’immagine originale con una sola scala uniforme, poi copia solo quel rettangolo su una nuova canvas con ctx.drawImage(image, sx, sy, sw, sh, 0, 0, sw, sh). Alla fine canvas.toBlob() salva il risultato in JPEG, PNG o WebP. Non c’è nessun caricamento e nessun viaggio verso un server: tutto il ritaglio avviene direttamente nel tuo browser.

• Trascinare il centro del riquadro per spostare la selezione; trascinare un angolo o un lato per cambiarne la misura.
• Bloccare un rapporto (1:1, 16:9, foto tessera 7:9…) così il ritaglio tiene una forma fissa mentre lo si ridimensiona.
• Ruotare o specchiare prima l’immagine se è coricata o rovesciata, e ritagliare dopo.
• Il ritaglio in cerchio taglia una selezione quadrata a forma di cerchio e salva un PNG trasparente.

Misure di ritaglio più comuni

La proporzione decide la forma; la misura esatta in pixel è un passaggio a parte — qui si ritaglia al rapporto giusto, poi si apre Ridimensiona immagine per impostare la larghezza e l’altezza precise chieste da un modulo.

Ritagliare, ridimensionare o comprimere: cosa serve?

Consigli per un ritaglio pulito

• Scegliere prima il rapporto. Bloccare la forma (per esempio 1:1 per una foto d’esame, 7:9 per il passaporto) prima di sistemare il riquadro, così ridimensionandolo non si deforma.
• Mettere il soggetto al centro. Nelle foto per i documenti la testa va tenuta al centro con un po’ di spazio sopra: quasi tutti i portali rifiutano i volti spostati o inclinati.
• Prima ritagliare, poi ridimensionare, poi comprimere. Qui si dà la forma giusta, con Ridimensiona immagine si impostano i pixel esatti, e con Comprimi alla dimensione voluta si arriva al limite in KB: questo ordine è quello che salva più qualità.
• Usare il PNG per i cerchi e la grafica. I ritagli in cerchio e le immagini con testo o linee restano nitidi in PNG e tengono gli angoli trasparenti; per le foto normali il JPEG è la scelta migliore.
• Ruotare prima di ritagliare se la foto è coricata — il riquadro lavora sempre sull’immagine diritta.

Che cos’è davvero una proporzione

Una proporzione è solo il confronto fra la larghezza di un’immagine e la sua altezza, scritto come due numeri separati dai due punti. Un rapporto 1:1 è un quadrato perfetto; 16:9 è un rettangolo largo, 16 unità in orizzontale ogni 9 in verticale. Sono numeri che indicano un rapporto, non pixel: 16:9 descrive allo stesso modo un fotogramma da 1920×1080 e uno da 1280×720, perché tutti e due si riducono allo stesso 16:9. La forma più semplice si trova come quando si semplifica una frazione: si dividono i due numeri per il loro massimo comune divisore. 1920×1080 si dividono entrambi per 120 e danno 16:9; una foto tessera indiana da 35×45 mm si divide per 5 e dà 7:9.

Bloccare un rapporto in questo strumento tiene fissa quella proporzione mentre si cambia la misura del riquadro, così la selezione non finisce mai leggermente stirata o schiacciata. È importante perché il ritaglio taglia via i pixel e basta — non li ingrandisce mai — quindi la forma che si sceglie qui è esattamente la forma che si scarica. I rapporti più diffusi esistono per motivi concreti, utili da conoscere:

• 1:1 (quadrato) — foto profilo, icone delle app, quasi tutte le foto d’esame e per i documenti, il formato classico di Instagram.
• 4:3 — la proporzione della fotografia tradizionale e dei vecchi schermi; ancora comune per le stampe e per molti sensori delle fotocamere.
• 3:2 — la proporzione della pellicola da 35 mm, usata da quasi tutte le reflex e dalla stampa standard da 10×15 cm.
• 16:9 — la proporzione dei video widescreen e degli schermi moderni; la forma giusta per le miniature di YouTube e per gli sfondi delle diapositive.
• 9:16 — video in verticale: Reels, Shorts, TikTok e sfondi per lo schermo del telefono.
• 7:9 — la proporzione 35×45 mm usata dal passaporto indiano e da quasi tutte le foto per il visto.

Dai millimetri ai pixel: misure di stampa e DPI

Le misure per il passaporto e per la foto formato francobollo sono date in millimetri, ma un’immagine digitale si misura in pixel, e il ponte fra le due cose sono i DPI (punti per pollice, cioè pixel per pollice). Il calcolo è semplice: pixel = millimetri ÷ 25,4 × DPI, perché in un pollice ci sono 25,4 mm. Le foto da stampare si preparano di solito a 300 DPI, il punto in cui i singoli puntini non si distinguono più a distanza di lettura.

Facendo il conto, una foto tessera indiana da 35 × 45 mm a 300 DPI misura (35 ÷ 25,4 × 300) × (45 ÷ 25,4 × 300) ≈ 413 × 531 pixel. Una foto per il visto USA da 2 × 2 pollici a 300 DPI misura esattamente 600 × 600 pixel. Ecco perché l’ordine consigliato è "prima ritagliare al rapporto giusto, poi ridimensionare alla misura esatta in pixel": il ritaglio fissa la forma (7:9, 1:1), e il ridimensionamento trasforma quella forma nel numero preciso di pixel che il portale chiede. Conviene alzare i DPI solo se lo chiede espressamente una tipografia: per un caricamento sullo schermo contano solo le misure in pixel indicate dal portale, e i DPI sono soltanto l’unità con cui ci si è arrivati.

Composizione: dove mettere il soggetto

Un buon ritaglio dipende tanto da quello che si toglie quanto da quello che si tiene. Due regole semplici coprono quasi tutte le situazioni:

• La regola dei terzi. Basta immaginare l’inquadratura divisa in una griglia 3×3. Mettere il soggetto — o gli occhi di una persona — su una delle righe della griglia o su un incrocio dà di solito un risultato più naturale ed equilibrato che metterlo esattamente al centro. È un consiglio usato dai fotografi da secoli, non una legge, ma è un buon punto di partenza per immagini di apertura, banner e post sui social.
• Spazio sopra la testa e centratura nelle foto per i documenti. I documenti d’identità ribaltano quel consiglio: passaporti, visti e portali degli esami vogliono la testa al centro, di fronte, con un margine piccolo e uguale sopra i capelli e il viso che occupa sempre la stessa parte dell’inquadratura. Volti spostati, inclinati o troppo ravvicinati sono fra i motivi più comuni per cui un controllo automatico rifiuta una foto, quindi in questi casi conviene usare i preset dedicati e tenere il viso dritto in mezzo.

Ritagliare stretto porta anche un vantaggio nascosto: una foto ritagliata sul solo soggetto, con lo sfondo tolto via, si comprime in un file molto più leggero di una piena di spazio vuoto — utile quando la stessa immagine deve poi rientrare in un limite in KB severo.

Ritagli in cerchio, trasparenza e scelta del formato

Un avatar rotondo in realtà è un ritaglio quadrato con gli angoli resi invisibili, e quell’"invisibile" è il punto delicato. Solo i formati con un canale alfa — quello strato in più che registra quanto è trasparente ogni pixel — sanno memorizzare angoli che si vedono attraverso. PNG e WebP ce l’hanno; il JPEG no. Salvando un ritaglio in cerchio come JPEG, il formato non ha dove segnare la trasparenza, quindi riempirebbe i quattro angoli di un colore pieno (bianco, in questo strumento) e al posto di un cerchio pulito si otterrebbe un quadrato con gli angoli bianchi. È proprio per questo che l’interruttore del cerchio produce sempre un PNG: gli angoli restano davvero trasparenti, così l’avatar si appoggia in modo pulito su qualsiasi colore di sfondo un sito o un’app gli metta dietro.

Per i ritagli rettangolari la scelta del formato segue il contenuto. Conviene il JPEG per le fotografie normali, dove un file leggero conta e un po’ di compressione non si vede; conviene il PNG per screenshot, loghi, disegni a linee o qualsiasi cosa con testo netto e colori piatti, perché il salvataggio senza perdita tiene i bordi precisi; conviene il WebP quando serve la qualità del PNG in un file più leggero e la destinazione lo accetta.

Ritagliare fa perdere qualità? Pixel, nuovo salvataggio e orientamento

Il ritaglio in sé è senza perdita: butta via i pixel fuori dalla selezione e copia quelli dentro tali e quali, senza stirarli né ricalcolarli, quindi ogni pixel tenuto è identico all’originale. L’unico punto in cui la qualità può cambiare è il nuovo salvataggio finale. Salvando il ritaglio in JPEG, il formato applica la sua solita compressione con perdita (regolabile con il cursore della qualità); salvandolo in PNG o in WebP senza perdita, anche quel passaggio resta esatto. Quindi, per il risultato più nitido possibile su testo o linee sottili conviene il PNG; per il file più leggero su una foto normale, un JPEG con qualità 85–92 è identico all’originale a occhio.

C’è un altro dettaglio di cui lo strumento si occupa da solo: l’orientamento EXIF. Le fotocamere dei telefoni spesso salvano i pixel di una foto coricati e aggiungono un dato nascosto che dice "quando la mostri, ruotala". Se un programma di ritaglio ignora quel dato, l’immagine che si ritaglia e quella che si vede possono non coincidere. Questo strumento applica prima l’orientamento, così la foto diritta sullo schermo è esattamente quella su cui lavora il riquadro — e siccome il risultato viene salvato di nuovo attraverso la canvas, il blocco EXIF (comprese le coordinate GPS) sparisce dal file in uscita: una piccola vittoria per la privacy ogni volta che si condivide l’immagine ritagliata.

Strumenti collegati

• Ridimensiona immagine (pixel esatti)
• Comprimi alla dimensione voluta (KB)
• Comprimi immagine (per qualità)
• Da immagine a PDF