How can I reduce the file size of my videos and images?

Images used for traditional print usually have a high resolution but for delivery over the internet, you will find that these files need to be compressed so that they download quickly. There is a range of different image formats that can be displayed by modern web browsers. Some images tend to lend themselves better to different format types. Some of the key points to consider are: 

  • Keep the actual image size (height x width) to an appropriate size for the screen. There is little point in displaying an image that is 8000 pixels wide on your intranet as this will just slow your site down. Try to reduce your image widths to a more appropriate size for your users. Perhaps if this is a photo reduce the width down to 800 pixels. If it’s an icon try to make the original image size the same as the size that you would like it displayed on the site.
  • Select the appropriate file format for your image type. Use JPEGs for photos and PNGs for graphics. Both of these file formats work in a way that suits the image type. For  example  PNGs allow you to use a transparent background so are in most cases are better suited for graphics. For further information on this topic check out a beginner’s guide to optimizing images for your website. This goes into a little more detail about each file type without blinding you with science.
  • Use the correct number of  colours  and compression. If you’re using graphics software, when you save an image, there will be different options available. It is worth spending some time working through each of these so that you can make sure that you aren’t saving your files with settings that make the files too big. We use Photoshop a lot and you would expect a package of this  calibre  to have the best compression when saving PNGs but we’ve found that it doesn’t.  Another tool we use is a free product called ImageAlpha for Mac. We’ve been amazed at how small you can get your image files using this solution without losing any quality. 

How To Handle Video Files

Most videos are initially created using a fairly high resolution. These files tend to play well on the original device that the file was created on. As soon as you move these to a web-based medium such as a cloud-based intranet you will need to consider the following points:

  • Select the appropriate display resolution. As with images the height and width (display resolution) of your video will also make a big difference to the size of the overall file. While it is tempting to upload a high-resolution video file, this may have the effect of creating a bad user experience. It is likely that if your user has to wait for a large file to download they will go elsewhere and you will end up losing employee engagement. There is a great free tool available called Clipchamp that allows you to upload and then convert your videos to a size appropriate for the web. Other settings that can contribute to the overall file size of your video include the frame rate and the file format used.
  • Consider the download size. When you play a video using a file stored locally on your device there is no need for the file to pass through a network before it plays through your browser’s video player. For files stored in a cloud-based intranet solution, these need to download and then play on the user’s device. Most video players have to do something called buffering which stores up part of the video file and then plays it once it has enough data to display a few frames of video. This is why when viewing large video files you quite often see a blank screen at the beginning while it buffers the information. Smaller file sizes are quicker to download, so this means less buffering and a better user experience.
  • Is your video format supported? One important subject to remember when linking directly to video files rather than embedding them is the video encoding format used. If this is not supported fully on the device that your user is using, they will run into playback problems. Quite often the best solution is to embed a YouTube video as this approach ensures that you don’t run into encoding or other problems. If you are unable to embed your videos always check that the video format you use is commonly supported. It’s quite common to see a video  play  on the machine that it was created on but it then needed to be converted to a common format to play on all devices. Another free online tool that can help you with this and other file conversions for the web is Zamzar.

Different Intranet Download Scenarios

One thing that’s we’ve found helpful is to actively encourage staff to consider file sizes when uploading them to intranet forums. We’ve seen some users attach a number of massive high-resolution images files to topics and replies. This then takes longer to download when your users view the post. As mobile phones become more sophisticated with increased capabilities around image resolution supported by their cameras, we will tend to see this problem more often. If you are using a fast internet connection in your office, the issue may not be seen until the post is viewed externally by someone out in the field who’s desperate for the information at the time. Imagine a situation where you have a member of staff who’s just arrived at a customer’s site and is keen to show them your latest product offering. They click to link to the product’s sales brochure on your intranet only to find that’s it a 5MB word document. They are on a slow part of the mobile network, this is where you should consider converting these files to PDFs as they are smaller and better suited for mobile downloads.

While it may be difficult to police all files uploaded to your intranet with a small amount of planning and a little coaching just these small changes can really help the overall experience for all of your users.