The Script can be configured by adding specific parameters to the Script URL. Each of these parameters has a default that should be perfectly suited to your needs pretty much all the time.
0.2 (any value that is not a number will be ignored)
The Script will lazy-load media by default. To avoid too abrupt a transition with elements appearing into view and then media very obviously loading afterwards, the Script will "anticipate" lazy loading by a factor of the actual viewport. This behaviour is controlled by
With the default of
0.2 and for a viewport 800 pixels wide per 600 pixels high, the Script will consider as visible any element within a rectangle going from coordinates
(-160,-120) to coordinates
(960,720). You could set
1 and anticipate lazy loading by an entire screen: the rectangle where elements are considered visible would then go from
<!-- anticipate lazy-loading by half a screen --> <script async defer src="https://sub.twic.pics/?v1&anticipation=0.5"></script> <!-- anticipate lazy-loading by an entire screen --> <script async defer src="https://sub.twic.pics/?v1&anticipation=1"></script>
In the rare occurrence where
twic is already in use on your page and you wish to avoid any potential collision, you can use this script parameter to change
twic into something else entirely.
twicmust be replaced with whatever name you set this script parameter to.
So, the following configuration:
<script async defer src="https://sub.twic.pics/?v1&class=batman"></script>
- attributes names are changed:
- views should be marked with
- life cycle class names are changed:
2 (any value that is not a number will be ignored)
The Script will take the Device Pixel Ratio of the current device into consideration when determining the sizes of media to load. While this is the best approach in theory, it may clutter the bandwidth of portable devices with a high DPR but a fairly small screen surface relatively.
By default, the Script will not take a DPR greater than
2 into consideration. If the DPR of the device is higher than
2, the Script will assume it to be
To alter this behaviour, change the value of
- you can lower it (for instance by setting it to
1, effectively ignoring the DPR altogether)
- or you can be more permissive (for instance by setting it to
<!-- ignore DPR --> <script async defer src="https://sub.twic.pics/?v1&max-dpr=1"></script> <!-- handle DPR up to 4 --> <script async defer src="https://sub.twic.pics/?v1&max-dpr=4"></script>
The Script will prepend all your TwicPics image paths with the string provided through
path. This is especially useful to easily switch from one environment to another (like between a staging and a production environment).
Let us take the following domain configuration as an example:
|path||source images URL|
<!-- targets https://staging.my-company.com/ --> <script async defer src="https://sub.twic.pics/?v1&path=staging/"></script> <!-- targets https://www.my-company.com/ --> <script async defer src="https://sub.twic.pics/?v1&path=prod/"></script>
The following image element:
pathis set to
pathis set to
pathis added "as-is", so you have to be extra-careful with slashes and how you handle them. If all your
image:URLs start with a slash, like
pathshould not end with one. If, however, you do not have a leading slash in your
image:URLs, as in
pathshould end with a slash.
10 (any value that is not a number will be ignored)
To avoid requesting too may variants of the same medium (as could happen in the case of
width: 100% elements for instance), the Script will round the width of media to the closest multiple of
step. The height will then be computed so as to respect the original aspect ratio.
For instance, with the default of
10, if the Script is told by CSS the size of an element is 334x146, it will round it down to 330x144. Alternatively, for an element that is 336x222, it will round the size up to 340x225.
You can change this value to get as close or as far from a pixel-perfect resizing as desired:
- lowering it to
5would potentially double the number of variants requested,
- lowering it to
1would be pixel-perfect all the time,
- adjusting it up to
1000would greatly reduce the number of variants but would stress the scaling algorithms of browsers more.
Note that the stepping value can still be overridden on a per-element basis using the
<!-- Pixel perfect --> <script async defer src="https://sub.twic.pics/?v1&step=1"></script> <!-- Less variants --> <script async defer src="https://sub.twic.pics/?v1&step=50"></script>