/
Compressing Images and Videos

Compressing Images and Videos

This article is about compressing images and videos to improve loading times and reduce data usage in the LMS.

Introduction

Image and Video files are often the largest files on a page, which can result in slow loading times and excessive data use. Their file size is often substantially larger than it needs to be and can be reduced for a better experience. We recommend that all images and videos added to the LMS be compressed, and if necessary, the resolution decreased as well.

For customers with RTAs: Be mindful that your users will be accessing these images and videos on systems that could be slower than your main system and possibly across a low-bandwidth wifi connection. Keeping images and videos small will avoid your users experiencing delays when accessing these items. 

Overview

As a general rule of thumb, we suggest images be no larger than 2mb in size and video files be no larger than 50mb.

There are various factors that influence the size of an image or video file, and it is good to know what each of them is before explaining how to alter them in the next sections:

  • The level of compression. Compression is a broad subject but the general goal is to reduce data redundancy resulting in a smaller file size. There are various tools that can compress an image or video substantially reducing it’s size with little-to-no loss in quality. It is not easy to tell if an image or video has already been compressed but there is no harm in compressing it again.

  • The resolution of the image or video. This is how tall and wide it is, defined by the pixel (px) unit of measurement.

    • You will find most video files in the following resolutions: 480p, 720p, 1080p, or 4k. This naming convention actually defines the width of the video (480p = 480px wide).

    • Images can come in any size, it is important to keep in mind that your image file resolution should not be dramatically larger than the area it will be displayed in when you upload it. Anything larger than 1000px in width or height (especially for use in our text editor) is likely too big for any use case in the LMS and should be reduced in size before upload.

  • The file type/format. Images and videos can come in various types, and each has its own use cases. To assure the images/videos work in all browsers, phones, and operating systems, we suggest the following formats be used:

    • Image: .JPG (or JPEG), .GIF, or .PNG

    • Video: .MP4, .AVI, or.WEBM

Images

We recommend that you always compress images when uploading them to the LMS. Changing resolution is only required if your file size remains too large. Changing file type is only required if your image is not a JPG, PNG, or GIF file type.

As a general rule of thumb, keep images below 2mb in size.

All-in-one Solution

The easiest all in one solution is to use the online utility called ReduceImages: https://www.reduceimages.com/. The free version is limited to only one image at a time so alternatives are provided below.

  1. Begin by selecting your image

  2. To reduce the resolution change the width or height values to the desired % or px value. It is suggested that you leave the lock on to maintain original aspect ratio or the output is likely to appear stretched. A 50% reduction would roughly equate to a 50% reduction in file size.

  3. To compress the image, change the Quality% (70% is suggested; anything more and there may be a visible reduction in quality):

  4. To alter the file type, select your desired format (JPG recommended, additional detail about each type below in the “File Type“ section).

  5. Finally, click the resize button, wait for it to be processed, and download your image.

Compression

The easiest way to compress image files is to use the online utility called https://tinypng.com/. Simply drag and drop your files in and select compress, then save the result. This is limited to maximum file size, so here are some alternative desktop utilities we recommend that provide additional options/bulk compression:

PNGs: https://nukesaq88.github.io/Pngyu/

JPEGs: https://jpeg-compressor.en.softonic.com/download

Resolution

The resolution of an image is the single most important factor when it comes to file size. As mentioned above, this is how tall and wide your image is. It is important to keep in mind the size that the image will be displayed at when added to the LMS, and resize it to roughly that size to avoid wastage.

To see the resolution of an image in Windows, right click → properties → details. To see it on a mac, right click → Get Info.

The simplest method of reducing resolution is using the following online tool (which can also compress!): https://www.reduceimages.com/

Alternatively, any of the following desktop applications can be used:

File Type

Any of the aforementioned applications in the resolution section can be used to change the file type to one of the suggested types: JPG, PNG, or GIF. In general, these are the use cases for each type:

  • JPG or JPEG: The most universally used and supported image type should be used whenever possible.

    • limitations: Can not display transparent backgrounds or moving images

  • PNG: Required when background transparency is needed. It can be used as a general-purpose format, but it results in a slightly larger file size than JPG for general use.

  • GIF: Only recommended if your image has moving parts (looks like a video without audio). Can be used as a general purpose format but results in a slightly larger file size than PNG or JPG for general use.

Videos

Like images, we also suggest compressing video files. Reducing resolution is only required if compressing your video does not bring the file size down to a reasonable size. Changing the video file type is only required if your video is not already a MP4, AVI, or WEBM file type. We suggest using the all in one tool Miro Video Converter for all three adjustments.

As a general rule of thumb, keep videos below 50mb in size.

All-in-One Solution

This section will walk you through how to compress a video and optionally resize/alter the output file format using Miro. Miro can be downloaded here: http://www.mirovideoconverter.com/

  1. Begin by dragging and dropping your video in (or choose files manually).

  2. If you only need to compress, you can simply begin the conversion.

  3. To change the file type, click format → video → MP4

  4. To reduce the resolution, click on the cog and tick “Custom Size“, and enter your desired resolution. To avoid stretching or excessive black space, it is recommended that the original aspect ratio of the video is maintained. If you’re not sure what you should set these values to, see the resolution section below.

  5. Finally, click the Convert button and save the output video.

Compression

There are countless ways to compress a video. If you would like more control than Miro offers, you can try any of the following tools:

Resolution

Just like images, resolution is the primary determinant of video file size. It is simply how many pixels tall and how many pixels wide it is. We recommend using any of the following sizes to ensure they display nicely full screen on TVs, phones, and monitors:

  • 360p - 640x360

  • 480p - 854x480

  • 720p - 1280x720

  • 1080p -1920x1080

  • 4k -3840x2160

We suggest limiting videos to 720p for displaying in the LMS.

Sometimes you will encounter a video file that doesn’t conform to these standards. Converting these videos to the standard values may add additional white space surrounding the video. If this is an issue, you will need to calculate the aspect ratio of your video yourself and adjust accordingly. A simple way to do this is to just multiply the current video width and height values by a set amount (i.e, multiplying both by .5 will halve the video resolution).

Resolution can be changed in Miro following the steps above or by using any standard video editor such as Sony Vegas, Adobe Premiere, Apple Final Cut, https://online-video-cutter.com/resize-video (1GB limit), etc.

File Type

Video file types uploaded to the LMS should always be in MP4, AVI, or WEBM format. This is because your video is likely to be served to users on a variety of different devices and these are the only formats we can ensure will play on all of them.

File type can be changed in Miro following the steps above or by using any standard video editor such as Sony Vegas, Adobe Premiere, Apple Final Cut, https://cloudconvert.com/mp4-converter (1GB limit), etc

Looking for labels? They can now be found in the details panel on the floating action bar.

Related content