Getting started

Register at https://app.piio.co/register

Step 1

Copy the code we provided at the end of the html and before all the other JS files, it will look something like this

<script type="application/javascript"> var piioData = { appKey: '{{ api key }}', encodeSrc: false, domain: '{{ your domain }}' } </script>
<script src="//piio.co/demo/piio.min.js"></script>

Replace api key with your Piio api key and be sure to set up your domain with the url of the website that has the Piio code embeded.

Step 2 - Using Piio in standard image tags.

Replace in your project, all the image tags your using to use data-piio instead of src to load the images. That means that your image tags right now the look like this:

<img src="/images/myimage.png"/>

And after replacing the src for data-piio and add a transparent base64 transparent png to the src attribute. The image tag will finally look like.

<img data-piio="/images/myimage.png" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8+f9vPQAJZAN2rlRQVAAAAABJRU5ErkJggg==" />

* The transparent png will help you validate the html and prevent the browser to load the default "not found" image, which can affect the final result.

Dev environment

We all know that probably you have to use a local environment to integrate and test Piio, what happens is that Piio is not able to access images through a private network (yet). But you can set in the configuration a new property called dev in true. Like this:

var piioData = { dev : true, appKey: '{{ api key }}', encodeSrc: false, domain: '{{ your domain }}' }

If dev is set to true, the JS library will bypass the API and it'll serve the images directly from your localhost or the storage you've under a private network.

Using Piio for background images

If you're using background images in your website, we recommend you to remove all of the images from the .css files and do the following.

Let's say that you've a div with a background image, using a css class named background, so you code looks like this:

<div class="with-background">

And your .css file has something like this.

.with-background {
    background-color: #935d8c;
    background-image: url("images/background.png");
}

So first remove the background-image attribute from your css class, so it looks like the following:

.with-background {
    background-color: #935d8c;
}

And setup the image you want to use as background directly in the div, like this:

<div class="with-background" data-piio-bck="images/background.png">

This will inherit all the properties from the css class, but it'll set the background dinamically pointing to the right and optimized image on Piio.

Advanced features

Automatically removing Query Strings for images

This option might work for CMS and E-commerce systems like NetSuite or othe systems that use Query Strings to resize images.

Removing query strings from individual images:

<img src="/images/myimage.png" data-piio-remove-query-string="true" />

To set this option globally, you've to set on TRUE the removeQueryString option on the initialization options. var piioData = { removeQueryString: true, ...

Mission accomplished?
YES No, please I need help