You only need to change your image tags so they’ll look like this:

<img data-piio="/images/myimage.png"/>

And add the Piio’s script at the beginning or end of the body:

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

It also works for background images and it’ll inherit any properties you’ve set through your CSS, you can find more information in our documentation.

So if you’re good with the Find & Replace feature of your text editor, you’ll probably be able to integrate Piio in your whole project in less than an hour. We also have a backdoor configuration if you’ve your images stored locally in your dev environment and Piio will just bypass the call to our API and show the images from your local storage.

Remember adding the transparent PNG as the documentation instruct, this will prevent the browser from showing a broken image when the connection is slow and the src is not yet set. The final result of your image tag will be:

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

Piio works great with React, AngularJS or Vue where your page load times are only sensitive to your API response time and image load times. The benefits are the same from any other structure you may have but take into account that if you’re refreshing the whole page each time you’ll need to have a more specific benchmark to see how your image load times have been improved.

You can check our Docs here:

Did this answer your question?