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, otherwise data_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 normal sizes attribute.