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.
Anywhere in your HTML document, preferably early on in the page, add the following line:
<script src="https://i.twic.pics/v1/script" async></script>
That's it, you're set!
Whenever you want the Script to handle the source of an image or the background image of an element, simply mark said element with the
twic class like so:
<!-- not handled --> <img src="some_url"> <!-- handled --> <img class="twic" data-src="some_url"> <!-- not handled --> <div style="background-image:url('some_url')"> <!-- handled --> <div class="twic" data-background="url('some_url')">
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.