Marketing/Releasing animations as gifs or videos

    From The Document Foundation Wiki

    TDF LibreOffice Document Liberation Project Community Blogs Weblate Nextcloud Redmine Ask LibreOffice Donate

    Index of Pages

    Marketing

    Branding

    Introduction

    This article is based on the work and research required to create a high quality animated gif banner for the promotion of LibreOffice 6.0. The source file is available as File:Lo60introcubes.odg. The assumption is that you are using Linux with bash shell, but the instructions are adaptable to any platform.

    These instructions can be applied to any graphics software capable of handling multiple pages (and obviously to any animation software). Even LibreOffice Draw can be used to create simple animations as evidenced by the 6.0 promotion piece. The important thing is to use vector graphics whenever possible. This will keep the exported images high quality no matter how big the resolution. Exported images should be in a lossless format, typically PNG. We want the only compression step to be the creation of the gif or video.

    Required tools

    Exporting the images

    The LibreOffice 6.0 animation had one particular problem: the cuboid structure behind the number 6 uses 3D effects and the outer edges come out messy upon exporting as an image. To combat this, we need to export the images in a massive size. I picked a width of 7500 pixels.

    1. File - Export as images
    2. File type: PNG
    3. Width: 7500

    Cropping

    The next step is only needed, if your original work has unnecessary margins.

    Open one of the exported images in GIMP. Use the rectangular selection tool to surround only the area you want to keep. Zoom in close to the top left and bottom right corners to tweak it pixel perfect. Note down the x and y coordinates and width and height from the sidebar on the left.

    In the case of the LibreOffice 6.0 images exported at 7500 px wide, the desired cropping values were:

    • width: 7449
    • height: 2934
    • x: 25
    • y: 38

    Next we will use these values with the "convert" command line tool which belongs to the ImageMagick suite.

    ImageMagick cropping syntax is: 

    convert -crop {Width}x{Height}+{X}+{Y} image.png

    To do the cropping with ImageMagick, run the following: 

    for file in *.png; do convert -crop 7449x2934+25+38 "$file" "${file%.png}_cropped.png"; done

    It will output new versions of the images with _cropped appended to the file name. You can get rid of the non-cropped ones after verifying everything went fine.

    Creating animated GIFs

    Here is a script with perfect ffmpeg settings for animated GIFs regarding quality and file size: 

    #!/bin/sh

## echo "USAGE"
## echo
## echo "./hd-gif.sh source-filetype dest.gif FPS RESOLUTION loop"
## echo "./hd-gif.sh png animated.gif 10 750 loop"
## echo

fps=$3
res=$4
loop=$5
palette="/tmp/palette.png"
filters="scale=$res:-1:flags=lanczos"

ffmpeg -v warning -pattern_type glob -i "*.${1}" -vf "$filters,palettegen" -y $palette
if [[ "$loop" == "loop" ]]; then
    ffmpeg -v warning -framerate $fps -pattern_type glob -i "*.${1}" -i $palette -lavfi "$filters [x]; [x][1:v] paletteuse" -y "$2"
else
    ffmpeg -v warning -framerate $fps -pattern_type glob -i "*.${1}" -i $palette -lavfi "$filters [x]; [x][1:v] paletteuse" -y -loop -1 "$2"
fi

    The script reads all the images of the specified file type from the folder it is run. It extracts a palette file from the images in order to optimise the colours used. If you include the word loop as the final argument, it will create a looping gif. If you plan to use the commands outside of the script, note that the file selecting glob pattern will not work on Windows builds of ffmpeg.

    Using the script to scale at 750 px width with 10 frames per second, creating a non-looping gif: 

    ./hd-gif.sh png dest.gif 10 750

    Creating video files

    Animated gifs have excellent browser support, but these days video files are a very realistic alternative. The following commands produce video files that are one third of the file size of the gif in the best case (with the x264 codec). 

    ffmpeg -v warning -framerate 10 -pattern_type glob -i '*.png' -lavfi "fps=25,scale=750:-1:flags=lanczos" -c:v libx264 -preset veryslow -tune stillimage -y out.mp4
ffmpeg -v warning -framerate 10 -pattern_type glob -i '*.png' -lavfi "fps=25,scale=750:-1:flags=lanczos" -c:v libvpx-vp9 -crf 40 -b:v 150k -deadline best -y out.webm

    The -framerate 10 sets the input frame rate to 10 frames per second. fps=25 in the filter settings will change the video frame rate to 25 frames per second, in this case by duplicating input frames; it is not strictly necessary but can be helpful with low frame rates to make seeking smoother and ensure the full duration for the first and last images. Here it helped prevent the dropping of frames.

    -c:v specifies the video codec to be used. With x264 we use -preset veryslow because the video will be very short and thus the encoding time will be brief no matter what. We also use -tune stillimage because the background does not move.

    With VP9, a quality matching the x264 settings results in a larger file size. The method to define the quality is "Constrained quality" and the settings were found by trial and error. Playing the mp4 and webm files looping back to back in VLC was a good method for comparison. The -crf quality setting is on a scale of 0 to 63, where 0 means best quality. -b:v 150k means that the bitrate will be 150 kb/s on average.

    The codec VP9 and its container format WebM are both royalty-free and open. x264 has better support, so it can be used as a fallback. Check the current situation regarding support from caniuse.com: https://caniuse.com/#feat=mpeg4 https://caniuse.com/#feat=webm

    Here is how you can embed x264 and WebM in HTML with a GIF file as a final fallback for maximum compatibility: 

    <video controls poster="poster.jpg">
  <syntaxhighlight src="myvid.mp4" type="video/mp4">
  <syntaxhighlight src="myvid.webm" type="video/webm">
  <img src="mygif.gif">
</video>

    More information on embedding videos can be found in the MDN guide on video and audio content.

    It should be noted that the royalty-free and open model for video formats is finally winning thanks to AV1. AV1 will outperform both of the codecs used in this article.

    Retrieved from "https://wiki.documentfoundation.org/index.php?title=Marketing/Releasing_animations_as_gifs_or_videos&oldid=415100"