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 a new 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: 30 seconds
• FPS: 30 FPS
• Pixels: 36 million
• 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

At the moment, the poster is always extracted from the first frame of the video. The ability to customize the selected frame is currently in development. Don't hesitate to manifest your interest by opening an issue or by writing to us via the live chat (bottom right of this page.)

Using GIFs sources

TwicPics can convert your heavy GIF files into light and powerful videos. When retrieving a file whose mime type is image/gif on a video path, TwicPics will automatically convert the GIF to video. 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 October 19th, 2022.