Automate and Optimise Your Web Media Delivery Workflow with FFMPEG

So you have a personal website on Github Pages or a clunky upload workflow to social media or to clients? This tool might save you a lot of time.

This nifty bash script is intended to create lower file size (and lower quality) media at different resolutions — with or without watermarks — for use online where, for example, 20MB jpegs or 5GB video clips aren’t welcome. See how I’ve used it for the media on my website! Simply copy your input media to the input folder and run the bash script in the command line — easy!

The script is basically a wrapper for FFMPEG commands (FFMPEG is “A complete, cross-platform solution to record, convert and stream audio and video.”). I know that FFMPEG can be intimidating to new users, so I’ll break down how each basic command works. If some of the operations are not required or need to be adjusted to fit your requirements, this should outline how to change the FFMPEG ‘filters’ in order to do so. Instead of outputting the 6 various photo formats below, you could specify your own to create 340x340px images, for example.

Requirements

Since the script is written in bash, you’ll need a linux or macOS system to run it in the terminal natively (it is possible to run bash on windows).

Alternatively, as FFMPEG is universal, you could still use the commands either simply in your command line, or in your own script.

Output

The default script takes photos and videos (in most formats) from the photo_in and video_in directories, and spits out the following for each input file in that directory:

Photo (all are cropped about the centre if the aspect ratio differs):

1. 200x200px (square)
2. 480x720px (portrait)
3. 720x480px (landscape)
4. 640x640px (square)
5. 1280xAR (width is 1280px and the original aspect ratio is maintained)
6. 1920xAR (width is 1920px and the original aspect ratio is maintained)

Video:

1. 1920xAR (width is 1920px and the original aspect ratio is maintained — e.g. if input video is 16:9, this outputs 1080p)

The video render also does the following:

• Scale with width 1920px…