TwicPics Components + Svelte + Vite
This project is a demonstration project of TwicPics Components using Svelte4.
Recommended IDE Setup
How to build
Using npm
# install dependencies
$ npm install
# serve with hot reload at localhost:3000
$ npm run dev
# build for production and launch server
$ npm run build
$ npm run preview
Using yarn
# install dependencies
$ yarn install
# serve with hot reload at localhost:3000
$ yarn serve
# build for production and launch server
$ yarn build
$ yarn preview
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 Svelte4 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
TwicPics components for Svelte4 comes as an ES module.
An example of configuration is already set within main.js 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 lib 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 [email protected].
Licence
Top categories
Need a Svelte website built?
Hire a professional Svelte developer today.