Come funziona il ritaglio di immagini nel browser
Il processo di ritaglio viene eseguito interamente nella scheda del tuo browser usando la Canvas API. Nessuna elaborazione lato server, nessun upload, nessun servizio di terze parti. Ogni passaggio avviene sul tuo dispositivo.
- Carica l'immagine in un elemento
<img>in modo che il browser la decodifichi localmente. Un overlay canvas visualizza l'immagine scalata per adattarsi al viewport mentre un rettangolo di selezione trascinabile mostra l'area di ritaglio corrente. - Trascina il rettangolo dai suoi bordi o angoli per regolare l'area di ritaglio. Il rettangolo rimane ancorato ai bordi dell'immagine in modo da non poter selezionare un'area fuori dalla foto. Quando un rapporto fisso è attivo (1:1, 16:9, 4:3), il ridimensionamento preserva automaticamente quel rapporto.
- La lettura dei pixel si aggiorna in tempo reale mentre trascini, mostrando la larghezza, l'altezza, X e Y correnti del ritaglio in coordinate pixel dell'immagine. Questo ti permette di mirare a dimensioni esatte senza tentativi.
- Quando clicchi su Ritaglia e Scarica, la pagina disegna solo la regione selezionata dell'immagine sorgente su una canvas fuori schermo alla risoluzione pixel originale, poi esporta il risultato tramite
canvas.toBlob()nello stesso formato del file sorgente. Viene generato un URL Blob per il download.
Perché ritagliare le immagini online?
- Il ritaglio elimina bordi indesiderati, spazio vuoto o disordine visivo. Un singolo ritaglio spesso migliora la composizione di una foto più di qualsiasi filtro o regolazione del colore.
- Il controllo del rapporto d'aspetto è essenziale per le piattaforme di pubblicazione. I feed dei social media si aspettano 1:1 per i profili, 16:9 per le miniature video e 4:3 per la fotografia standard. Ritagliare con il rapporto giusto evita fastidiosi effetti letterbox o tagli durante il caricamento.
- Il ritaglio lato client è l'unica opzione su dispositivi aziendali bloccati che mancano di un editor fotografico. Poiché nulla viene caricato, non c'è rischio di perdita di dati e nessuna revisione di conformità necessaria per immagini sensibili.
- La lettura delle dimensioni in tempo reale elimina i tentativi. Vedi le coordinate pixel e la dimensione della selezione mentre trascini, così puoi ritagliare a una larghezza e altezza esatte senza passare a uno strumento di misurazione pixel.
Applicazioni comuni del ritaglio
Il ritaglio è una delle modifiche alle immagini più comuni nella pubblicazione web, nei social media e nello sviluppo software. Ecco tre schemi in cui un ritagliatore basato sul browser fa risparmiare tempo.
- Preparare foto di prodotti per un negozio online. Ritaglia a un rapporto coerente 1:1 o 4:5 in modo che ogni miniatura del catalogo si allinei nella griglia. L'esportazione preserva il formato originale, quindi le foto prodotto JPEG rimangono JPEG.
- Ritagliare screenshot per documentazione o segnalazioni di bug. Ritaglia la barra degli strumenti del browser, la barra delle applicazioni di Windows o le notifiche sensibili prima di allegare l'immagine a un ticket o a una pull request.
- Inquadrare un'immagine hero o un banner per una landing page. Blocca il preset 16:9, posiziona la parte più importante della foto al centro del rettangolo di ritaglio ed esporta alla risoluzione originale per la migliore qualità sui display retina.
Un esempio pratico: ritagliare una foto 4000×3000 a 1200×675 per un banner hero
Una foto di 4000×3000 pixel da una fotocamera digitale è troppo grande per un tipico banner web hero. Lo spazio del banner può essere 1200×675 (un formato 16:9).
Trascina la foto nella zona di upload. L'immagine viene caricata a piena risoluzione ma scalata per adattarsi al viewport per un'interazione di trascinamento confortevole. Seleziona il preset del rapporto 16:9. Il rettangolo di ritaglio si aggancia istantaneamente alla regione 16:9 più ampia che si adatta all'immagine. Trascina il rettangolo per posizionare il punto focale — un picco montuoso, un prodotto, il volto di una persona — nell'inquadratura. La lettura in tempo reale mostra la selezione corrente a 4000×2250 (la finestra 16:9 dell'immagine completa). Afferra una maniglia d'angolo e trascina verso l'interno finché la lettura della larghezza raggiunge 1200 px. L'altezza segue automaticamente perché il rapporto è bloccato. Clicca su Ritaglia e scarica. La pagina estrae la regione selezionata di 1200×675 dai pixel originali e fornisce il file ritagliato nel formato sorgente. L'intero processo richiede un secondo o due e non utilizza larghezza di banda di rete oltre al caricamento iniziale della pagina.
Quali formati immagine sono supportati per il ritaglio?
Lo strumento accetta qualsiasi formato che il browser possa decodificare: PNG, JPEG e WebP coprono quasi tutti i casi d'uso reali. L'output ritagliato viene salvato nello stesso formato del file sorgente. Il PNG rimane senza perdita, il JPEG conserva il suo livello di qualità originale e il WebP rimane WebP. Il formato viene rilevato dal tipo MIME del file sorgente.
Il ritaglio riduce la dimensione del file immagine?
Il ritaglio rimuove pixel, quindi la dimensione del file di output è tipicamente inferiore a quella della sorgente, specialmente quando ritagli un bordo grande o un'area vuota. L'esportazione utilizza il formato file originale e i suoi parametri di codifica — il PNG rimane senza perdita, il JPEG mantiene la sua impostazione di qualità originale — quindi l'unico risparmio deriva dalla riduzione del numero di pixel, non dalla ricompressione.
Cosa fanno i preset del rapporto d'aspetto?
I preset (1:1, 16:9, 4:3, 3:2, 9:16) bloccano il rapporto larghezza-altezza del rettangolo di ritaglio. Quando un preset è attivo, trascinare qualsiasi angolo o bordo regola la dimensione della selezione mantenendo costante il rapporto. Passare alla modalità Libera rimuove il vincolo in modo da poter ridimensionare il rettangolo arbitrariamente. Il rapporto viene applicato sulle coordinate pixel dell'immagine, quindi l'output esportato ha esattamente il rapporto d'aspetto che hai selezionato.
L'immagine viene caricata su un server?
No. L'immagine non lascia mai il tuo dispositivo. La pagina utilizza la File API del browser per leggere l'immagine in memoria e la Canvas API per ritagliare ed esportare il risultato. Puoi verificarlo aprendo il pannello Rete degli strumenti di sviluppo del tuo browser — le uniche richieste in uscita durante il ritaglio sono il caricamento iniziale della pagina e le chiamate pubblicitarie. Nessun dato dell'immagine viene trasmesso.
Posso ritagliare un'area specifica inserendo coordinate pixel esatte?
La versione corrente regola il rettangolo di ritaglio tramite interazione di trascinamento sull'anteprima dell'immagine. Puoi leggere le coordinate pixel in tempo reale per X, Y, larghezza e altezza della selezione. L'input numerico diretto per il rettangolo di ritaglio non è disponibile nella v1 ma è un miglioramento pianificato per un futuro aggiornamento.
Cosa succede all'immagine originale?
Il file originale rimane sul tuo dispositivo. La pagina lo legge nella memoria del browser per la visualizzazione e il ritaglio, ma non modifica mai il file sorgente sul disco. L'output ritagliato è un nuovo file che scarichi separatamente. L'originale rimane intatto nella sua posizione originale sul tuo computer o telefono.
C'è un limite di dimensione del file per il ritaglio?
Lo strumento rispetta un limite di 30 MB per file nella zona di upload per mantenere la memoria del browser sotto controllo sui dispositivi meno potenti. Se la tua immagine è più grande di 30 MB, puoi prima ridimensionarla usando uno strumento dedicato di ridimensionamento immagini prima di caricarla qui per ritagliarla.
Il ritaglio funziona su telefoni cellulari e tablet?
Sì. Le maniglie di ritaglio sono dimensionate pensando ai bersagli tattili e l'interazione utilizza eventi pointer che funzionano sia con clic del mouse che con tocchi delle dita. Su uno schermo del telefono, l'anteprima dell'immagine si adatta alla larghezza disponibile e i controlli si impilano verticalmente per un facile utilizzo con una mano.