Contents

---
sort: 2
---

# 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](https://github.com/verlok/vanilla-lazyload).

- `data_picture`

  ```html
    <picture> 
      <source data-srcset="..." data-sizes="...">
      <source data-srcset="..." data-sizes="...">
      (...)
      <img data-src="...">
    </picture>
  ```

- `data_img`
  ```html
    <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.

  ```html
    <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.

Version data entries

4 entries across 4 versions & 1 rubygems

Version	Path
jekyll_picture_tag-2.1.2	docs/users/presets/markup_formats/javascript_friendly.md
jekyll_picture_tag-2.1.1	docs/users/presets/markup_formats/javascript_friendly.md
jekyll_picture_tag-2.1.0	docs/users/presets/markup_formats/javascript_friendly.md
jekyll_picture_tag-2.0.4	docs/users/presets/markup_formats/javascript_friendly.md