For images embedded with the script (all images except for the LCP image), we recommend adding an opacity transition in CSS. This will prevent a broken image from appearing before its actual appearance and make the image loading more visually appealing.

To do this, simply add the following CSS properties:

img[data-twic-src] {
  opacity: 0;
  transition: opacity 0.3s;
}

img[data-twic-src].twic-done {
    opacity: 1;
}

Most of our clients choose a 0.3s transition which appear to be the best trade-off for a fast and pleasant display effect.

How it works ?

The Script happens to tag elements with specific classes whenever images are loaded under the hood :

Loading Lifecycle