Image & video optimisation

Image formats

Before considering any image format, you should define the resolution of your images, since more pixels means more data to transfer. As a rule of thumb, it is rarely necessary to serve 4k lossless image. Look at what the width of your images on desktop, and and resize your images accordingly. Even if more tedious, you can considering making use of responsive images. They will ensure that only the appropriate image is loaded according to the screen size.

Once you've defined the size of your images, you can start looking into what format you want to use. While PNGs are great for image fidelity and transaprency, they are magnitudes heavier than other lossy formats.

WebP

WebP, although not supported by older browsers, is a great alternative to PNG. The format can be both lossy and lossless, allows for transparency, and is supported by all modern browsers. It is also smaller than PNG, and can be smaller than JPEG. You can convert your images to WebP using a variety of online tools, such as cloudconvert.com.

Advanced: converting images using the command line

If you want to batch convert all your images, you can use the cwebp command line tool.

Install the cwebp command line tool using Homebrew.
```
brew install cwebp
```

Open the folder containing your images in the terminal or navigate to it.

1. opt + right click on the folder
2. select "Copy folder-name as Pathname"
3. cd /path/to/folder

Run the following command to convert all the images to WebP.

find . -type f \( -iname '*.png' -o -iname '*.jpg' -o -iname '*.jpeg' \) -exec sh -c 'cwebp -quiet "$1" -o "${1%.*}.webp"' _ {} \;

JPEG

JPEG is the most commonly used image format, and is supported by all browsers. If using WebP is too complex for you, use JPEG instead (and PNG if you want transparency).

SVG

SVG is a vector image format, which means that it is resolution independent. This means that you can scale the image without losing quality. It is also supported by all modern browsers. You can also theorycally write SVGs within your HTML files, which allows you to apply transitions and animations to your vectors. Doing so, while very powerful, can become quite complex, and is not recommended for beginners.

GIF

We don't recommend using GIF for images or videos, since it often is heavier than a JPEG or an MP4 video.

AVIF

AVIF is the newest image format, and is slowly but steadily recieving support by modern browsers. Since its support is still limited, we don't recommend using it for now. The AVIF format should still be on your radar though, since it is a great alternative for both images and videos.

Video formats

Selfhost vs Video hosting services

Handling videos on the web can be tricky. If you want to be sure your videos will load properly, we would recommend using video hosting services, such as YouTube, Vimeo, or Dailymotion. These services take care of all the technicalities of streaming videos, and allow you to focus on styling your content. Note that these services are not free, and you will need to pay for them.

If you want to host your videos on your own server, you might consider looking into which video format is best for your use case.

MP4

MP4 is the most commonly used video format, and is supported by all browsers. Since MP4 has become a default export option, we recommend using it for your videos.

WebM

Just like Webp is to JPEG, WebM is to MP4. It is a lossy format, and is supported by most modern browsers. It is also smaller than MP4, and can be smaller than JPEG. You can convert your videos to WebM using a variety of online tools, such as HandBrake or FFmpeg.

Reducing file size

Images

Images are often littered with unnecessary metadata, such as comments, EXIF data, and color profiles. We recommend using the free and open source ImageOptim tool to remove these metadata. You can simply drag and drop all your images into the application, and it will automatically optimize them for you. If you want finer control, ImageOptim lets you customise which compression settings to use.

Videos

Videos are more complex than images. The frame rate, resolution, bit rate, and codec are all important factors to consider when preparing your videos for the web. We recommend using the free and open source HandBrake tool to reduce the file size of your video and standardize their codecs, bit and frame rates, and resolutions.