TwicPics Components

What is TwicPics?

We've recently launched TwicPics for videos. Read the announcement. 🚀

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 an proxy. It retrieves your master file — from your own 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 delivery point available.

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 own projects.

TwicPics Components are a drop-in replacement for <img> and <video> tags with optimized Cumulative Layout Shift (CLS), low-quality image placeholders, and lazy loading out of the box.

<!-- Before -->
<img src="https://assets.twicpics.com/examples/football.jpg" />

<!-- After -->
<TwicImg src="https://assets.twicpics.com/examples/football.jpg" />

Supported frameworks

Angular (version 11+)
React, React Native, Gatsby and Next.js
Svelte (version 3), Svelte (version 4) 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) and SvelteKit

Questions and feedback

Fell free to submit an issue or to ask us anything by dropping an email at support@twic.pics.