Installation

The easiest way to start using the library is to include it on the page and turn on autoload:

<script 
  type="text/javascript" 
  src="https://pixboost.com/libs/pixboost.bundle.min.js"
  id="pb-script"
  data-api-key="<YOUR PIXBOOST API KEY>"
  data-autoload=""
></script>

pixboost.bundle.min.js script includes picturefill library that adds support of <picture> element to old browsers, lozad.js for lazy loading and matchMedia.js for supporting matchMedia() call in IE9.

autoload option will run picture(), image() and background() functions (see below) on document load.

Alternatively, you can include all components separately:

<!--Responsive images-->
<script type="text/javascript" src="https://pixboost.com/libs/picturefill.min.js"></script>
​
<!-- Lazy loading-->
<script type="text/javascript" src="https://pixboost.com/libs/lozad.min.js"></script>
​
<!-- Match media-->
<script type="text/javascript" src="https://pixboost.com/libs/matchMedia.min.js"></script>
​
<script type="text/javascript" src="https://pixboost.com/libs/pixboost.min.js"></script>

Library provides three main functions:

• ​picture() - to deal with responsive images.

• ​image() - to optimise all images that are device agnostic.

• ​background() - for images that using CSS background