How to Create a Slideshow from Images with FFmpeg

FFmpeg is an incredibly powerful tool you can use for generating videos, even from static content like plain old images
by Jon Yongfook · January 2022

Contents

    FFmpeg is an incredibly powerful tool you can use for generating videos, even from static content like plain old images. Here's how to create a simple slideshow from images with FFmpeg.

    Simple slideshow with no transitions

    This is a slideshow with no transitions, that simply jump-cuts from one image to another:

    The simplest way to achieve this is to first organize your images with a specific naming convention, and in the same folder:

    • img001.jpg
    • img002.jpg
    • img003.jpg

    etc

    Then simply run this command:

    ffmpeg -framerate 1/3 -i img%03d.jpg -r 25 -c:v libx264 -pix_fmt yuv420p output.mp4

    FFmpeg command explained:

    • -framerate 1/3 specifies at what speed FFmpeg should import the images. A framerate of 1/3 means that FFmpeg will display each image for 3 seconds.
    • -i img%03d.jpg the image sequence to import.
    • -r 25 the output framerate.

    Slideshow with a crossfade transition

    This is a slideshow with a crossfade effect from one image to another:

    There are a couple of different ways to achieve this, but perhaps the easiest to grok is where you import each image as a separate input and then fade them in as overlays on top of each other, one after another.

    This command achieves the crossfade effect:

    ffmpeg \
    -loop 1 -t 3 -i img001.jpg \
    -loop 1 -t 3 -i img002.jpg \
    -loop 1 -t 3 -i img003.jpg \
    -loop 1 -t 3 -i img004.jpg \
    -loop 1 -t 3 -i img005.jpg \
    -filter_complex \
    "[1]fade=d=1:t=in:alpha=1,setpts=PTS-STARTPTS+2/TB[f0]; \
     [2]fade=d=1:t=in:alpha=1,setpts=PTS-STARTPTS+4/TB[f1]; \
     [3]fade=d=1:t=in:alpha=1,setpts=PTS-STARTPTS+6/TB[f2]; \
     [4]fade=d=1:t=in:alpha=1,setpts=PTS-STARTPTS+8/TB[f3]; \
     [0][f0]overlay[bg1];[bg1][f1]overlay[bg2];[bg2][f2]overlay[bg3]; \
     [bg3][f3]overlay,format=yuv420p[v]" -map "[v]" -r 25 output-crossfade.mp4

    FFmpeg command explained:

    • -loop 1 -t 3 -i img001.jpg importing an image with a duration of 3 seconds, and telling FFmpeg to loop the input.
    • fade=d=1:t=in:alpha=1,setpts=PTS-STARTPTS+2/TB fading in with a duration of 1 second, applying an offset of N seconds.

    Slideshow with a swipe transition

    FFmpeg also comes with a range of transitions you can use via the xfade filter.

    For example, this is a slideshow using a transition called slideleft:

    Xfade is a lot more fussy about its inputs. Whereas with the above two techniques your inputs don't really have to be the same size (ffmpeg will simply crop according to the size of your first input) when using xfade your inputs must all be of the same resolution.

    ffmpeg \
    -loop 1 -t 3 -i img001.jpg \
    -loop 1 -t 3 -i img002.jpg \
    -loop 1 -t 3 -i img003.jpg \
    -loop 1 -t 3 -i img004.jpg \
    -loop 1 -t 3 -i img005.jpg \
    -filter_complex \
    "[0][1]xfade=transition=slideleft:duration=0.5:offset=2.5[f0]; \
    [f0][2]xfade=transition=slideleft:duration=0.5:offset=5[f1]; \
    [f1][3]xfade=transition=slideleft:duration=0.5:offset=7.5[f2]; \
    [f2][4]xfade=transition=slideleft:duration=0.5:offset=10[f3]" \
    -map "[f3]" -r 25 -pix_fmt yuv420p -vcodec libx264 output-swipe.mp4

    Calculating the transition offset is also a little more fussy. The offset can be calculated by this formula: length of current input + previous offset - length of transition.

    Full list of Xfade filters

    In return for this extra configuration, you have more choices when it comes to transitions. Here is the full list:

    • fade
    • wipeleft
    • wiperight
    • wipeup
    • wipedown
    • slideleft
    • slideright
    • slideup
    • slidedown
    • circlecrop
    • rectcrop
    • distance
    • fadeblack
    • fadewhite
    • radial
    • smoothleft
    • smoothright
    • smoothup
    • smoothdown
    • circleopen
    • circleclose
    • vertopen
    • vertclose
    • horzopen
    • horzclose
    • dissolve
    • pixelize
    • diagtl
    • diagtr
    • diagbl
    • diagbr
    • hlslice
    • hrslice
    • vuslice
    • vdslice
    • hblur
    • fadegrays
    • wipetl
    • wipetr
    • wipebl
    • wipebr
    • squeezeh
    • squeezev
    • zoomin

    See more about xfade on the ffmpeg wiki.

    Slideshow with multiple different transitions

    Using xfade you can even mix and match different filters to join different clips, for example:

    This was achieved with the following command:

    ffmpeg \
    -loop 1 -t 3 -i img001.jpg \
    -loop 1 -t 3 -i img002.jpg \
    -loop 1 -t 3 -i img003.jpg \
    -loop 1 -t 3 -i img004.jpg \
    -loop 1 -t 3 -i img005.jpg \
    -filter_complex \
    "[0][1]xfade=transition=circlecrop:duration=0.5:offset=2.5[f0]; \
    [f0][2]xfade=transition=smoothleft:duration=0.5:offset=5[f1]; \
    [f1][3]xfade=transition=pixelize:duration=0.5:offset=7.5[f2]; \
    [f2][4]xfade=transition=hblur:duration=0.5:offset=10[f3]" \
    -map "[f3]" -r 25 -pix_fmt yuv420p -vcodec libx264 output-swipe-custom.mp4

    More options

    That's the basics. FFmpeg includes even more options for tasks such as adding a soundtrack over the top, joining both images and videos into a slideshow and more complex tasks - FFmpeg commands can get extremely long when doing complex operations…!

    Use the Bannerbear Video API

    If you need to perform these kinds of FFmpeg operations in the cloud, you can try using the Bannerbear Video API which simplifies this FFmpeg command line experience and makes it more developer-friendly for performing common tasks like joining video clips, turning images into slideshows and more.

    About the authorJon Yongfook@yongfook
    Jon is the founder of Bannerbear. He has worked as a designer and programmer for 20 years and is fascinated by the role of technology in design automation.

    How to Create an Image Slider in HTML, CSS, and Javascript

    Many JavaScript image slider libraries are available but which is the best for your project? Instead of using an external library, let's create one from scratch using simple HTML, CSS, and JavaScript.

    6 Pro Tips for Optimizing Web Automation Using Puppeteer

    Using Puppeteer to automate web browser-related tasks is a great way to speed up your work as a developer. In this article, we have listed six tips that will help you optimize them.

    How to Make GIFs from Images Using FFmpeg

    As the platform with the largest GIF database, GIPHY has a built-in tool that helps users to create these animated images. However, the features offered are limited. In this tutorial, learn how to make GIFs from a collection of images, that GIPHY’s tool is incapable of creating.

    Follow the Journey

    Sign up for our once a fortnight newsletter update on new Bannerbear features and our business journey

    How to Create a Slideshow from Images with FFmpeg
    How to Create a Slideshow from Images with FFmpeg