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. 

There’s no point getting a browser to download a 2mb image that’s 2000px × 1000px only for the browser to scale it down to 400px × 200px. 

You may as well serve the image at the resolution it will end up being displayed at right from the start.

As for images and videos that you intend to fill much of the browser window, like header videos or slider background images, I find a maximum width of 1200px – 1500px is usually adequate, so long as they don’t contain lots of fine detail. 

Larger images can generally be safely scaled up a little for large screens without it being too noticeable.

2. Pick a suitable file format

Pictures and videos should be saved in a sensible file format. Some rules of thumb:

● Photos should be saved as JPG

● Logos and other line-based details are ideally served in SVG, or as PNG for applications where SVG doesn’t work correctly. At the time of writing, you’ll need to use a plugin like Safe SVG to upload SVGs to a WordPress website.

● Suitable file formats for video on the web are MP4, WebM, WebVTT or OGV (though OGV is incompatible with Internet Explorer and Safari).

After uploading images in one of those formats, you can deliver them in the modern WebP format to browsers that support it (not all do yet) using a plugin. 

The WebP file format was developed by Google and provides superior image compression without much of a loss of quality.

Internet Explorer and Safari aren’t able to display WebP images yet, so you should upload images using the file formats listed above and rely on a plugin to show WebP versions only to browsers that support it. 

Websites running on LiteSpeed can make use of the native WebP compression built into the free LiteSpeed Cache plugin.

By the way, I’d recommend hosting only small video files with your website and serving more extensive videos to visitors using a service like Vimeo, YouTube, Metacafe, Dailymotion, Veoh or similar.

3. Compress before uploading

It’s crucial to compress images and videos before uploading. 

Compression codecs use many techniques to cut down the data needed to describe an image or the frames of a video, and they trim out unnecessary data that won’t be seen in the final file anyway.

For image compression, Photoshop has an excellent feature for this called ‘save to web’. 

This allows you to set the required file format, image resolution and the level of compression. 

More compression means a smaller file size, but a lower quality image – high quality (60%) is usually the sweet spot.

If you can’t always control the compression of images before they’re uploaded (for example you often publish posts from your phone, or you allow website users to upload pictures), you can use an image compression plugin like Shortpixel or Smush that will compress images automatically after they’ve been uploaded.

Compressing video isn’t as simple as it is with images as there’s a great slew of codecs and file formats available. 

Additionally, video compression takes into consideration how much detail changes between frames and uses keyframes to store image data to be reused in other frames.

Two of the most popular free applications for video compression are Freemake (easy to use) and Handbrake (providing more configuration options).

However, if you’ve edited a video, it’s best to set the correct compression settings when you export it rather than passing it through additional compression software as each pass will needlessly reduce the image quality a little more.

Now, some of the lesser-known methods for reducing image and video file sizes:

4. Pick images and videos with less detail

One of the best ways to make sure all your images and videos have a small file size is to pick more straightforward pictures right from the outset. 

The detail is what gives images their file size, so if you choose models with smaller areas filed with fine detail, those images will have smaller file sizes.

Guess which of these two images has a larger file size?

This works for both images and videos, as Tim Scott explains here:

So a video background that uses blurred city lights, for instance, will be a much smaller file than a timelapse video of the night sky, even if both videos have the same resolution, duration and compression bitrate.

5. Denoise or add blur

Images or videos taken in dark conditions with a camera using a high ISO can be very grainy, and this can ramp up file sizes dramatically. 

Denoising images and videos that contain a lot of grain or noise in an application like Photoshop, GIMP or Premiere Pro can help.

Alternatively, adding even just a little gaussian blur across a whole image or video can drastically reduce its file size. 

Or for a more subtle effect if part of the image already features natural lens blur, accentuate it a little.

In this image, I’ve added extra tilt-shift blur to the foreground and background. 

Original on the left: 207kb and blurred on the right: 153kb, a 26% reduction.

6. Add colour or turn down the lights

Reducing the dynamic range of an image by darkening it can help too. 

In the picture below, I’ve darkened the lightest areas in Photoshop. 

Original on the left: 156kb and darkened on the right: 121kb, a 22% reduction.

Adding a colour wash over an image would be another way to reduce file size. 

You could use your brand colour to make it tie in with your website’s design at the same time.

From a visibility standpoint adding blur or darkening an image can be an excellent idea for images used as background images as it stops the detail in the background image from clashing with whatever is overlaid, whether that’s text or icons.

7. Re-add saturation and contrast with CSS filters

OK, this one is going to be a little more “out there”, and this method is only possible with images, not videos.

Every browser apart from IE and Opera Mini (which account for 1.7% – 2.2% of internet traffic depending on whom you ask) can work with CSS filters. 

Filters instruct the browser to adjust the saturation, contrast, blur, hue etc. of an image. 

This allows us to reduce the saturation and contrast of an image, reducing the data it contains, and therefore its file size, before boosting the saturation and contrast again for website visitors using CSS.

One issue – without getting too technical, due to the weirdnesses of colour, not every colour is resaturated to the same level, so extreme saturation readjustments can mess with the colour tones of an image. 

Therefore I advise against cutting out more than 50% of the saturation in step 1.

Here’s how it’s done:

1. First, reduce the saturation and contrast of an image offline. Just like with all compression, the more you reduce, the lower the file size and quality will be. If you use Photoshop for the contrast adjustment, you’ll want to tick “use legacy” to make it act the same as the CSS filters you’ll use later to reverse the effect.
2. Upload the image to your website.
3. Then apply this CSS to the image:
4.  filter: saturate(x) contrast(x);

Set the x saturation and contrast values to whatever multiple is needed to boost them back up to 100% of the image’s original values. 

I find saturation values need to be boosted a little extra to make up for the additional colour loss wrought by the drop in contrast.

So for instance, I cut the saturation and contrast of the image below to 30% of their original values, then boosted its saturation again in CSS by a value of 1.6 and contrast by 1.4. 

Original on the left: 376kb and filtered on the right: 280kb, a 26% reduction.

Here’s how it looks in Chrome, Firefox and Edge:

Advantages of this method:

● Faster page load times, of course. Combined with other reduction methods, this could add up to something significant.

● The original hosted images are permanently changed, which could be used as a less visually invasive alternative to watermarking images to protect them from being copied.

Disadvantages of this method:

● Extreme colour shifts may be a problem for colour sensitive images like portraits, so treat the saturation gently

● If you want users to be able to download the image or for it to appear in Google Images search results just as it does on the page, they’ll get the desaturated version.

Like with all forms of image compression, this method has its limits as the more data you remove from an image, the harder it is for it to meet a reasonable standard of quality.

Author Bio: Aidan Ashby is a web designer, developer and branding designer who lives in Northampton, UK, with Lucid Rhino Web Design. You can follow him on Twitter @LucidRhinoWeb, on Instagram at @LucidRhinoWeb, or you can reach him at ai********@lu********.design.