Optimize media files to improve website speed

In this post, I’ll walk through why it’s important to have a fast website and how you can use FFmpeg, a free and open-source software tool for handling multimedia files, to optimize the media files on your website to be more performant.

To follow along, make sure you have FFmpeg installed. Follow the instructions here to download and install FFmpeg.

Why does website performance matter?

1. User experience - If a site is slow to load or unresponsive, visitors are more likely to leave and not return. This can be a loss in sales for your business.
2. Search engine ranking - A faster site can rank higher in search results, which can lead to more traffic.
3. Mobile optimization - more than ever, mobile devices account for a significant portion of internet traffic. A site not optimized for mobile can be slow and difficult to use, which can result in lower engagement and conversion from mobile device visitors.
4. Revenue and conversions - site speed can impact revenue and conversion rates directly. Imagine a site going unresponsive during a payment...no good.
5. Brand reputation - if users have poor experiences on a site, they probably won't recommend it to others.
   

How can you improve your website’s performance?

For starters, you can make sure the media files served by your website are optimized for modern web browsing. Below, I'll go over a few strategies you can implement with FFmpeg to optimize your media files.

Serve media files in next-gen formats

Next-gen formats refer to newer file formats that provide better compression and higher quality images than traditional formats, like JPEG, PNG, or GIF. These next-gen formats use advanced techniques such as improved compression algorithms, better color representation, and higher bit-depth to provide superior quality on modern web browsers and smaller file sizes.

While most modern browsers support next-gen formats, evaluate which browsers and devices you're working with to confirm next-gen formats are supported. Mozilla has helpful documentation on which formats are supported across browsers.

Popular next-gen image and video formats are:

• WebP - a modern image format developed by Google designed to provide smaller file sizes and faster page load times for websites.
• AVIF - AVIF stands for AV1 Image File Format, an image format based on the AV1 video codec. It provides better compression than JPEG, PNG, and WebP, and supports features like HDR, transparency, and animation.
• HEIF - HEIF stands for High Efficiency Image Format, which is a file format for images and image sequences. It supports better compression and higher quality images than JPEG, and can also store multiple images, image thumbnails, and metadata in a single file.
• MP4 - a video format optimal for good quality and small file size. Since animated GIFs serve mainly as short videos, an effective way to reduce their file size is to convert the image format to a modern video format like MP4, or WebM, described below.
• WebM - a sister project to Google's WebP, this modern video format is focused on addressing the unique needs of serving video on the web. WebM files tend to be a bit smaller than MP4 files.

With FFmpeg, it is simple to transform any file into a next-gen format. In the example below, a PNG image file is converted into a WebP file and output to the current directory.

ffmpeg -i original.png -c libwebp updated.webp

Let's step through the options passed into the ffmpeg command:

• -i is the input file. The output file is named updated.webp and the .webp file extension specifies the output format for the file.
• -c specifies the codec used to encode the output file and in this case, that's thelibwebp codec for the WebP format.

To convert a GIF into a WebM format, use the following command.

ffmpeg -i original.gif -c vp9 -b:v 0 -crf 60 updated.webm

In the above command, the options we're using are:

• -c specifies the codec, and is set to the vp9 codec, which is compatible in most browsers.
• -b:v specifies the bit rate for the video stream and setting it to 0 means we can set the quality of the file in the next option, -crf
• -crf specifies the Constant Rate Factor (CRF) for video encoding, which sets the quality to a number between 0-63, where a lower number means better quality.

To convert a GIF into an MP4 format, use the command below.

ffmpeg -i original.gif -movflags +faststart -pix_fmt yuv420p \
       -vf "scale=trunc(iw/2)*2:trunc(ih/2)*2" updated.mp4

In this command, the options are:

• -movflags specifies features related to the MOV container. For web video we can specify +faststart to allow the video to start playing before the file has finished downloading or streaming.
• -pix_fmt specifies the pixel format for video encoding or decoding. The default yuv444p is not compatible with some mobile browsers so it's set to yuv420p instead.
• -vf specifies the video filter that is applied to the video during encoding or decoding. These filters include resizing, cropping, adding text overlays, and more. This flag is set to "scale=trunc(iw/2)*2:trunc(ih/2)*2" to ensure the video width and height are divisible by 2 which would otherwise cause an error when using the yuv420p pixel format.

Properly size images

Serve images that are appropriately-sized for a viewer's browser and device to save cellular data and improve a website's load time. Ideally, your website should never serve images that are larger than the version that's shown on the user's screen. Anything larger than that results in downloading wasted bytes and slows down page load time.

The main strategy for serving appropriately sized images is called "responsive images." With responsive images, your website serves multiple sized versions of each image, specified in the HTML or CSS of your site using media queries or viewport dimensions. After understanding the dimensions you'd like to support, you can use FFmpeg to generate an image at different scales to serve them accordingly.

In the below command, we create 4 versions of the same image, scaled to 20%, 40%, and 60%.

ffmpeg -i input.webp -vf scale=iw*0.2:ih*0.2 output_20pct.webp
ffmpeg -i input.webp -vf scale=iw*0.4:ih*0.4 output_40pct.webp
ffmpeg -i input.webp -vf scale=iw*0.6:ih*0.6 output_60pct.webp

Compress video files

Compressing a video file can reduce its size, making it faster to load and stream. Compress a video file with the FFmpeg command below:

ffmpeg -i input.mp4 -c:v libx264 -preset fast -crf 28 -maxrate 1M -bufsize 2M -c:a aac -b:a 128k -movflags +faststart output.mp4

Here is an explanation of the different options used in this command:

1. -c:v sets the video codec to H.264, which is widely supported by modern web browsers.
2. -preset fast sets the encoding preset speed to "fast," which balances encoding speed and output file size.
3. -crf sets the Constant Rate Factor (CRF) value to 28, which determines the output file size and quality. Lower values result in higher quality and larger file sizes, while higher values result in lower quality and smaller file sizes.
4. -maxrate and -bufsize set the maximum bit rate and buffer size, respectively. This helps prevent buffering and other playback issues.
5. -c:a sets the audio codec to AAC, which is a commonly used audio codec on the web.
6. -b:a sets the audio bit rate to 128 kbps, which provides a good balance between audio quality and file size.
7. -movflags enables the "faststart" option, which restructures the MP4 file to allow for faster streaming and playback in web browsers.
   

Optimize a video file for the web

Reducing the frame rate, lowering the resolution, and adjusting the bit rate are all ways you can adjust a file to reduce its file size and improve its playback quality.

The following command reduces the resolution and frame rate of a video file and adjusts its quality and file size.

ffmpeg -i input.mp4 -vf scale=640:-1 -r 24 -b:v 1M -maxrate 2M -bufsize 3M -c:a aac -b:a 128k -movflags +faststart output.mp4

Let's check out the options in this command:

• -vf sets a video filter to scale the video to a width of 640 pixels and adjusts the height to maintain the original aspect ratio. This reduces the resolution of the video.
• -r sets the frame rate to 24 frames per second to reduce the frame rate of the video.
• -b sets the video bit rate to 1 megabit per second to adjust the video quality and file size.
• -maxrate and -bufsize set the maximum bit rate and buffer size, respectively. This helps prevent buffering and other playback issues.
• -c sets the audio codec to AAC, which is a commonly used audio codec on the web.
• -b sets the audio bit rate to 128 kbps, which provides a good balance between audio quality and file size.
• -movflags enables the "faststart" option, which restructures the MP4 file to allow for faster streaming and playback in web browsers.
  

That's a wrap on how you can use FFmpeg to optimize the media files in your projects to ensure faster websites and faster content. If you'd like this tutorial, please check out our open source library for editing media files.