Image Attributes

These attributes are usable on img elements only.

data-src

Default value: <empty>

Specifies the url of the source image.

<img class="twic" data-src="some_url">

The attribute also accepts placeholder expressions.

<img class="twic" data-src="placeholder:auto">

Using a placeholder expression makes it very easy to spy on the actual dimensions of your image whenever you're in doubt.

data-src-focus

Default value: <empty>

Specifies the focus point for transformations. Like in the focus API, the value of this attribute must be valid coordinates.

<img class="twic" data-src="some_url" data-src-focus="50px25p">

<img class="twic" data-src="some_url" data-src-focus="1023x145">

data-src-step

Default value: "" (any value that is not a number or the empty string will be ignored)

Enables overriding the default stepping value as specified in data-twic-step. Of course, if no value is provided, the default is used.

Stepping will round the computed width of the source image to the closest multiple of data-src-step while also changing the height in order to respect the original aspect ratio as closely as possible.

Overriding the default may be useful to ensure pixel-perfect resizing or to limit the number of potential variants generated on different devices for this specific element (see data-twic-step for more details).

<!-- Pixel pefect -->
<img class="twic" data-src="some_url" data-src-step="1">

<!-- A lot less variants -->
<img class="twic" data-src="some_url" data-src-step="1000">

data-src-transform

Default value: "auto"

Specifies the manipulation to be applied to the source image. The attribute accepts the full manipulation API.

<img class="twic" data-src="some_url" data-src-transform="cover=1:1/resize=200">

As an addition, the Script provides two values, W and H, that represent the width and height of the content box of the current img element respectively. Those aliases can be used wherever the manipulation syntax accepts a number.

<img class="twic" data-src="some_url" data-src-transform="cover=WxH">

<img class="twic" data-src="some_url" data-src-transform="cover=(W/3)x(H/3)">

Please note those values are rounded by default (see data-src-step).

As a convenience, the Script adds shortcut transformations contain, contain-max, contain-min, cover, cover-max, cover-min, max, min, resize, resize-max and resize-min which are equivalent to contain=WxH, contain-max=WxH, contain-min=WxH, cover=WxH, cover-max=WxH, cover-min=WxH, max=WxH, min=WxH, resize=WxH, resize-max=WxH and resize-min=WxH respectively.

<img class="twic" data-src="some_url" data-src-transform="contain">

<img class="twic" data-src="some_url" data-src-transform="cover">

The Script also provides an additional transformation which is used by default: auto. What this transformation does depends on the value of the object-fit CSS property for the current image element. For instance, when object-fit is cover, the auto transformation is equivalent to cover=WxH.

The auto transformation can be used into the data-src-transform attribute as part of a more elaborate manipulation:

<!-- Downsampling -->
<img class="twic" data-src="some_url" data-src-transform="auto/resize=25p">

<!-- Stepping -->
<img class="twic" data-src="some_url" data-src-transform="auto/step=12">