Script Set Up

The Script enables lazy loading together with automatic and dynamic sizing of your images. Lightweight and non-intrusive, this small piece of JavaScript only handles elements you specifically marked beforehand.

Installation

You simply have to include the Script from your own domain in your webpage. It is accessible through https://<sub>.twic.pics/?v1.

<script async defer src="https://<sub>.twic.pics/?v1"></script>
Replace <sub> with your own subdomain. You can find it in the "Domains" section of the back-office.

That's it, you're all set!

Enabling

If you want the Script to handle the source of an img element, the poster of a video element or the background image of any DOM element, simply specify a data-twic-src, data-twic-poster or data-twic-background attribute respectively:

<!-- image -->
<img data-twic-src="image:<path_to_image>">

<!-- poster -->
<video data-twic-poster="image:<path_to_image>">

<!-- background -->
<div data-twic-background="url('image:<path_to_image>')">
Please note how src and poster turned into data-twic-src and data-twic-poster and how the background image is now specified in the data-twic-background attribute rather than in CSS.

In all cases, the source image is https://<subdomain>.twic.pics/<path_to_image> but the Script will make sure it is sized properly based on the CSS context of the element by generating the proper API calls for you.

Behaviour

The Script will only issue an API call and actually load your image when the corresponding element becomes visible. So everything is lazy-loaded by default given you as fast an initial page load as possible.

You don't have to write any code. Everything is controlled declaratively using HTML attributes and CSS properties. Feel free to browse the rest of the Script documentation for more information.

responsive images

The All-In-One Toolbox For Your Images

The simplest, most powerful way to tackle responsive images.