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

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!

Enabling

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.