Getting Started

There are a few things you should know before diving in on how to use ImageBoss and all of our features.

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.

1) Authorize your Traffic

You need to let us know where your images come from, so go to your dashboard and add the hosts you want to use with ImageBoss.


2) Setup your JavaScript tag


  <script type="text/javascript">
      window.ImageBoss = {
          authorisedHosts: ["www.your-authorised-host.com"],
          devMode: false, // if your images are not public, keep this to true and disable it on production.
      };
  </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.



Advanced Usage: Building the URLs on your own

First of all, you don't need to migrate all your images. It would be crazy, right?


If you don't want to use our JavaScript library and want to build the URLs yourself, all you need to do is just tweek the URL of your original images a little bit. Before diving into more details it's important to understand our syntax.

The Syntax

If what you read above looks weird to you, don't worry. Let me show you how the URL syntax looks like:


An example of a final URL would be this:

https://img.imageboss.me /:operation /:dimensions /:options /http://yoursite.com/images/img01.jpg


Explanation

As you can see, all you need is to prepend the ImageBoss URL to the URL of your images.


  • :operation is the main manipulation you want to do with your image.
  • :dimensions this is where you tell us the size of the generated image.
  • :options This is optional. Only use this section if the :operation you're using supports it. You can combine multiple options using commas.

Basic Example

https://img.imageboss.me /cover /200x200 /http://imageboss.me/examples/01.jpg



It's simple as that. If you want to know more about how cover works we have a dedicated section just for it.