TwicPics Components

[![NPM Version][npm-image]][npm-url]
[![License][license-image]][license-url]

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

$3

If you need to display critical images with _art direction_ support, you can use the component.

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

``html


media="(min-width: 1280px)"
srcset="wide-image.jpg, wide-image-2x.jpg 2x, wide-image-3x.jpg 3x"
>
media="(min-width: 768px)"
srcset="squared-image.jpg, squared-image-2x.jpg 2x, squared-image-3x.jpg 3x"
>
srcset="portrait-image.jpg, portrait-image-2x.jpg 2x, portrait-image-3x.jpg 3x"
src="portrait-image.jpg"
>



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

$3

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 component.

It's a drop-in replacement for the standard img tag based on the TwicPics Script.

`html





`

$3

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


`html





``

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 support@twic.pics.

[license-image]: https://img.shields.io/npm/l/@twicpics/components.svg?style=flat-square
[license-url]: https://raw.githubusercontent.com/twicpics/components/master/LICENSE
[npm-image]: https://img.shields.io/badge/npm-v0.33.0-orange.svg?style=flat-square
[npm-url]: https://npmjs.org/package/@twicpics/components/v/0.33.0