Video Optimization

Learn to implement video optimization best practices.

TwicPics videos are short, muted, auto-playing native HTML video elements. They enable integration of hero, product, and thumbnail videos.

Overview

TwicPics aims at making video integration as simple as integrating images.

To that end, we implement a set of defaults to maximize performance and encourage best practices. The following default values apply to video medias:

• Default step of 100
• Output with a quality of 70.

To better address video-specific optimization concerns, we introduced the data-twic-intrinsic attribute (or instrisic prop in components) to prevent upscaling and limit the number of variants generated.

Limitations

The following limitations apply to the source video files that TwicPics can optimize:

• Duration: 900 frames (30 seconds at 30fps, 37.5 seconds at 24fps)
• FPS: no limit though we recommend using 24fps which is plenty enough for the web and allows for longer videos (TwicPics will not modify the frame rate of videos)
• Pixels: 36 millions
• Weight: 36MB

How It Works

In the example below, we set the URL of the original file in the data-twic-src attribute, define our CSS rules, and let TwicPics take care of the rest. The script generates all necessary API requests to optimize the video and adds the <source> elements in the correct order to ensure both browser compatibility and optimal quality.

Source code

<!-- index.html -->
<div class="video-container">
  <video data-twic-src="image:video/skater.mp4"></video>
</div>

/* style.css */
.video-container {
  position: relative;
  padding-top: calc(height / width * 100%);
  width: 100%;
}

video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

Output code

<!-- index.html after TwicPics has run -->
<div class="video-container">
  <video
    data-twic-src="image:video/skater.mp4"
    class=" twic-done"
    muted
    autoplay
    loop
    playsinline
  >
    <source
      src="https://demo.twic.pics/video/skater.mp4?twic=v1/cover=800x1040/output=h265"
      type="video/mp4;codecs=hvc1"
    />
    <source
      src="https://demo.twic.pics/video/skater.mp4?twic=v1/cover=800x1040/output=vp9"
      type="video/webm;codecs=vp9"
    />
    <source
      src="https://demo.twic.pics/video/skater.mp4?twic=v1/cover=800x1040/output=h264"
    />
  </video>
</div>

Note that your videos will never be resized beyond their original dimensions. This integration is therefore sufficient for most of your videos, especially product or thumbnail videos. For hero videos that are the Largest Contentful Paint element of your page, read our handling LCP videos guide.

Generating Posters

You can manually create video posters by using the TwicPics API. The output=image transformation extracts the first frame of a video and transforms it to an image. When using data-twic-poster, this transformation is requested by default.

<video
  data-twic-poster="media:video.mp4"
  data-twic-src="media:video.mp4"
></video>

Example:

• Original video: make-my-lemonade-1.mp4
• Generated poster: /make-my-lemonade-1.mp4?twic=v1/output=image

By default, the poster is based on the first frame of the source video. The very next section will show you how to use the from transformation to change this behaviour.

Video Slicing

The TwicPics API features three transformations that can be used to extract a portion of the original video:

• from to set when the portion should start from,
• to to set when the portion should stop,
• duration, an alternative to to that sets how long the portion should be.

All three transformations accepts numbers in seconds. For instance from=2.5/duration=1.5 will extract the portion of the original vidéo from the frame at the 2.5 second mark up to the frame at the 4 second mark.

For all intents and purposes, from=2.5/duration=1.5 is strictly equivalent to from=2.5/to=4.

One immediate use-case for these transformations is to extract a specific frame of the video to be used as a poster.

The following example will start the video at the 5 second mark and will use the frame at the 5 second mark as a poster.

<video
  data-twic-poster="media:video.mp4"
  data-twic-src="media:video.mp4"
  data-twic-transform="*/from=5"
></video>

One big issue with the example above is that both the video and the poster are impacted. If you wish to keep the entire video and still use the frame at the 5 second mark as a poster, you'd use the data-twic-poster-transform attribute so that the from transformation is only applied to the poster:

<video
  data-twic-poster="media:video.mp4"
  data-twic-poster-transform="*/from=5"
  data-twic-src="media:video.mp4"
></video>

You could also extract a portion of the video at the same time by using the data-twic-src-transform attribute like so:

<video
  data-twic-poster="media:video.mp4"
  data-twic-poster-transform="*/from=5/output=image"
  data-twic-src="media:video.mp4"
  data-twic-src-transform="*/from=3/duration=6"
></video>

Here, the poster is taken at the 5 second mark while the video is an extract from second 3 up to second 9.

Using GIFs sources

TwicPics can convert your heavy GIF files into lightweight videos. When retrieving an animated GIF file on a video path, TwicPics will automatically convert it to a modern video format. All usual transformations can be used when transforming GIFs this way.

This demo website demonstrates an example of the performance gains when transforming a GIF file to a video file.

Formats & Codecs Support

Formats

While TwicPics accepts your original videos in all formats, we optimize and deliver your videos:

• in MP4 format (codecs h265 and h264)
• in WebM format (codec vp9)

TwicPics applies these formats and codecs so that your videos can be played by all browsers, depending on their compatibility (see Can I Use for more information).

To help you quickly produce your videos in different formats compatible with each browser, the TwicPics API offers the output=<codec> transformation.

Codecs

TwicPics supports the following codecs:

h265

Transformation syntax: output=h265

• generates a video in MP4 format
• the type attribute of the <source> element must be: type="video/mp4;codecs=hvc1"
• compatible with Safari only

<video>
  <source
    src="https://demo.twic.pics/video/skater.mp4?twic=v1/output=h265"
    type="video/mp4;codecs=hvc1"
  />
</video>

vp9

Transformation syntax: output=vp9

• generates a video in WebM format
• the type attribute of the <source> element must be: type="video/webm;codecs=vp9"
• not compatible with Safari

<video>
  <source
    src="https://demo.twic.pics/video/skater.mp4?twic=v1/output=vp9"
    type="video/webm;codecs=vp9"
  />
</video>

h264

Transformation syntax: output=h264

• generates a video in MP4 format
• no type attribute required
• compatible with all browsers

<video>
  <source src="https://demo.twic.pics/video/skater.mp4?twic=v1/output=h264" />
</video>

Below is a complete example of integrating a video with the TwicPics API, according to the order recommended for the declaration of the <source> elements and the different supported codecs:

<video muted autoplay loop playsinline>
  <!-- compatible with Safari only -->
  <source
    src="https://demo.twic.pics/video/skater.mp4?twic=v1/output=h265"
    type="video/mp4;codecs=hvc1"
  />
  <!-- not compatible with Safari -->
  <source
    src="https://demo.twic.pics/video/skater.mp4?twic=v1/output=vp9"
    type="video/webm;codecs=vp9"
  />
  <!-- compatible with all browsers -->
  <source src="https://demo.twic.pics/video/skater.mp4?twic=v1/output=h264" />
</video>

Browser codec compatibility

As of March 8th, 2023.