Skip to content

JavaScript to dynamically detect dimensions of responsive images in responsive websites

Notifications You must be signed in to change notification settings

pixtulate/pixtulate.js

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

5 Commits
 
 
 
 

Repository files navigation

Pixtulate.js

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.

Quick Start

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"/>

Overview

Responsive images depend on the the layout dictating the image's size. The script will determine the image's dimensions by measuring the image container's CSS pixel width and height. Additionally, it determines the screen's pixel density and the viewport's height and width. Please see the documentation for more information on query paramters.

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.

Customization

Scaling

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"/>

Cropping

The script is also compatible with Pixtulate's crop API:
<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.

Note

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:

  1. Email support
  2. Tweet us at @Pixtulate

About

JavaScript to dynamically detect dimensions of responsive images in responsive websites

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published