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.