🚀 We're launching Video Optimization in beta! Read the announcement.

Handling LCP Videos

Learn how to handle the Largest Contentful Paint for your hero videos with TwicPics.

The API is not suitable for hero videos with an LCP stake, as the equivalent of the <picture> tag does not yet exist for videos. As for the Script, it tends to generate too many variants when used to optimize hero videos which are usually displayed in full width. This is partly due to the fact that the Script respects the defined step.

We introduced the data-twic-intrinsic attribute to solve all these problems.

The data-twic-intrinsic attribute can be used to specify the intrinsic dimensions of the original hero video:

  • it prevents the Script from generating too many variants for better caching and better performance
  • it prevents any form of upscaling — even if videos are not resized beyond their dimensions by default
  • it allows using the Script for hero videos while perfectly optimizing the LCP metric in real time

Syntax: data-twic-intrinsic="<width>x<height>"

<!-- HTML source code -->
<div class="video-container">
  <video
    data-twic-src="image:video/skater.mp4"
    data-twic-intrinsic="1920x1080"
  ></video>
</div>
responsive images

The All-In-One Toolbox For Your Medias

The simplest, most powerful way to tackle responsive images & videos