A Simple Approach to LCP Image Optimization with TwicPics Components

This project exemplifies the blog post A Simple Approach to LCP Image Optimization with TwicPics Components.

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.

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 Content Image

If you want to display a content pixel-perfect image with optimized Cumulative Layout Shift (CLS), Low-Quality Image Placeholder (LQIP) and lazy loading out of the box, you can use the <TwicImg> component.

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

<!-- Before -->
<img src="https://example.com/your-image.jpg" />

<!-- After -->
<TwicImg src="your-image.jpg" />

Display a Critical Image

If you need to display critical images with art direction support, you can use the <TwicPicture> component.

It serves as a drop-in replacement for the standard picture tag and is based directly on the TwicPics API without any 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 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" />

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 nuxt.config file.

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

Examples

You can find an example in app.vue.

Feel free to inspire yourself from these different use cases to unleash the power of TwicPics in your own projects.

Setup

Make sure to install the dependencies:

# yarn
yarn install

# npm
npm install

# pnpm
pnpm install

Development Server

Start the development server on http://localhost:3000

npm run dev

Production

Build the application for production:

npm run build

Locally preview production build:

npm run preview

Check out the deployment documentation for more information.

Licence