Extraer fotogramas de un vídeo: de un clip de IA a una secuencia numerada
Cómo funciona
Elige un archivo de vídeo (MP4, WebM, MOV o cualquier formato que tu navegador sepa reproducir) y ajusta los FPS, el ancho de salida, el formato y la calidad. La herramienta decodifica el vídeo en el navegador, toma una imagen por cada fotograma pedido y lo reúne todo en un único frames.zip. El vídeo no sale de tu dispositivo: no hay subida ni cuenta.
Para qué sirve. El uso principal son las animaciones con scroll hechas con una secuencia de imágenes, la técnica de las páginas de producto de Apple: al desplazarte por la página, una imagen recorre cientos de fotogramas ya preparados y parece un objeto 3D que gira o se abre. En esas páginas el navegador no reproduce un vídeo: carga las imágenes sueltas y las dibuja en un canvas según la posición del scroll. Para construir una, parte de un vídeo de la animación, a menudo un clip generado con Sora, Runway o Kling, pásalo por esta herramienta y usa el ZIP en un script que lea el scroll y dibuje el fotograma que toca. En el sitio hay una guía completa (por ahora en inglés) que va de la extracción al código HTML, CSS y JavaScript del canvas.
Cómo decodifica. En los navegadores recientes (Chrome y Edge 94+, Safari 16.4+, Firefox 130+) usa la API WebCodecs con un demuxer MP4 integrado y decodifica los fotogramas en secuencia, con aceleración por hardware. En los demás navegadores, o con contenedores distintos de MP4, pasa a un método alternativo más lento, que carga el vídeo en un elemento oculto y salta a cada instante uno por uno. En ese caso un aviso sobre los ajustes te dice que la extracción puede tardar de 10 a 30 veces más.
GIF, WebP, APNG y AVIF animados siguen otro camino, porque un elemento de vídeo no los reproduce. Se leen con la API ImageDecoder, que entrega un fotograma cada vez junto con su duración, así que un GIF con tiempos distintos entre fotogramas se remuestrea bien. Si pides más FPS que la fuente, los fotogramas se repiten; si pides menos, se saltan algunos. ImageDecoder está en Chrome y Edge 94+: en un navegador que no la tiene, el archivo no se lee y el botón de extraer queda desactivado, así que convierte antes el archivo a MP4 o WebM. Si sueles partir de un GIF o de un WebP animado, el WebP Frame Extractor de este sitio es el mismo motor con los formatos animados en primer plano.
Los ajustes. • FPS, de 1 a 60, 24 por defecto. Es la palanca entre fluidez y peso: 24 es el estándar del cine, 30 el de la televisión y 60 duplica el peso respecto a 30. Para una animación con scroll, 24 o 30 casi siempre bastan. • Ancho de salida: Original, 1920, 1440, 1080, 720 px o un valor personalizado de 64 a 7680 px. El alto sigue la proporción del vídeo. 1920 es el valor por defecto; para usos secundarios o solo móvil, 1080 o 720 son suficientes. • Formato: JPG o WebP. El JPG sirve en todas partes; el WebP da archivos más ligeros con la misma calidad y lo leen todos los navegadores actuales. • Calidad, de 0,10 a 1,00, 0,85 por defecto: 0,85 es el punto medio habitual para fotografías, 1,00 es casi sin pérdida pero mucho más pesado y por debajo de 0,6 la pérdida se nota.
Bajo los ajustes, una estimación te dice cuántos fotogramas obtendrás y cuánto pesará el ZIP, y se actualiza con cada cambio. Los archivos dentro del ZIP se llaman frame_0001.jpg, frame_0002.jpg y así sucesivamente, con cuatro cifras, por lo que quedan ordenados en cualquier carpeta o script.
Límites. Por encima de 1000 fotogramas aparece un aviso y por encima de 2500 la extracción se bloquea. El ZIP se construye en memoria antes de la descarga, y demasiados fotogramas a ancho completo pueden hacer que se cierre la pestaña. Si llegas al límite, baja los FPS, elige un ancho menor o divide el vídeo.
Preguntas frecuentes
¿Cómo extraigo los fotogramas de un vídeo?
- Elige el archivo, ajusta FPS, ancho, formato y calidad, y pulsa Extraer y descargar el ZIP. Cuando termine, pulsa Descargar frames.zip: dentro hay una imagen por fotograma, numerada desde frame_0001. El vídeo se procesa en el navegador y no se sube a ningún sitio.
¿Cuántos FPS elijo para una animación con scroll?
- 24 o 30. Por debajo de 24 el movimiento se ve a saltos y por encima de 30 el peso se duplica sin una mejora visible al hacer scroll. Empieza con 24, el valor por defecto, y sube a 30 solo si el movimiento es rápido (giros, panorámicas) y te parece poco fluido.
¿Cómo construyo una animación con scroll con estos fotogramas?
- Pon un canvas dentro de un contenedor alto con position: sticky, precarga todas las imágenes, escucha el scroll, calcula el índice del fotograma que corresponde a la posición y dibújalo con ctx.drawImage. Bastan unas treinta líneas de JavaScript. En el sitio hay una guía completa (por ahora en inglés) que llega hasta el código terminado.
¿Puedo extraer los fotogramas de un vídeo generado con IA (Sora, Runway, Kling)?
- Sí. Si el navegador puede reproducir el archivo, y los MP4 y WebM que exportan estos servicios suelen poder, la herramienta lo trata como cualquier otro vídeo. Los clips generados suelen ser cortos y de frame rate irregular: elige los FPS que necesites (24 o 30) y la herramienta remuestrea el clip a ese valor.
¿Puedo extraer los fotogramas de un GIF o de un WebP animado?
- Sí. Selecciona un archivo .gif, .webp, .apng o .avif y funciona como un vídeo: mismos ajustes, mismo ZIP numerado. Los fotogramas se leen con la API ImageDecoder respetando la duración de cada uno, así que también los GIF con tiempos irregulares salen bien. Hace falta Chrome o Edge 94+: si tras elegir el archivo el botón de extraer sigue desactivado, el navegador no tiene ImageDecoder y conviene convertir el archivo a MP4 o WebM.
¿Qué formatos de vídeo acepta?
- Todo lo que tu navegador sepa reproducir: MP4 (H.264, H.265, AV1), WebM (VP8, VP9, AV1), MOV y otros, según el navegador. El método rápido funciona con MP4; los demás contenedores pasan al método alternativo, más lento. Si el archivo no carga en absoluto, el navegador no tiene el códec: conviértelo antes a MP4 H.264.
¿Por qué aparece el aviso del modo compatible?
- Porque tu navegador no tiene la API WebCodecs, presente en Chrome y Edge 94+, Safari 16.4+ y Firefox 130+. La herramienta funciona igualmente con el método alternativo, que salta de un instante a otro del vídeo, pero puede ser de 10 a 30 veces más lento. Si la usas a menudo, actualiza el navegador.
¿Por qué el número de fotogramas está limitado a 2500?
- Por la memoria. El ZIP se queda en RAM hasta que lo descargas, y miles de fotogramas de 1920 px de ancho pueden agotar la memoria de la pestaña. Por encima de 1000 ya aparece un aviso. Si necesitas más fotogramas, divide el vídeo o baja los FPS o el ancho.
¿Mejor JPG o WebP?
- WebP para una animación web: archivos más ligeros con la misma calidad, y lo leen todos los navegadores actuales. JPG si los fotogramas van a acabar en un programa más antiguo o se van a compartir con quien no sepa qué hacer con un WebP. La estimación del peso del ZIP se actualiza al cambiar de formato, así que ves la diferencia al momento.
¿Puedo extraer un solo fotograma en un momento concreto?
- No, la herramienta extrae fotogramas a intervalos regulares de todo el vídeo. Para un solo fotograma, lleva el reproductor al punto exacto y haz una captura de pantalla.
¿Por qué con muchos FPS salen fotogramas repetidos?
- Porque has pedido más fotogramas por segundo de los que tiene el vídeo. Si la fuente va a 30 FPS y pones 60, cada fotograma de la fuente aparece dos veces seguidas. El resultado es correcto, pero no añade información: pon unos FPS iguales o inferiores a los del vídeo.
¿Mis vídeos se suben a algún sitio?
- No. La decodificación, la codificación de las imágenes y la creación del ZIP ocurren en la pestaña del navegador. Puedes comprobarlo en la pestaña Red de las herramientas para desarrolladores: al iniciar la extracción no sale ninguna petición.
Cuántos FPS elegir: guía rápida
Elige los FPS más bajos que sigan dando un movimiento fluido: cada vez que duplicas los FPS, también se duplica el peso del ZIP.
| FPS | Uso típico | Fotogramas cada 10 s de vídeo | Notas |
|---|---|---|---|
| 12 | Animación dibujada, bucles ligeros para interfaces | 120 | A saltos con movimientos de cámara, válido para animaciones estilizadas |
| 24 | Estándar del cine, animaciones de producto con scroll | 240 | El valor por defecto: el mejor equilibrio entre peso y fluidez |
| 30 | Televisión, movimientos fluidos de la interfaz | 300 | Cuando a 24 los movimientos rápidos (giros, panorámicas) se ven a saltos |
| 48 | Cine de alto frame rate, repeticiones deportivas | 480 | En la web rara vez mejora respecto a 30 |
| 60 | Videojuegos, scroll muy fluido, fuentes a cámara lenta | 600 | El doble de peso que a 30; con una fuente a 30 FPS salen fotogramas duplicados |
El número de fotogramas supone que se extrae todo el vídeo: es la duración en segundos multiplicada por los FPS.