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.
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>
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
To alter this behaviour, change the value of
1, effectively ignoring DPI altogether)
<!-- 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>
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:
5would potentially double the number of variants requested,
1would be pixel-perfect all the time,
1000would greatly reduce the number of variants but would stress the scaling algorithms of browsers more.
<!-- Pixel perfect --> <html data-twic-step="1"> <!-- page content --> </html> <!-- Less variants --> <html data-twic-step="50"> <!-- page content --> </html>