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.