Announcing TwicPics for Videos

We’re proud to launch videos support in beta for all our Pro and Enterprise customers! We couldn’t be more excited to bring context-aware optimization and our transformation API to animated media. That’s right. All the TwicPics magic is now available for videos. Let’s dive in!

Introducing TwicPics for Animated Media

TwicPics videos aims to streamline the process of integrating images and videos. The ideal candidates for TwicPics video integration are hero videos, product videos, and thumbnails. All videos generated by the TwicPics API are muted, to be looped and played automatically. You can think of them as GIFs, but with high quality.

TwicPics enables integration of native, short videos embedded—not players for video streaming.

Features include:

Automatic layout-driven sizing & cropping

Blazing fast, URL-based API for transformation chaining

Context-aware generation of formats and codecs for full browser compatibility

Modern format output (MP4, WebM)

Multiple codecs output for full browser compatibility (h264, h265, vp9)

Out-of-the-box lazy loading

Automated poster generation

For more technical details on duration and weight limitations and formats and codecs, make sure to read our Video Optimization documentation.

Quick Start Guide

Let’s take a look at how we can integrate TwicPics video optimization solution into your website. First, we need to configure your project dependencies.

Installation

Add TwicPics components to your dependencies:

npm install @twicpics/components

Our components package comes with media integration best practices out-of-the-box. It is the recommended client integration.

This article will provide examples using the components package. If you cannot use the components, you can fallback to the vanilla JS script.

Now, let's install TwicPics in your application:

TwicPics has deeper integration with meta-frameworks such as Next.js, Gatsby, and NuxtJS. Check out their respective documentation.

You're all set! Let's get into the interesting stuff.

Usage

Now that your app is setup, you can optimize videos as following:

Result

For technical reasons, the actual videos on this page do not come from the https://demo.twic.pics domain, but it's the same original file.

The <TwicVideo> component interpreted the CSS layout to request the appropriate video optimization to the TwicPics API. Thanks to a default step of 100 for videos, TwicPics optimizes the number of variants to maximize cache efficiency.

Let's try to apply a transformation to our video. Say we want to change the focus point to be the top left corner ie. 0x0:

Result

Well, that doesn't look very good. But you got the idea.

You can also use the pre-transform prop to apply any transformations supported by the API, such as flips, zooms, crops, etc.

As of the beta launch, AI-powered focus with focus="auto" is not supported for videos yet.

If you open your browser developer tools to inspect the videos above, you’ll see that TwicPics generated all the <source> necessary to ensure full browser compatibility. What’s more—if you resize the window, you will see that TwicPics regenerates the API request URLs while taking into account the rendered size and the DPR (Device Pixel Ratio).

By using the components, you get automatic poster generation, low-quality image placeholder, and cumulative layout shifts (CLS) handling out-of-the-box. 🎉

Going Further

For a more in-depth documentation of everything video-related, we added a new Video Optimization section to our docs. For hero videos and other content where the Largest Contentful Paint (LCP) is at stake, we also designed a guide focused on Handling LCP videos.

We can't wait to hear your feedback on this major milestone for us. If you need help during your integration, please reach out to us using the live chat (at the bottom right of the screen.) We'll be glad to help! In case of bugs or feature requests with our components, you can open an issue on Github.

Videos are currently in beta for our Pro tier (and above) customers—we’re looking forward to expand it to all our users soon.