Pixtulate.js is a JavaScript to automatically determie the correct responsive size of images and then scale, crop and optimize them via Pixtulate's backend image service - on the fly.
All you need to do is to include the script in your page, markup an img element with a data-src attribute and a single high resolution source images.
Before using the script, please sign up to process images with Pixtulate.
Signature:
/**
* String accountId - Your account slug obtained at signup
* boolean replaceHost - Wheather to replace hosts. i.e. http://www.mywebsite.com/img -> http://mydomain.api.pixtulate.com/img
* boolean capSizeToWindow - Unless image width/height can be determined, cap the size of an image at viewport width/height
**/
void pixtulate(String accountId, boolean replaceHost, boolean capSizeToWindow);
Include pixtulate.js from our global CDN in your page before the closing body tag and initialize:
<script src="http://www.pixtulate.com/js/pixtulate.js"></script>
<script>pixtulate("mydomain", true, true);</script>
Make sure to replace "mydomain" with your domain slug obtained during Sign Up.
Make an image responsive:
<img data-src="/img/my-high-res-image.jpg" alt="this is now a responsive image"/>
The Pixtulate host will be automatically prefixed to your relative image's path as
http://mydomain.api.pixtulate.com
If your image's src path already contains a host, and you have set the replaceHost parameter to true, your host will be replaced with that of Pixtulate's.
You can still keep the src attribute of the img element, but remember it will be pre-loaded by the browser at page load so make it something which can be cached and re-used from browser cache, i.e a single pixel transparant .png. By omitting the src attribute, you prevent double loading images. Naturally, your src image can also be served by Pixtulate.
If you do not want an image to be reponsively scaled, simply omit the data-src attribute.
You can at any point lock down any input otherwise automatically determined by the script:For example, lock down the width of an image:
<img data-src="/img/my-high-res-image.jpg?w=500" alt="width will be locked at 500px"/>
Lock down the pixel density:
<img data-src="/img/my-high-res-image.jpg?dpr=1" alt="device pixel ratio locked at 1"/>
<img data-src="/img/my-high-res-image.jpg?tlc=min,max" alt="image will be automatically cropped"/>
You can enter and lock down any query parameter outlined in the documentation.
This script will only work if your image's dimensions can be determined by the sizing of its container. Layouts which flow depending on the size of their images are not compatible with this script.If there are any issues, you can:
- Email support
- Tweet us at @Pixtulate