Cyber Monday Deal

50% Off, Sign Up Now!

days
0
0
hours
1
6
minutes
2
4
seconds
3
5
Video to image sequence.

How To Convert A Video Into An Image Sequence

Have you seen the stunning Sony “Be Moved” website and asked yourself “How did they do it”?

As you can read in my deconstruction, the animations are actually a static images exported from a video and rendered on the page in a sequence of images.

So how do you create an image sequence from a video file?

Lets find out, it’s actually pretty simple.

1. Open your video file in Photoshop

Video to image sequence.

Open Photoshop, go to File > Open and navigate to a folder with your video file, select it and click Open.

In my case that is slowmo-water-video.mp4 from Mazwai.

2. Define an area for export

Video to image sequence.

Select a start and end point. In my case it is 5 seconds from the middle of the movie clip.

3. Define image size

Go to File > Export > Render Video

Video to image sequence.

  1. Choose Photoshop Image Sequence instead of Adobe Media Encoder,
  2. select a desired image size,
  3. define a frame rate,
  4. keep Work Area as your Range option,
  5. and click Render.

The above settings will export 149 frames from our video into a Sequence720p folder.

A different image sizes

See a comparison of a different image sizes and the resulting file size.

Video to image sequence.

Each folder with the images was also optimized by ImageOptim to help us reduce the file size.

The preloader

Even if you optimize your images, your page will still need to download quite a few assets.

It’s a good idea to add a preloader and a preloading screen to your site to keep users entertain while the content is loading.

Conclusion

Now you know how to export a static frames from a video files and use them in your scrolling animations.

Experiment with the jpg compression and image sizes to achieve a reasonable image quality with a minimal file size.

Share your tips and tricks on how to export and optimize image sequences in the comments below.

17 thoughts on “How To Convert A Video Into An Image Sequence

  1. Pablo Massa

    Low framerate but with LICEcap you can do this in seconds for free and without this Photoshop nightmare.

    http://www.cockos.com/licecap/

    Reply
  2. Kamil

    Hi Petr,
    But how can I use that images in scrolling animation?
    Im trying to find that function in js files of sony pages but I cant.

    Reply
  3. Als

    Thanks – gave this a quick go and tried using skrollr to animate but getting very jerky / flickering results.

    Is there a better way to do it?

    http://codepen.io/anon/pen/iaDGg

    Reply
    1. Petr Tichy Post author

      Hey Als, I would try a few different things:

      • remove background-size: cover or
      • wrapp each frame (div with a background image) in it’s own div and display the containing div block or none

      If none of the above works properly, then try ScrollMagic.

      Reply
  4. Christopher G

    Hello Petr Tichy,

    This tutorial is fantastic. Thank you for posting. Would you happen to know how to make a image sequence that could be used for print? I’m looking for a resolution of 300dpi for an image that will be 11″x17″. Thanks for your help and time.
    -Chris

    Reply
  5. Gururaj

    I need a easy way to convert videos into pictures so I any software is there any link which I can get to download that software

    Reply
  6. Jen

    Thank you very much for your help! I was having such a challenging time doing this in VLC, every third frame kept dropping. This took much longer than VLR, but the end result was seamless. Much gratitude!

    Reply
  7. King

    Dear sir , I have Small doubt , Video file convert into images. In these images , all the images are unique or not.

    Reply
  8. Cris

    Hi! Do you know if there is any way to export all the frames in only one image? (no separated images). Thanks in advance!

    Reply
    1. Petr Tichy Post author

      Don’t know Cris, but I am sure there is a script or plugin for photoshop that lets you merge multiple images into one single image. Just google it. Cheers

      Reply
  9. Sinead

    Hello, is it at all possible to get multiple images from a video (frame by frame), Ive followed the instructions above but it keeps copying the same single image multiple times, please help

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.