Javascript Friendly
These are analogous to their plain HTML counterparts, but instead of src
, srcset
, and sizes
, you get data-src
, data-srcset
, and data-sizes
. This allows you to use javascript for things like lazy loading.
-
data_picture
<picture> <source data-srcset="..." data-sizes="..."> <source data-srcset="..." data-sizes="..."> (...) <img data-src="..."> </picture>
data_img
<img data-srcset="..." data-src="..." data-sizes="...">
data_auto
-data_picture
when needed, otherwisedata_img
.
Special Options
The following preset settings only apply to these output formats.
-
noscript
Format:
noscript: true|false
Default:
false
Include a basic
img
fallback within a<noscript>
tag, giving your non-javascript-running users something to look at.<img data-srcset="..." data-src="..." data-sizes="..."> <noscript> <img src="..." alt="..."> </noscript>
-
data_sizes
Format:
data_sizes: true|false
Default:
true
This option sets whether you would like JPT's auto-generated sizes to be returned as a
data-sizes
attribute or a normalsizes
attribute.