Easy Integration

This is the fastest way to integrate with ImageBoss.

After following these steps you get:

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'
      };
  </script>
  <script async src="//cdn.jsdelivr.net/gh/imageboss/imageboss-web@5.1.3/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, send us a message on support[at]imageboss.me.