7 Ways To Reduce Images And Videos File Sizes For The Web

7 Ways to Reduce Image and Video File Sizes for the Web

We’ve posted before about how to optimise images and videos for the web.

Still, in this post, we will drill down into one area of optimisation with seven methods that you can use to reduce the file sizes of images and videos.

The main benefit of smaller image sizes is that it makes web pages load faster.

The experts say that as the load time of a web page increases from 1 second to 7 seconds, the probability of a mobile visitor bouncing (leaving again right away) increases 113% [source: Think With Google].

The BBC found they lost an additional 10% of users for every extra second their site took to load [source: Creative Bloq].

As well as a slow loading website being a bore for your visitors, search engines now consider the speed of a website when deciding how to rank web pages in search results, so slow websites can find themselves held back and their traffic curtailed.

Images and videos are usually the largest files on a web page, so making them smaller is often the quickest way to speed up a website.

The good news is that if you know how to do it right, this can be done without sacrificing much noticeable image quality.

All these methods will work for both image and video files except the CSS filter method.

I’ve started by scaling each image in this post to 1200px × 800px, saving them with Photoshop’s “save for web” compression to allow a fair before and after comparison.

These three methods are the most basic and well-known ways to reduce the file size of images and videos:

1. Pick a sensible resolution

It’s best practice to scale images and videos to no larger than the size they’ll end up being displayed at.