Optimize media files to improve website speed

In this tutorial, 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.

With FFmpeg, it is simple to transform any file into a next-gen format. Here are a few examples of transforming files into next-gen formats with FFMPEG commands run from the terminal.

Convert PNG image file into a WebP file and output to the current directory:

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

Convert a GIF into a WebM format:

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

Convert a GIF into an MP4 format:

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

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.webpffmpeg -i input.webp -vf scale=iw*0.4:ih*0.4 output_40pct.webpffmpeg -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

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

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 liked this tutorial, subscribe to our newsletter for more thoughts on best practices for online content.