TwicPics Components

TwicPics components bring image & videos best-practices out-of-the-box to your favorite framework.

What is TwicPics Components?

TwicPics Components is a collection of web components that make it dead easy to unleash the power of TwicPics in your projects.

Whether you need to display a content image, showcase a short video, or ensure optimal performance with Large Contentful Paint (LCP) care, TwicPics Components has you covered.

Display a Critical Image

If you need to display critical images with art direction support, you can use the <TwicPicture> component.

It is a drop-in replacement for the standard picture tag and is based directly on the TwicPics API without additional effort.

<!-- Before -->
<picture>
  <source
    media="(min-width: 1280px)"
    srcset="wide-image.jpg, wide-image-2x.jpg 2x, wide-image-3x.jpg 3x"
  >
  <source
    media="(min-width: 768px)"
    srcset="squared-image.jpg, squared-image-2x.jpg 2x, squared-image-3x.jpg 3x"
  >
  <img
    srcset="portrait-image.jpg, portrait-image-2x.jpg 2x, portrait-image-3x.jpg 3x"
    src="portrait-image.jpg"
  >
</picture>

<!-- After -->
<TwicPicture
  src="your-master-image.jpg"
  ratio="3/4, @md 1, @xl 16/9"
/>

Display a Content Image

Suppose you want to display a pixel-perfect image with optimized Cumulative Layout Shift (CLS), Low-Quality Image Placeholder (LQIP), and lazy loading out of the box. In that case, you can use the <TwicImg> component.

It's a drop-in replacement for the standard img tag.

<!-- Before -->
<img src="https://example.com/your-image.jpg" />

<!-- After -->
<TwicImg src="your-image.jpg" />

Display a Video

For seamless playback of videos optimized with TwicPics, use the <TwicVideo> component. It's a sibling of <TwicImg> and serves as a drop-in replacement for the standard video tag.

<!-- Before -->
<video >
  <source src="https://example.com/your-video.mp4" type="video/mp4">
  <!-- ... other video sources ... -->
</video>

<!-- After -->
<TwicVideo src="your-video.mp4" />

Supported frameworks

Jump to the docs:

Angular
Flutter
React, React Native, Gatsby, and Next.js
Svelte 3, Svelte 4, Svelte 5 and SvelteKit
Vue 2 & Vue 3, and Nuxt 2 & Nuxt 3
Web Components

Live demos

Regardless of the framework you work with, TwicPics is the most efficient solution to deliver your images and your videos and make them as responsive as desired.

Explore our demos and integration examples for :

Angular
React, Next.js and Gatsby.js
Vue.js (version 2), Vue.js (version 3), Nuxt.js (version 2) and Nuxt.js (version 3)
Svelte (version 3), Svelte (version 4), Svelte (version 5) and SvelteKit

Feedback and support

TwicPics Components are open-source. Feel free to open an issue on GitHub for feature requests and bugs.

Essentials