TwicPics Components

What is TwicPics?

TwicPics is a Responsive Media Service Solution (SaaS) that enables on-demand responsive image & video generation.

With TwicPics, developers only deal with high-resolution versions of their media while end-users receive optimized, perfectly sized, device-adapted versions delivered from a server close to them.

TwicPics acts as a proxy. It retrieves your master file — from your web server, cloud storage, or DAM — and generates a device-adapted version with best-in-class compression, delivered directly to the end-user from the closest available delivery point.

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 based on the TwicPics Script.

<!-- 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

• Angular (version 11+)
• React, React Native, Gatsby and Next.js
• Svelte (version 3), Svelte (version 4), Svelte (version 5) and SvelteKit
• Vue.js (version 2), Vue.js (version 3), Nuxt.js (version 2) and Nuxt.js (version 3)
• Web Components

Online demonstrations

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

Questions and feedback

Feel free to submit an issue or ask us anything by emailing [email protected].