/components-demo-astro

Demonstration of TwicPics components in an Astro project.

Primary LanguageAstroMIT LicenseMIT

TwicPics Components + Astro.js

This project is a demonstration project of TwicPics Components using and Astro.js with React.js integration.

How to build

Using npm

# install dependencies
$ npm install

# serve with hot reload at localhost:3000
$ npm run dev

# build for production
$ npm run build

Using yarn

# install dependencies
$ yarn install

# serve with hot reload at localhost:3000
$ yarn dev

# build for production
$ yarn build

Overview

What is TwicPics?

TwicPics is a Responsive Image Service Solution (SaaS) that enables on-demand responsive image 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 image proxy. It requests your master image, be it on your own web server, cloud storage or DAM, then 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.

Basically, TwicPics components replace img and video tags. They greatly and transparently optimize your CLS by providing LQIP (Low-Quality Image Placeholders) and Lazy Loading out of the box.

Simply replace this:

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

With this:

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

Thanks to the open source TwicPics Components, delivering responsive images in your Astro.js projects has never been easier.

TwicPics configuration

Requirement

The only requirement is to have a TwicPics account. If you don't already have one, you can easily create your own TwicPics account for free.

Configuring @twicpics/components

An example of configuration is set within scr/layouts/Layout.astro file.

All you have to do is set your configuration options to the desired values (see documentation).

Examples

All the examples proposed in this project are located in the src/components directory. Feel free to inspire yourself from these different use cases to unleash the power of TwicPics in your own projects.

Questions and feedback

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

👀 Want to learn more about TwicPics Components?

Explore our demos and integration examples for :

Licence

License