Set Up

The Script enables lazy loading together with automatic and dynamic sizing of your images. It is lightweight and non-intrusive: it will never handle an element you haven't specifically marked beforehand.

Installation

It's as simple as including the script from your subdomain. The Script is located at https://<subdomain>.twic.pics/?v1.

For instance, for the subdomain sub, add the following line in your HTML document, preferably early on in the page:

<script src="https://sub.twic.pics/?v1" async></script>

That's it, you're all set!

Enabling

Whenever you want the Script to handle the source of an img element or the background image of any DOM element, simply mark said element with the twic class like so:

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

<!-- background -->
<div class="twic" data-background="url('image:<path_to_image>')">

Please note how src turned into data-src and how the background image is now specified in the data-background attribute rather than in CSS.

In both cases, the source image will be 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

Only when an element becomes visible will the Script issue any API call and actually load your image. So everything is lazy-loaded by default given you as fast a 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.