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. 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.