DEV Community: Miguel Beignon from TwicPics

A Simple Approach to LCP Image Optimization with TwicPics Components

Miguel Beignon from TwicPics — Mon, 05 Feb 2024 09:24:40 +0000

In a previous article, we delved into the common challenges of optimizing the Largest Contentful Paint (LCP) for images.
We explored best practices and showed how TwicPics streamlines the implementation of resolution switching through its user-friendly API and a single master image.

While the use of a single source file for all resolutions is already a significant improvement, it's evident that the code implementation is still complex and lengthy. Furthermore, the proposed solution does not optimize the Cumulative Layout Shift and does not allow for Art direction.

In this short tutorial, we will see how TwicPics Components (more precisely, the TwicPicture component) makes it easy to address all these issues.

The solution makes the most sense in a framework that handles SSR, and we have chosen to create an example of its usage with Nuxt 3. Of course, you are free to use the framework of your choice.

This tutorial requires using Node.js v18.0.0+ and TwicPics Components 0.27.0+.

Scaffold your new Nuxt 3 Project

You can skip this part if you want to integrate TwicPics Components into an existing Nuxt 3 project.

Setup

# creates a new starter project
npx nuxi@latest init <project-name>

Pick your preferred dependency manager (we chose yarn) and wait for your new project to be created.

You can now cd into your new project directory.

Start Nuxt

# starts and open your Nuxt app in development mode
yarn dev --open

If all goes well, Nuxt should now be serving your project on http://localhost:3000/ and you should see something like this:


Nuxt is running

If you get stuck at any point, you can refer to the Nuxt getting started page.

Install and configure TwicPics Components

Now that Nuxt is up and running, it is time to add and configure the Nuxt version of the TwicPics components.

In the following, we will use our test domain:https://demo.twic.pics
If you don't have a TwicPics domain yet, you can easily create your own for free.

Install TwicPics Components

Add the @twicpics/components package to your project:

# using yarn
yarn add @twicpics/components

Setting-up TwicPics Components

Since TwicPics components for Nuxt3 are packaged as a module, integration and configuration take place in the nuxt.config.ts file:

// nuxt.config.ts
export default defineNuxtConfig({
  // integration
  modules: [`@twicpics/components/nuxt3`],
  // configuration
  twicpics: {
    domain: `https://demo.twic.pics`, // set your own domain here
  },
});

And that's it. You are now ready to to use TwicPics components in your project.

TwicPicture enters the scene

As a remember, optimizing the display of LCP images, or more generally, critical images in a web project, we need to fill the srcset attribute of an img tag with a list of differently-sized versions of the same image. This is called resolution switching.

For example, at the end of the article discussing LCP image optimization, we had this code:

<img
  src="https://<your-domain>/<path-to-your-image>?twic=v1/resize=280"
  srcset="
    https://<your-domain>/<path-to-your-image>?twic=v1/resize=280   280w,
    https://<your-domain>/<path-to-your-image>?twic=v1/resize=480   480w,
    https://<your-domain>/<path-to-your-image>?twic=v1/resize=560   560w,
    https://<your-domain>/<path-to-your-image>?twic=v1/resize=840   840w,
    https://<your-domain>/<path-to-your-image>?twic=v1/resize=960   960w,
    https://<your-domain>/<path-to-your-image>?twic=v1/resize=1440 1440w
  "
/>

To do the same thing with TwicPicture, all we have to do is:

<TwicPicture src="path-to-your-image"/>

Let's verify this in our project by making the following changes to the app.vue file using puppy-dressed-as-a-reindeer.jpeg (jpeg - 6777 x 3812 px - 15.28 MB) as master file image :

// app.vue
<template>
  <TwicPicture
    src="puppy-dressed-as-a-reindeer.jpeg"
  />
</template>

Here is the generated code:

<img 
  alt="" 
  width="1536" 
  height="1536"
  loading="lazy" 
  srcset="
    https://demo.twic.pics/puppy-dressed-as-a-reindeer.jpeg?twic=v1/cover=3072x3072 3072w,
    https://demo.twic.pics/puppy-dressed-as-a-reindeer.jpeg?twic=v1/cover=2560x2560 2560w,
    https://demo.twic.pics/puppy-dressed-as-a-reindeer.jpeg?twic=v1/cover=2048x2048 2048w,
    https://demo.twic.pics/puppy-dressed-as-a-reindeer.jpeg?twic=v1/cover=1536x1536 1536w,
    https://demo.twic.pics/puppy-dressed-as-a-reindeer.jpeg?twic=v1/cover=1280x1280 1280w,
    https://demo.twic.pics/puppy-dressed-as-a-reindeer.jpeg?twic=v1/cover=1024x1024 1024w,
    https://demo.twic.pics/puppy-dressed-as-a-reindeer.jpeg?twic=v1/cover=768x768 768w,
    https://demo.twic.pics/puppy-dressed-as-a-reindeer.jpeg?twic=v1/cover=640x640 640w,
    https://demo.twic.pics/puppy-dressed-as-a-reindeer.jpeg?twic=v1/cover=320x320 320w
  " 
  src="https://demo.twic.pics/puppy-dressed-as-a-reindeer.jpeg?twic=v1/cover=1536x1536"
>

And this is what we should get on a DPR2 device when changing the viewport width from a small to a wide screen:


A Resolution Switching in action.

We obtain various squared variants, ideally compressed (webp), whose resolution is tailored to both the viewport and the pixel density of the device: resolution switching is fully functional.

To achieve the same result while showcasing an image in 16:9 format, we just need to modify app.vue as follows:

// app.vue
<template>
  <TwicPicture
    src="puppy-dressed-as-a-reindeer.jpeg"
    ratio="16/9"
  />
</template>

And this is what we get, this time on a DPR1 screen:


Resolution Switching for a 16:9 variant.

TwicPicture allows the display of images not only with various resolutions but also with different aspect ratios, all from a single master file.

You can find the complete list of TwicPicture properties here. Later on we'll explore how to leverage additional powerful transformations.

Design Control

Now that we know TwicPicture allows for managing aspect ratio along with resolution switching, it's time to explore how to implement Art Direction.

Let's reopen our app.vue file and modify it by configuring the ratio property following the mobile-first principle:

// app.vue
<!--
  This will display a:
  - 3/4 variant for small screen with width < 666px (a custom breakpoint is used here)
  - squared variant for screen with width ∈ [ 666px, 768px [
  - 4/3 variant for screen with width ∈ [ 768px, 1024px [
  - 21/9 variant for screen with width >= 1280px
-->
<template>
  <TwicPicture
    src="components/puppy-dressed-as-a-reindeer.jpeg"
    ratio="
      3/4
      @666 1
      @md 4/3
      @xl 21/9
    "
  />
</template>

Default breakpoint values are customizable during components configuration.

Here is the result on a DPR1 screen:


One single master file with art direction.

The result is moderately satisfying: we achieve the desired aspect ratios based on the screen size, but the image is poorly framed in its 21/9 variant. Let's fix the framing by adjusting the focus for that specific breakpoint:

// app.vue
<!--
  This will apply:
  - default focus transformation for screen with width < 1280px
  - focus="top" transformation for screen with width >= 1280px
-->
<template>
  <TwicPicture
    src="components/puppy-dressed-as-a-reindeer.jpeg"
    focus="@xl top"
    ratio="
      3/4
      @666 1
      @md 4/3
      @xl 21/9
    "
  />
</template>

This is the generated code:

<picture>
  <source
    height="549"
    width="1280"
    media="(min-width: 1280px)" 
    srcset="
      https://demo.twic.pics/puppy-dressed-as-a-reindeer.jpeg?twic=v1/focus=top/cover=3072x1317 3072w,https://demo.twic.pics/puppy-dressed-as-a-reindeer.jpeg?twic=v1/focus=top/cover=2560x1097 2560w,https://demo.twic.pics/puppy-dressed-as-a-reindeer.jpeg?twic=v1/focus=top/cover=1536x658 1536w,https://demo.twic.pics/puppy-dressed-as-a-reindeer.jpeg?twic=v1/focus=top/cover=1280x549 1280w
    " 
  >
  <source
    height="576"
    width="768"
    media="(min-width: 768px)"
    srcset="
      https://demo.twic.pics/puppy-dressed-as-a-reindeer.jpeg?twic=v1/cover=2048x1536 2048w,
      https://demo.twic.pics/puppy-dressed-as-a-reindeer.jpeg?twic=v1/cover=1536x1152 1536w,
      https://demo.twic.pics/puppy-dressed-as-a-reindeer.jpeg?twic=v1/cover=1024x768 1024w,
      https://demo.twic.pics/puppy-dressed-as-a-reindeer.jpeg?twic=v1/cover=768x576 768w
    "
  >
  <source
    height="666"
    width="666"
    media="(min-width: 666px)"
    srcset="
      https://demo.twic.pics/puppy-dressed-as-a-reindeer.jpeg?twic=v1/cover=1332x1332 1332w,
      https://demo.twic.pics/puppy-dressed-as-a-reindeer.jpeg?twic=v1/cover=666x666 666w
    "
    >
  <img
    alt=""
    height="888"
    width="666" 
    loading="lazy"
    srcset="
      https://demo.twic.pics/puppy-dressed-as-a-reindeer.jpeg?twic=v1/cover=1280x1707 1280w,
      https://demo.twic.pics/puppy-dressed-as-a-reindeer.jpeg?twic=v1/cover=640x853 640w,
      https://demo.twic.pics/puppy-dressed-as-a-reindeer.jpeg?twic=v1/cover=320x427 320w
      " 
  >
</picture>

And this is the result with a fixed focus on wide screen:


A true art direction.

Other properties of TwicPicture are configurable based on breakpoints, allowing simple and great flexibility in the implementation of Art Direction.

Feel free to explore the documentation for a deeper understanding of TwicPicture and its design control feature.

Handling Best Practices

Don't forget the sizes

So far, we have displayed an image that occupies the entire width of the viewport.

Let's modify our example to restrict the width of our image to a maximum of 1200px. Like this:

// app.vue
<template>
  <div class="container">
    <TwicPicture
      src="components/puppy-dressed-as-a-reindeer.jpeg"
      focus="@xl top"
      ratio="
        3/4
        @666 1
        @md 4/3
        @xl 21/9
      "
      sizes="
        (max-width: 1200px) 100vw,
        1200px
      "
    />
  </div>
</template>

<style>
.container {
  margin: auto;
  max-width: 1200px;
}
</style>

You've noticed that we used the sizes property to inform the browser about the effective size of the image to be displayed for a given viewport width.

Without this property, the browser would have loaded the image corresponding to 100% of the viewport, potentially increasing loading times and impacting the LCP score.

It's an easy trap to fall into, so it's crucial not to forget to assign a value to the sizes property.

Here is the result, with and without sizes:


Don't forget the sizes.

Here, forgetting to assign a value to the sizes property multiplies the weight of the image by 4!

Improve LCP Resource Load Delay Subpart

In our previous article about Image Element LCP optimization, we discussed the issue of lazy-loading and priority hints.

With TwicPicture, applying best practices to improve LCP score is as simple as adding the eager property to our component call: this will effectively disable lazy loading for this image and set fetchpriority attribute to high.

// app.vue
<template>
  <div class="container">
    <TwicPicture
      src="components/puppy-dressed-as-a-reindeer.jpeg"
      eager
      focus="@xl top"
      ratio="
        3/4
        @666 1
        @md 4/3
        @xl 21/9
      "
      sizes="
        (max-width: 1200px) 100vw,
        1200px
      "
    />
  </div>
</template>

<style>
.container {
  margin: auto;
  max-width: 1200px;
}
</style>

This time the generated code becomes

<picture>
  <source
    height="549"
    width="1280"
    media="(min-width: 1280px)" 
    srcset="
      https://demo.twic.pics/puppy-dressed-as-a-reindeer.jpeg?twic=v1/focus=top/cover=3072x1317 3072w,https://demo.twic.pics/puppy-dressed-as-a-reindeer.jpeg?twic=v1/focus=top/cover=2560x1097 2560w,https://demo.twic.pics/puppy-dressed-as-a-reindeer.jpeg?twic=v1/focus=top/cover=1536x658 1536w,https://demo.twic.pics/puppy-dressed-as-a-reindeer.jpeg?twic=v1/focus=top/cover=1280x549 1280w
    " 
  >
  <source
    height="576"
    width="768"
    media="(min-width: 768px)"
    srcset="
      https://demo.twic.pics/puppy-dressed-as-a-reindeer.jpeg?twic=v1/cover=2048x1536 2048w,
      https://demo.twic.pics/puppy-dressed-as-a-reindeer.jpeg?twic=v1/cover=1536x1152 1536w,
      https://demo.twic.pics/puppy-dressed-as-a-reindeer.jpeg?twic=v1/cover=1024x768 1024w,
      https://demo.twic.pics/puppy-dressed-as-a-reindeer.jpeg?twic=v1/cover=768x576 768w
    "
  >
  <source
    height="666"
    width="666"
    media="(min-width: 666px)"
    srcset="
      https://demo.twic.pics/puppy-dressed-as-a-reindeer.jpeg?twic=v1/cover=1332x1332 1332w,
      https://demo.twic.pics/puppy-dressed-as-a-reindeer.jpeg?twic=v1/cover=666x666 666w
    "
    >
  <img
    alt=""
    fetchpriority="high"
    height="888"
    width="666" 
    loading="eager"
    sizes="
      (max-width: 1200px) 100vw,
      1200px
    "
    srcset="
      https://demo.twic.pics/puppy-dressed-as-a-reindeer.jpeg?twic=v1/cover=1280x1707 1280w,
      https://demo.twic.pics/puppy-dressed-as-a-reindeer.jpeg?twic=v1/cover=640x853 640w,
      https://demo.twic.pics/puppy-dressed-as-a-reindeer.jpeg?twic=v1/cover=320x427 320w
      " 
  >
</picture>

The Trial by Fire

It's time to check the LCP score of a web page using TwicPicture.

To do this, we've created a small demonstration site where, in addition to TwicPicture which handles the LCP image, we use TwicImg to display content images.

Here is the result of the performance audit with Chrome's Lighthouse:


The Trial by Fire

Our page achieves a performance score of 100% with a LCP metric equal to 0.5 s.

Significantly the CLS metric is zero as TwicPics Components, by default, seamlessly optimize Cumulative Layout Shift.

To go further

Suppose the background color of the main image isn't exactly right. Or the protagonist's orientation isn't correct.
Should we take another photo?

Fortunately, the answer is no. TwicPics API and its transformations lets you make these adjustments on the fly.

For example, to change the background color to blue #145480 and orient the puppy's head on the other side, simply use the following transformation background=remove+145480/flip=x.

To apply it to our main image, simply modify the app.vue file by adding the preTransform property as follows:

// app.vue
  ...
    <TwicPicture
      src="components/puppy-dressed-as-a-reindeer.jpeg"
      eager
      focus="@xl top"
      preTransform="background=remove+145480/flip=x"
      ratio="
        3/4
        @666 1
        @md 4/3
        @xl 21/9
      "
      sizes="
        (max-width: 1200px) 100vw,
        1200px
      "
    />
  ...

And that's it:


Using stunning transformations on the fly.

If you want to learn more about the versatile options offered by TwicPicture, feel free to explore its properties.

Conclusion

The proper display of a critical image on a web page involves the use of picture, source, and img tags. The associated code is often verbose, time-consuming to develop, and may lead to poor results.

TwicPics Components, particularly the TwicPicture component, stands out as a robust and efficient solution for optimizing the Largest Contentful Paint (LCP) in web projects, with best practices out of the box, including Cumulative Layout Shift (CLS) optimization.

Whether the objective is to achieve optimal performance or manage design control, TwicPicture comprehensively and flexibly addresses these challenges, offering a streamlined approach to handling critical images. Additionally, it provides the capability to leverage the power of TwicPics: perfectly compressed images, rich and scalable transformations, and the benefits of its worldwide CDN proximity.

In this tutorial, we used Nuxt3 to assess the ease of use and effectiveness of TwicPicture. The source code for the test project is at your disposal, allowing you to conduct your own experiments freely. Feel free to replicate the same in the framework of your choice.

TwicPics Components are both free and open-source. You can test them for yourself without any cost. The only requirement is to have a TwicPics account, which you can easily create for free by signing up here.

Introducing TwicPics Components

Miguel Beignon from TwicPics — Mon, 22 Aug 2022 08:56:35 +0000

Is it possible to simply (and efficiently) publish images and short videos on a website? This is the question we want to explore in this post about TwicPics Components.

Introduction

TwicPics is a SaaS for responsive image services. It provides optimized, perfectly sized, and context-aware media from a single high-resolution version. All that's left to do is display this media in the browser. This is precisely the part that TwicPics Components handles.

TwicPics Components is a free and open-source web component collection that replaces img and video tags.

  <!-- a classical img usage -->
  <img src="path/to/image" />

  <!-- a TwicPics img component usage -->
  <TwicImg src="path/to/image" />

Available for the most popular frameworks (Angular, React, Gatsby, Next.js, Svelte,Vue.js (version 2), Vue.js (version 3), Nuxt.js, and native Web Components), they allow you to integrate the TwicPics solution quickly and easily into your projects.

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

In the first part of this post, we will write, step by step, the code needed to overcome the various difficulties related to publishing media in a browser: lazy loading, CLS optimization, respect of aspect-ratio, filling option, LQIP (Low-Quality Image Placeholders).

In the second part, we will see how easy it is to do the same thing (and even more) by using TwicPics Components.

Part One - Displaying image without TwicPics Components

We consider here only images. For videos, simply replace <img> with <video>.

The image used in this section is https://assets.twicpics.com/examples/cat_1x1.jpg (jpg - 1561x1561px - 428kB).

Layout-Driven Pattern from scratch

Let's start by loading the image into the browser.

We use the TwicPics Script and the data-twic-src property instead of the native src attribute.

<!-- Requested: jpg - 1561x1561px - 428kB -->
<!-- Received: webP - 300 x 300 px - 7.2 kB -->
<img data-twic-src="image:cat_1x1.jpg" width="300px" height="300px">

<!-- Installation of TwicPics. That's it, you're all set! -->
<script src="https://demo.twic.pics/?v1" async defer></script>

We can improve this snippet by implementing a primary level of LQIP.

We tell the browser to load a lightweight blurry placeholder first by using the output=preview API transformation and to replace it with the pixel-perfect version later.

<img 
    data-twic-src="image:cat_1x1.jpg"
    src="https://demo.twic.pics/cat_1x1.jpg?twic=v1/output=preview"
    width="300px" 
    height="300px"
>

<!-- Installation of TwicPics -->
<script src="https://demo.twic.pics/?v1" async defer></script>

At this stage, we load an image that is perfectly sized for the display area, ideally compressed and with a working preview.

But as its size is fixed, it is not responsive.

Let's modify our snippet so that the image occupies the full size of its potential container: aka the layout-driven pattern.

<img 
    data-twic-src="image:cat_1x1.jpg"
    src="https://demo.twic.pics/cat_1x1.jpg?twic=v1/output=preview"
>

<!-- Installation of TwicPics -->
<script src="https://demo.twic.pics/?v1" async defer></script>

img {
  display:block;
  width:100%;
  height:100%;
}

Let's test it in the example below.

<!-- Container size set to 200 px wide -->
<div style="width:200px;">
  <img 
        data-twic-src="image:cat_1x1.jpg"
        src="https://demo.twic.pics/cat_1x1.jpg?twic=v1/output=preview"
        >
</div>

<!-- Container size set to 300px px wide -->
<div style="width:300px;">
  <img 
        data-twic-src="image:cat_1x1.jpg"
        src="https://demo.twic.pics/cat_1x1.jpg?twic=v1/output=preview"
        >
</div>

<!-- Container size set to 400x200 px -->
<div style="width:400px;height:200px">
  <img 
        data-twic-src="image:cat_1x1.jpg"
        src="https://demo.twic.pics/cat_1x1.jpg?twic=v1/output=preview"
        >
</div>

Here is the result:


Layout Driven - First attempt

The network console shows us that we have loaded 4 images.
The first one corresponds to the preview.

The 3 others correspond to the images returned by the TwicPics SaaS.

What happened here?

1 - the script understood the display context and asked for the single master image to be resized to fill the 3 containers. This is the good news.

2 - the resizing of the third image brings back a distorted image. We need to specify the filling method (cover or contain).

Let's use object-fit to indicate how the image should fit into its container.

We set cover as the default and add a CSS class so we can choose the contain fill option from our template.

img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.contain{
  object-fit: contain;
}

Let's test our modifications with this new example:

<!-- Container size set to 200 px wide -->
<div style="width:200px;">
  <img
        data-twic-src="image:cat_1x1.jpg"
        src="https://demo.twic.pics/cat_1x1.jpg?twic=v1/output=preview"
        >
</div>

<!-- Container size set to 400x200 px -->
<div style="width:400px;height:200px">
  <img
        data-twic-src="image:cat_1x1.jpg"
        src="https://demo.twic.pics/cat_1x1.jpg?twic=v1/output=preview"
        >
</div>

<!-- Container size set to 400x200 px -->
<div style="width:400px;height:200px">
  <!-- Sets object-fit to contain -->
  <img class="contain"
        data-twic-src="image:cat_1x1.jpg"
        src="https://demo.twic.pics/cat_1x1.jpg?twic=v1/output=preview"
        >
</div>


Layout Driven - Second attempt

The TwicPics script automatically applied the cover or contain transformations depending on the display context.

We now have an image displayed without distortion and whose rendering is controlled by the layout. As we want to manage responsive images, we should not set the size of the display area.

Here is a Codepen to test our quick snippet and see how much work remains to be done.
Feel free to look at the network console and resize your browser to see what's happening.

We still have 2 serious problems. We don't manage the aspect ratio nor the CLS optimization.

That's what we are going to fix here.

Layout Driven Pattern + Aspect Ratio Boxes

It's time to integrate the concept of CSS aspect ratio boxes, aka the padding trick.

This CSS hint allows us to manage the aspect ratio (even on old browsers) and optimize the CLS. Of course, you could also use the aspect-ratio CSS property if you target modern browsers only.

<main>

  <!-- Empty div but with a reserved 1:1 aspect-ratio area -->
  <div class="wrapper squared"> 
  </div>

  <!-- Empty div but with a reserved 2:3 aspect-ratio area -->
  <div class="wrapper portrait">
  </div>

  <!-- Empty div but with a reserved 3:2 aspect-ratio area -->
  <div class="wrapper landscape">
  </div>

</main>
<div>I Will Not CLS</div>

/* layout setting */
main {
  padding: 2em;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  align-items: center;
  grid-gap: 1em;
}

div {
  background-color: #1CFFA6;
}

/* padding trick factorisation (scss function)  */
@mixin aspect-ratio($width, $height) {
  position: relative;
  overflow: hidden;

  &:before {
    display: block;
    content: "";
    width: 100%;
    padding-top: ($height / $width) * 100%;
  }
}

/* our aspect-ratio box: let us call it our twic container */
.wrapper {
  border: 10px solid red;
  width: 100%;
}

/* setting a 1:1 aspect ratio */
.squared{
  @include aspect-ratio(1, 1);
}

/* setting a 3:2 aspect ratio */
.landscape{
  @include aspect-ratio(3, 2);
}

/* setting a 2:3 aspect ratio */
.portrait{
  @include aspect-ratio(2, 3);
}


Aspect Ratio Boxes

As the TwicPics script determines the transformations to be applied according to the context of the display area, all we have to do is place images in the reserved areas.

Here is a code pen where we have integrated the images in cover and contain mode.

Feel free to open the network console and see what happens when you scroll down.

Improving the user experience

We are almost done.

At this point, we load a perfectly sized and ideally compressed image. Aspect ratio is managed as well as the CLS optimization. The LQIP method reduces the perceived loading time, but the transition between preview and final image remains too rough.
This can be improved by taking advantage of TwicPics's life cycles.

Here are the few modifications to be made:

<!-- Blurry image is moved from img to the wrapper -->
<div 
  class="wrapper squared"
  style="background-image:url('https://demo.twic.pics/cat_1x1.jpg.twic=v1/output=preview');"
  >
    <img
      data-twic-src="image:cat_1x1.jpg"
    >
</div>
...
<div 
  class="wrapper portrait contain"
  style="background-image:url('https://demo.twic.pics/cat_1x1.jpg?twic=v1/contain=667x1000/output=preview');"
  >
    <img class="contain"
      data-twic-src="image:cat_1x1.jpg"
    >
</div>

.wrapper {
  border: 10px solid red;
  width: 100%;
  background-size:cover;
  background-repeat: no-repeat;
  background-position: center;
  overflow: hidden;

  & img {
    /** opacity set to 0 **/
    opacity:0;
    /** animation on opacity property **/
    transition-property: opacity;
    will-change: opacity;
    transition-delay: 0s;
    transition-duration: 400ms;
    transition-timing-function: ease;

    &.twic-done{
      /** opacity set to 1 on image loaded event **/
      opacity:1;
    }
  }

  .contain {
    object-fit: contain;
    background-size: contain;
  }

}

Here is a Codepen with complete integration.

Intermission

We can now display images that are perfectly sized for the display area. In addition, the CLS is optimized, lazy loading works, and we have implemented Low-Quality Image Placeholders (LQIP).

But it is far from perfect:

the HTML and CSS code is a bit heavy
some features would deserve to be more flexible (aspect ratio, display mode...)
LQIP would require the addition of some javascript to be handled automatically.

A block of code remains to be done, including this HTML structure, CSS code, and the necessary javascript. In short, a Web Component.

Part Two - TwicPics Components to the rescue

The examples below use the React version of TwicPics Components. They can easily be adapted to other available versions.

Configuration

In the first part of this post, to use the TwicPics SaaS, we loaded the script by adding:

<!-- Installation of TwicPics -->
<script src="https://demo.twic.pics/?v1" async defer></script>

The equivalent for TwicPics Components is the following code:

/* index.js (or jsx) */

/* imports TwicPics Components */
import { installTwicPics } from "@twicpics/components/react";
import "@twicpics/components/style.css";

/* configuration */
installTwicPics({
  domain: `https://demo.twic.pics`
});

Our TwicPics Components are now ready to be used, and we can move on to the next step.

Basic Usage

To reproduce the previous example, all we have to do is:

/* your-template.js (or jsx) */

/* imports the component */
import { TwicImg } from "@twicpics/components/react";
...

<!-- Uses the component -->
const TwicSample = () => {
  return (
    <main>
      <TwicImg src="cat_1x1.jpg" />
      <TwicImg src="cat_1x1.jpg" ratio="2/3" />
      <TwicImg src="cat_1x1.jpg" ratio="3/2" />
      <TwicImg src="cat_1x1.jpg" mode="contain" />
      <TwicImg src="cat_1x1.jpg" ratio="2/3" mode="contain" />
      <TwicImg src="cat_1x1.jpg" ratio="3/2" mode="contain" />
    </main>
  );
};

export default TwicSample;

/* The css of the components is embedded in the installation */
/* Nothing to add here */

See how easy it is to manage the aspect-ratio and the filling option with ratio and mode properties.

Here is a Codesandbox with the complete example.

Everything is in place: CLS optimization, LQIP, Lazy Loading, respect of aspect-ratio, and fill option.

NB: in the contain mode, the aspect ratio is applied to the display area, not the image itself.

Templating driven components

The template controls the behavior of TwicPics Components through the properties they expose.

We can see these properties working in the following online examples: ratio, mode, focus, placeholder, position, transition.

As an example, we can adapt the transition time of the LQIP by setting the transitionDuration attribute. We can even disable LQIP while keeping the CLS optimization by setting placeholder to none.

/* your-template.js (or jsx) */

/* imports the component */
import { TwicImg } from "@twicpics/components/react";
...

<!-- Uses the component -->
const TwicSample = () => {
  return (
    <main>
      /* Default behavior */
      <TwicImg src="cat_1x1.jpg" />

      /* No placeholder but CLS still optimized */
      <TwicImg src="cat_1x1.jpg" placeholder="none"/>

      /*  A long transition */
      <TwicImg src="cat_1x1.jpg" transitionDuration="10000ms" />
    </main>
  );
};

export default TwicSample;

A full description of those properties is available here.

Style-driven components

TwicPics Components can also be set up by using pure CSS through the power of CSS variables.

The list of usable variables is available here.

/** <your-style>.css **/

.landscape {
  /** applies a 2/3 aspect ratio for all landscape class elements **/
  --twic-ratio: calc(2/3);
}

.portrait {
  /** applies a 3/2 aspect ratio for all portrait class elements **/
  --twic-ratio: calc(3/2);
}

.square{
   /** applies a 1/1 aspect ratio for all square class elements **/
  --twic-ratio: calc(1);
}

.contain {
  /** applies a contain fill option for all contain class elements **/
  --twic-mode: contain;
}

/* your-template.js (or jsx) */

/* imports the component */
import { TwicImg } from "@twicpics/components/react";
...

<!-- Uses the component -->
const TwicSample = () => {
  return (
    <main className="contain portrait">
      <TwicImg src="cat_1x1.jpg" className="square" />
      <TwicImg src="cat_1x1.jpg" />
      <TwicImg src="cat_1x1.jpg" className="landscape" />
    </main>
  );
};

export default TwicSample;

Here is a Codesandbox that demonstrates the style-driven approach.

Feel free to check the features demo.

What about Art Direction?

We saved the best example for last.

Since the advent of responsive design, art direction has always been the worst problem to deal with.

Adapting the image size to the device is no longer a problem. But what about its aspect ratio?

There are several approaches to solve the problem.

For example, one could imagine this solution using TailwindCSS and TwicPics Components

/** Dealing with four element in our template **/

const ArtDirectionSample = () => {
  <div className="sm:hidden">
    <TwicImg src="cat_1x1.jpg" ratio="3/4"/>
  </div>
  <div className="hidden md:block lg:hidden">
    <TwicImg src="cat_1x1.jpg" ratio="1"/>
  </div>
  <div className="hidden lg:block xl:hidden">
    <TwicImg src="cat_1x1.jpg" ratio="4/3"/>
  </div>
  <div className="hidden xl:block">
    <TwicImg src="cat_1x1.jpg" ratio="16/9"/>
  </div>
};

export default ArtDirectionSample;

With TwicPics Components and the style-driven approach, the solution becomes so simple.

First, we define some CSS rules:

/** <your-style>.scss **/

/** Breakpoint definition **/
$breakpoint-md: "only screen and (min-width: 768px)";
$breakpoint-lg: "only screen and (min-width: 1024px)";
$breakpoint-xl: "only screen and (min-width: 1280px)";


/** mobile first **/
.style-driven-responsive {
  --twic-ratio: calc(3/4);
}

/** aspect ratio definition vs breakpoints**/
@media #{ $breakpoint-md } {
  .style-driven-responsive {
    --twic-ratio: calc(1);
  }
}

@media #{ $breakpoint-lg } {
  .style-driven-responsive {
    --twic-ratio: calc(4/3);
  }
}

@media #{ $breakpoint-xl } {
  .style-driven-responsive {
    --twic-ratio: calc(16/9);
  }
}

Then, we write our template with a single component that will follow our CSS directives.

/* your-template.js (or jsx) */

/* imports the component */
import { TwicImg } from "@twicpics/components/react";
...

const TwicSample = () => {
  /** Only one element in our template **/
  return (
    <div className="style-driven-responsive">
      <TwicImg src="cat_1x1.jpg" />
    </div>
  );
};

export default TwicSample;

Here is a Codesandbox to play with.

Feel free to check the Art Direction demo.

Conclusion

It is possible to simply and efficiently deliver images and short videos on a website. As simple as writing:

  <img src="path/to/image" />

but with the condition of writing:

  <TwicImg src="path/to/image" />

TwicPics Components are free and open-source. Don't hesitate to test them for yourself.
The only requirement to use them is to have a TwicPics account. If you don't already have one, you can easily create your own TwicPics account for free.

In a future article, we'll go into more detail about integrating the components into Next.js and Gatsby.

In the meantime, feel free to explore our demonstrations for Angular, React, Next.js, Gatsby.js and Vue.js (version2).

Stay tuned :-)