I’ve decided to move my portfolio here to my personal website whereas before I primarily relied on artstation. The transition is not entirely complete. But now I have far more flexibility in how I can showcase my portfolio including the ability to add more animated and interactive elements.

It’s been a pretty large undertaking however because I’m not only transferring my artstation posts to here but trying to improve them at the same time. This along with the need to ensure my site is sufficiently optimized so it isn’t a pain to use has led to me getting pretty familar with FFmpeg as it’s a lifesaver for quickly editing and compressing videos and pictures. So here I’m going to include a quick reference guide I made for myself that will hopefully save someone the pain of ever using EZgif.com (like I was before) in the future.

Video Creation and Conversion

    # basic mp4 to webm conversion
    ffmpeg -i input.mp4 output.webm 

    # -crf effects quality higher numbers make smaller but worse looking files (default is 32)
    ffmpeg -i input.mp4 -crf 30 output.webm 

    # %04d.png specifies a png sequence (0000.png, 0001.png, 0002.png...)
    ffmpeg -i %04d.png output.webm

    # incase your sequence doesn't start at 0 you can set the first frame (0100.png)
    ffmpeg -start_number 100 -i %04d.png output.webm

Filters

    # -vf allows you to set filters like crop or scale
    ffmpeg -i input.mp4 -vf crop=500:500 output.webm
    # by default crop starts at the center
    -vf crop=500:500
    # crop from top left corner
    -vf crop=500:500:0:0
    # crop from any position
    -vf crop=500:500:56:128
    # crop from the center but left 100 pixels
    -vf "crop=500:500:(iw-500):(ih-500)/2"

    # resize the final output
    -vf scale=800:800

    # crop and scale at the same time
    -vf crop=620:450,scale=200:200

Images

images work almost the same as videos

    ffmpeg -i input.png output.webp
    # -q:v or -quality to set the quality
    ffmpeg -i input.png -q:v 90 output.webp

Batch conversion with Bash

    for f in *.png; do ffmpeg -i "$f" -quality 90 -n "${f%.png}.webp"; done

    for f in *.mp4; do ffmpeg -i "$f" -n "${f%.mp4}.webm"; done

I used this a ton for optimizing all the images and video on the site -n ensures it won’t overwrite exisiting webps or webms. In the future is may be best to create a system that automatically optimizes my content for me but for now this system works well enough.