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:
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>
muted
,
autoplay
,
loop
and
playsinline
attributes on your
<video>
elements. TwicPics adds them automatically to reproduce the behavior of GIFs.
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
output=image
lets TwicPics choose the best image format based on browser compatibility. It is also possible to force the output, eg.
output=png
.
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.
output=<codec>
transformation. GIFs transformed in videos default to MP4 format.
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
andh264
) - 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>
muted
attribute is still required for the browser to automatically play a video.
Browser codec compatibility
As of October 19th, 2022.
Codec | Chrome | Safari | Firefox | Edge | Opera |
---|---|---|---|---|---|
h265 (mp4) | ❌ | ✅ | ❌ | ❌ | ❌ |
vp9 (WebM) | ✅ | ❌ | ✅ | ✅ | ✅ |
h264 (mp4) | ✅ | ✅ | ✅ | ✅ | ✅ |