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.
It's as simple as including the script from your subdomain. The Script is located at
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!
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.
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.