Advanced Configuration

The Script can be configured by setting specific data attributes attached to the main html element of your page. Each of these attributes has a default that should be perfectly suited to your needs pretty much all the time.

data-twic

Default value: "twic"

In the rare occurence where twic is already a meaningful class name in your application, you can use this configuration item to change the class name with which to mark elements.

Note that every occurence of twic should thereafter be replaced with whatever name you set this configuration item to.

So, the following configuration:

<html data-twic="batman">
    <!-- page content -->
</html>

implies that:

  • elements should be marked with batman rather than twic
  • views should be marked with batman-view rather than twic-view
  • life cycle class names are changed:
    • twic-loading becomes batman-loading
    • twic-done becomes batman-done
    • twic-error becomes batman-error
    • twic-background-loading becomes batman-background-loading
    • twic-background-done becomes batman-background-done
    • twic-background-error becomes batman-background-error
  • advanced configuration items are now of the form data-batman-<name> rather than data-twic-<name>

data-twic-max-dpi

Default value: 2 (any value that is not a number will be ignored)

The Script will take the DPI of the current device into consideration when determining the sizes of images to load. While this is the best approach in theory, it may clutter the bandwith of portable devices with a high DPI but a fairly small screen surface relatively.

By default, the Script will not take DPI greater than 2 into consideration. If the DPI of the device is higher than 2, the Script will assume it to be 2.

To alter this behaviour, change the value of data-twic-max-dpi:

  • you can lower it (for instance by setting it to 1, effectively ignoring DPI altogether)
  • or you can be more permissive (for instance by setting it to 3 or 4)
<!-- ignore DPI -->
<html data-twic-max-dpi="1">
    <!-- page content -->
</html>

<!-- handle DPI up to 4 -->
<html data-twic-max-dpi="4">
    <!-- page content -->
</html>

data-twic-step

Default value: 10 (any value that is not a number will be ignored)

To avoid requesting too may variants of the same image (as could happen in the case of width: 100% elements for instance), the Script will round the width of images to the closest multiple of data-twic-step. The height will then be computed in order to respect the original aspect ratio.

For instance, with the default of 10, if the Script is told by CSS the size of an image is 334x146, it will round it down to 330x144. Alternatively, for an image 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 5 would potentially double the number of variants requested,
  • lowering it to 1 would be pixel-perfect all the time,
  • adjusting it up to 1000 would greatly reduce the number of variants but would stress the scaling algorithms of browsers more.

Note that the stepping value can still be overriden on a per-element basis using the data-src-step and data-background-step attributes.

<!-- Pixel perfect -->
<html data-twic-step="1">
    <!-- page content -->
</html>

<!-- Less variants -->
<html data-twic-step="50">
    <!-- page content -->
</html>