Convert videos to webp/gif for hero background loop or host the video on cdn?
Hello devs! I just have a quick question. I want to start coding a hero with a video/gif/webp animated background. I have video files of what I'd like to use, but what do you guys use to convert video to gif/webp and optimize it while keeping the quality somewhat decent? Or should I just keep it a video file and host it somewhere?
2 Replies
handbreak for video, squoosh.app for images
for video, consider removing the audio and all chapters, resize is to 720p, keep it at a variable framerate and variable kbps, to try to squeeze a bit of space
oh, and limit it to 23.973 or 24fps
if the video is just for something to be animating in the background, and provides absolutely no value at all (random animations, buildings, people talking in offices and all that type of content devoid of any information) you can get away with blurring the living crap out of the video, and serve a 480p version of it
maybe even serve a 360p version
GIF is a pretty old format & not terribly efficient. Also, it's limited to 256 colors.
We're I you, I'd try encoding it as AV1 which has over 90% browser support. To do so, I'd likely use
ffmpeg with a command like: ffmpeg -i "myvideo.x264.mp4" -map 0 -c:v libsvtav1 -crf 18 -c:a copy "myvideo.av1.mp4"