Estrarre fotogrammi da video: dalla clip AI a una sequenza numerata
Come funziona
Scegli un file video (MP4, WebM, MOV o qualsiasi formato che il tuo browser sa riprodurre) e imposta FPS, larghezza di uscita, formato e qualità. Lo strumento decodifica il video nel browser, preleva un'immagine per ogni fotogramma richiesto e raccoglie tutto in un unico file frames.zip. Il video non lascia il tuo computer: non c'è nessun caricamento e nessun account.
A cosa serve. L'uso principale sono le animazioni allo scroll fatte con una sequenza di immagini, la tecnica delle pagine prodotto di Apple: mentre scorri la pagina, un'immagine passa attraverso centinaia di fotogrammi già pronti e sembra un oggetto 3D che ruota o si apre. In quelle pagine il browser non riproduce un video: carica le singole immagini e le disegna in un canvas in base alla posizione dello scroll. Per costruirne una parti da un video dell'animazione, spesso una clip generata con Sora, Runway o Kling, lo passi da questo strumento e usi lo ZIP in uno script che legge lo scroll e disegna il fotogramma giusto. Sul sito c'è una guida completa (per ora in inglese) che parte dall'estrazione e arriva al codice HTML, CSS e JavaScript del canvas.
Come decodifica. Nei browser recenti (Chrome ed Edge 94+, Safari 16.4+, Firefox 130+) usa l'API WebCodecs con un demuxer MP4 integrato e decodifica i fotogrammi in sequenza, con l'accelerazione hardware. Negli altri browser, o con contenitori diversi da MP4, passa a un metodo di riserva più lento, che carica il video in un elemento nascosto e salta a ogni istante uno alla volta. In quel caso un avviso sopra le impostazioni ti dice che l'estrazione può richiedere da 10 a 30 volte più tempo.
GIF, WebP, APNG e AVIF animati seguono un'altra strada, perché un elemento video non li riproduce. Vengono letti con l'API ImageDecoder, che restituisce un fotogramma alla volta insieme alla sua durata, quindi anche una GIF con tempi diversi tra un fotogramma e l'altro viene ricampionata correttamente. Se chiedi più FPS di quelli della sorgente i fotogrammi si ripetono, se ne chiedi meno alcuni vengono saltati. ImageDecoder è disponibile in Chrome ed Edge 94+: in un browser che non lo ha, il file non viene letto e il pulsante di estrazione resta disattivato, quindi converti prima il file in MP4 o WebM. Se di solito parti da una GIF o da un WebP animato, il WebP Frame Extractor di questo sito è lo stesso motore con i formati animati in primo piano.
Le impostazioni. • FPS, da 1 a 60, predefinito 24. È la leva tra fluidità e peso: 24 è lo standard del cinema, 30 quello della TV, 60 raddoppia il peso rispetto a 30. Per un'animazione allo scroll 24 o 30 bastano quasi sempre. • Larghezza di uscita: Originale, 1920, 1440, 1080, 720 px o un valore personalizzato da 64 a 7680 px. L'altezza segue le proporzioni del video. 1920 è il valore predefinito; per usi secondari o solo mobile 1080 o 720 bastano. • Formato: JPG o WebP. Il JPG va bene ovunque, il WebP dà file più leggeri a parità di qualità ed è letto da tutti i browser attuali. • Qualità, da 0,10 a 1,00, predefinita 0,85: 0,85 è il compromesso tipico per le foto, 1,00 è quasi senza perdita ma molto più pesante, sotto 0,6 la perdita si vede.
Sotto le impostazioni una stima ti dice quanti fotogrammi otterrai e quanto peserà lo ZIP, e si aggiorna a ogni modifica. I file dentro l'archivio si chiamano frame_0001.jpg, frame_0002.jpg e così via, con quattro cifre, quindi restano in ordine in qualsiasi cartella o script.
Limiti. Sopra i 1.000 fotogrammi compare un avviso, sopra i 2.500 l'estrazione è bloccata. Lo ZIP viene costruito in memoria prima del download e troppi fotogrammi a piena larghezza possono far chiudere la scheda. Se arrivi al limite, abbassa gli FPS, scegli una larghezza minore o dividi il video.
Domande frequenti
Come estraggo i fotogrammi da un video?
- Scegli il file, imposta FPS, larghezza, formato e qualità e premi Estrai e scarica lo ZIP. Quando l'estrazione finisce premi Scarica frames.zip: dentro trovi un'immagine per fotogramma, numerata da frame_0001. Il video viene elaborato nel browser e non viene caricato da nessuna parte.
Quanti FPS scegliere per un'animazione allo scroll?
- 24 o 30. Sotto i 24 il movimento sembra a scatti, sopra i 30 il peso raddoppia senza un miglioramento visibile durante lo scroll. Parti da 24, il valore predefinito, e passa a 30 solo se il movimento è veloce (rotazioni, panoramiche) e ti sembra poco fluido.
Come costruisco un'animazione allo scroll con questi fotogrammi?
- Metti un canvas dentro un contenitore alto con position: sticky, precarica tutte le immagini, ascolta lo scroll, calcola l'indice del fotogramma corrispondente alla posizione e disegnalo con ctx.drawImage. Bastano una trentina di righe di JavaScript. Sul sito c'è una guida completa (per ora in inglese) che arriva fino al codice finito.
Posso estrarre i fotogrammi da un video generato con l'AI (Sora, Runway, Kling)?
- Sì. Se il browser riesce a riprodurre il file, e gli MP4 e WebM esportati da questi servizi di solito sì, lo strumento lo tratta come qualsiasi altro video. Le clip generate sono spesso brevi e con un frame rate irregolare: scegli gli FPS che ti servono (24 o 30) e lo strumento ricampiona la clip a quel valore.
Posso estrarre i fotogrammi da una GIF o da un WebP animato?
- Sì. Seleziona un file .gif, .webp, .apng o .avif e funziona come un video: stesse impostazioni, stesso ZIP numerato. I fotogrammi vengono letti con l'API ImageDecoder rispettando la durata di ognuno, quindi anche le GIF con tempi irregolari escono giuste. Serve Chrome o Edge 94+: se dopo aver scelto il file il pulsante di estrazione resta disattivato, il browser non ha ImageDecoder e conviene convertire il file in MP4 o WebM.
Quali formati video accetta?
- Tutto quello che il tuo browser sa riprodurre: MP4 (H.264, H.265, AV1), WebM (VP8, VP9, AV1), MOV e altri, a seconda del browser. Il metodo veloce funziona con gli MP4; gli altri contenitori passano al metodo di riserva, più lento. Se il file non si carica proprio, il browser non ha il codec: convertilo prima in MP4 H.264.
Perché compare l'avviso della modalità compatibile?
- Perché il tuo browser non ha l'API WebCodecs, presente in Chrome ed Edge 94+, Safari 16.4+ e Firefox 130+. Lo strumento funziona lo stesso con il metodo di riserva, che salta da un istante all'altro del video, ma può essere da 10 a 30 volte più lento. Se lo usi spesso, aggiorna il browser.
Perché il numero di fotogrammi è limitato a 2.500?
- Per la memoria. Lo ZIP resta in RAM finché non lo scarichi, e migliaia di fotogrammi larghi 1920 px possono esaurire la memoria della scheda. Sopra i 1000 compare già un avviso. Se ti servono più fotogrammi, dividi il video oppure abbassa gli FPS o la larghezza.
Meglio JPG o WebP?
- WebP per un'animazione sul web: file più leggeri a parità di qualità, letti da tutti i browser attuali. JPG se i fotogrammi devono finire in un programma più vecchio o essere condivisi con chi non sa cosa farsene di un WebP. La stima del peso dello ZIP si aggiorna quando cambi formato, così vedi subito la differenza.
Posso estrarre un solo fotogramma in un momento preciso?
- No, lo strumento estrae fotogrammi a intervalli regolari su tutto il video. Per un singolo fotogramma porta il lettore video al punto giusto e fai uno screenshot.
Perché con molti FPS trovo fotogrammi uguali?
- Perché hai chiesto più fotogrammi al secondo di quanti ne contenga il video. Se la sorgente è a 30 FPS e imposti 60, ogni fotogramma della sorgente compare due volte di fila. Il risultato è corretto, ma non aggiunge informazioni: imposta gli FPS uguali o inferiori a quelli del video.
I miei video vengono caricati da qualche parte?
- No. Decodifica, codifica delle immagini e creazione dello ZIP avvengono nella scheda del browser. Puoi verificarlo nella scheda Rete degli strumenti per sviluppatori: quando avvii l'estrazione non parte nessuna richiesta.
Quanti FPS scegliere: guida rapida
Scegli gli FPS più bassi che danno ancora un movimento fluido: ogni volta che raddoppi gli FPS raddoppi anche il peso dello ZIP.
| FPS | Uso tipico | Fotogrammi ogni 10 s di video | Note |
|---|---|---|---|
| 12 | Animazione disegnata, loop leggeri per interfacce | 120 | A scatti con i movimenti di camera, va bene per animazioni stilizzate |
| 24 | Standard del cinema, animazioni allo scroll di prodotto | 240 | Il valore predefinito: il miglior equilibrio tra peso e fluidità |
| 30 | TV, movimenti fluidi dell'interfaccia | 300 | Quando a 24 i movimenti veloci (rotazioni, panoramiche) scattano |
| 48 | Cinema ad alto frame rate, replay sportivi | 480 | Sul web raramente migliora rispetto a 30 |
| 60 | Videogiochi, scroll molto fluido, sorgenti al rallentatore | 600 | Doppio del peso rispetto a 30; da una sorgente a 30 FPS ottieni fotogrammi duplicati |
Il numero di fotogrammi presuppone che venga estratto tutto il video: è la durata in secondi moltiplicata per gli FPS.