Easy Integration

This is the fastest way to integrate with ImageBoss.


After following these steps you get:
  • Images up to 60% smaller with WebP.
  • Lazy loaded images.
  • Images ready for High Density Displays.
  • Low resolution image presentation while high resolution images load in the background.

ImageBoss for Websites

1) Add your Image Sources

ImageBoss needs to understand how to connect to your images. For that you need to go to your dashboard and add all the sources you want to connect with ImageBoss.

A image source could be any website on the internet or popular storage providers like Amazon S3, Google Cloud Storage, Azure Blob or Azure File Share.


2) Setup your JavaScript tag

For the sake of example we are going to choose the JavaScript integration but you can any Integration

  <script type="text/javascript">
      // full docs here:  https://github.com/imageboss/imageboss-web
      window.ImageBoss = {
          source: 'mywebsite-images',
          // defaults
          devMode: false, // if your images are not public, keep this to true and disable it on production.
          lowRes: false, // deliver a low-resolution of your image first.
          animation: true, // fade effect when loading images
          webp: true, // use webp when supported
          lazyload: true, // lazyload your images
          dpr: true // use dpr for your images when supported
      };
  </script>
  <script src="//cdn.jsdelivr.net/gh/imageboss/[email protected]/dist/imageboss.min.js" type="text/javascript"></script>
  

3.1) Using ImageBoss with standard image tags

This is probably how your images looks like:

<img src="/images/photo.jpg" width="150" />

Just replace your "src" attribute with data-imageboss-src:

<img
    src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
    data-imageboss-src="/images/photo.jpg"
    width="150"
/>

* The transparent gif will help you validate the HTML and prevent the browser from loading the default “not found” image, which can affect the final result.

3.2) ImageBoss for background images

If you are not using standard html tags and are using background images, you might need to change your code just a little bit.


This is how a standard setup looks like:

<div class="my-background"></div>

.my-background {
    width: 500px;
    background-image: url("/images/photo.jpg");
}

Remove the "background-image" from your CSS and add it to the div as a property:
<div class="my-background" data-imageboss-bg-src="/images/photo.jpg"></div>

.my-background {
    width: 500px;
}

For advanced options on how to use the library check our Github Repository. Or you can play around live at:

See the Pen ImageBoss Web Library Sandbox by ImageBoss (@imageboss) on CodePen.

If you don't want to build the URLs yourself, check out ImageBoss Web Library for a more smooth Integration.


ImageBoss for Node.js

To generate ImageBoss URLs with JavaScript/Node.js you can check out our ImageBoss Helper for JavaScript & Node.js on Github.


It also supports ES5, ES6, Webpack, Browserify, Rollup etc.



If you have any questions please don't hesitate don't send us a message on support[at]imageboss.me.