pixmo-responsive-img v1.0.1
pixmo-responsive-img
Usage
Based on responsive-images.js by kvendrikSetting it up
To start using the plugin we only have to include the script in the footer of our document.
HTML Structure
In the data-src attribute we specify the different breakpoints in combination with the image source it should use. In the data-src-base(optional) attribute we specify the base of our source urls.
<img alt='kitten!' data-src-base='demo/images/' data-src='<480:smallest.jpg, <768:small.jpg, <960:medium.jpg, >960:big.jpg' />Using the HTML above the browser would load demo/images/smallest.jpg if the size of the viewport is below 480 pixels, demo/images/small.jpg if the size of the viewport is above 480 pixels and below 768 pixels, demo/images/medium.jpg if the size of viewport above 768 pixels and below 960 pixels and demo/images/big.jpg if the size of viewport above 960 pixels.
That's all! We're up and running! ;)
Options
The only required option is the data-src attribute. All of the options below can be used additionally.
| Name | Type | Description |
|---|---|---|
data-src-base | attribute | Adds a specified path before every image source path |
data-src2x | attribute | Can be used instead of data-src if devicePixelRatio is above 1.2 (retina displays). Syntax is the same as data-src. |
data-src-base2x | attribute | Can be used instead of data-src-base to specify a custom base path for devices were devicePixelRatio is above 1.2 (retina displays). Can be used in combination with both data-src and data-src-base or either one |