Skip to main content

Image and Video files compression

Standardize the size of image​

Lots of image files are used in 20 assignments and final year project portfolio. In the case of week1 assignment, 9MB space is required to store the image files.

Due to the maximum space of our GitLab space is 500MB, we need to compress the media files to keep space occupied to minimum.

It's comlicated that resize the image by the command in docusaurus website structure. In order to resize and standardize the image size below 100kb, a image compressor "Squoosh" is applied for compressing the image.

Step1: Upload a photo to Squoosh​

For example, I upload a photo which is applied in Week1/Final Project Sketch which image size is 237kb with resolution 1784*1079 pixels.

First, we upload a photo. And set the ratio of compression of image.

Step2: Modify the variables, choose the resize size.​

50% size of image is set. You can see the resolution of image is reduced obviously, but it's enough. The size of orignal image is 243kb, the size of compressed image is 59.5kb, it decrease about 76%!

Let's compare the text in the image!

The upper photo is the original image and the lower photo is the compressed image. In 50% resize, the text can also be read clearly.

Compress mp4 files​

MP4 files are common video format. In order to control the size of mp4 files. We use ffmpeg to compress the mp4 files.

Step1: Install ffmpeg.​

Go to the official website https://www.ffmpeg.org/.

Go to Download page. In my case, my operiation system of my computer is Windows. So I choose windows. And then choose Windows builds from gyan.dev.

You will be guided to https://www.gyan.dev/ffmpeg/builds/, choose download ffmpeg-git-essntials.7z

Extract files to C drive, and rename the folder to ffmpeg.

Edit environment variables to path of user. Add a new path C:\ffmpeg\bin.

Finally, to confirm the ffmpeg can work, open command prompt. And input the command ffmpeg -version. If there's version message, it means success!

Step2: Compress mp4 file.​

Let us compress a mp4 file which's original size is about 21.5MB. I use the following command to operate the compression.

In my case, input.mp4 is input file, output.mp4 is output file.

ffmpeg -i input.mp4 -vf "scale=300:-1" -c:v libx264 -crf 23 -preset fast output.mp4

where:

  • -i input.mp4: Input file.
  • `-vf "scale=300,-1": Set the width of the mp4 to 300 pixels. The height is set to -1 which means it will be calculated automatically to maintain the same ratio of original video.
  • -c:v libx264: Use libx264 encoder, a highly efficient H.264 video codec.
  • -crf 23: Sets the Constant Rate Factor (CRF), where 23 is a balance point that offers a reasonable trade-off between quality and file size. Adjusting this value can lead to higher quality or smaller file sizes.
  • preset fast: This option controls the trade-off between encoding speed and compression efficiency. fast provides a faster encoding speed. Depending on your needs, you can choose from ultrafast, superfast, veryfast, faster, medium (the default), slow, slower, or veryslow.
  • output.mp4: Output file.

In comparing of size of input.mp4 and output.mp4, the size of output.mp4 decreases to 1.02MB. It's 20 times smaller!!