Title
This is some text
imgix.js is a dependency-free Javascript library that allows you to easily use the imgix API to make images on your site or app responsive to device size and pixel density.
imgix.js allows for intuitive use of imgix features like text formatting, color palette extraction, color adjustments, effects, and watermarking.
Sign up with imgixInstall the latest version of imgix.js with bower: bower install imgix.js
If you don't already have an imgix account, you may sign up at imgix.com.
imgix.js makes extensive use of the imgix API, and will not work with images that are not configured to be used with an imgix source. Once you have created an imgix source, add imgix.min.js to your page. You can copy–paste the code below to try it out.
<!DOCTYPE html>
<html>
<head>
<style>
.imgix-fluid-bg {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
display: block;
}
</style>
<!-- include imgix.js -->
<script src="http://www.imgix.com/static/js/imgix.min.js" type="text/javascript"></script>
<script>
imgix.onready(function() {
imgix.fluid({
updateOnResizeDown: true,
pixelRounding: 5,
autoInsertCSSBestPractices: true
});
});
</script>
</head>
<body>
<div data-src="http://assets.imgix.net/coffee.jpg?fit=crop&crop=faces" class="imgix-fluid imgix-fluid-bg"></div>
</body>
</html>
The imgix.fluid() method requests an image that fits the size of the available space of an image container and automatically delivers an image to fit the appropriate pixel density for devices with higher resolutions.
Images will update and crop to fit when resized in a browser, as well as respond to changes in the orientation of a device, when set with the correct styles.
Working with larger image sources is advised, for best quality output and to avoid unnecessarily scaling up images.
imgix.onready(function() {
// Applied to images that contain the imgix-fluid class
// Can take an options object to set more specific behaviors
imgix.fluid();
});
In this example, div elements with image URLs set with data-src attributes will react to the space provided by the width and height of the containers.
You can also override the behavior of the imagery, by setting onChangeParamOverride to the options object. The following code inserts information about the container width, height, and dpr of the image. Take a look at the documentation for imgix.fluid()
View full example, applied to backgrounds
View full example, applied to img tags
/* imgix.fluid() optional parameters */
var bgOptions = {
fluidClass: 'imgix-fluid-bg',
updateOnResizeDown: true,
updateOnPinchZoom: true,
pixelRounding: 10,
autoInsertCSSBestPractices: true,
onChangeParamOverride: function(w, h) {
/* Override and insert additional imgix parameters*/
/* Currently displaying information about the image size and dpr */
var dpr = Math.ceil(window.devicePixelRatio*10) /10;
return {
"txt": "w:" + w + " h:" +h + " dpr:" + dpr,
"txtalign": "center,bottom",
"txtsize": 20,
"txtfont": "Helvetica%20Neue,bold",
"txtclr": "ffffffff",
"txtpad": 20,
"txtfit": 'max',
"exp": -5
};
}
};
imgix.onready(function() {
imgix.fluid(bgOptions);
});
The following html code displays the HTML elements set with class="imgix-fluid-bg". They will be targeted for use withimgix.fluid(). The base imgix image URLs to populate the backgrounds of those images are set in the data-src attributes.
<div class="container">
<!-- Header Image -->
<div class="imgix-fluid-bg header-image" data-src="http://assets.imgix.net/examples/butterfly.jpg?fit=crop&crop=faces"></div>
<!-- Feature Images -->
<div class="imgix-fluid-bg feature-image" data-src="http://assets.imgix.net/examples/ape.jpg?fit=crop&crop=faces"></div>
<div class="imgix-fluid-bg feature-image" data-src="http://assets.imgix.net/examples/salamander.jpg?fit=crop&crop=faces"></div>
<div class="imgix-fluid-bg feature-image" data-src="http://assets.imgix.net/examples/snake.jpg?fit=crop&crop=faces"></div>
<div class="imgix-fluid-bg feature-image" data-src="http://assets.imgix.net/examples/iguana.jpg?fit=crop&crop=faces"></div>
</div>
It is recommended that you enable the option: autoInsertCSSBestPractices, this will set some values for background images, allowing them to be responsively displayed. This includes the properties: background: cover, background-position: 50% 50%, and background-repeat: no-repeat. These will allow your images to be correctly displayed in target elements.
For containers that do not have explicit heights, you can set padding-bottom with a percentage value, this will match horizontal percentage of the containing element, giving you the ability to maintain an image aspect ratio for the image container.
The pixelStep property determines at what size interval should the pixels snap to the container, the default is 10, and the image will always round up.
.feature-image{
width: 23%;
padding-bottom: 23%;
margin: .5em 1%;
display: block;
float: left;
}
.header-image{
width: 98%;
margin: .5em 1%;
height: 500px;
}
@media (max-width:1024px){
.feature-image {
width: 48%;
padding-bottom: 65%;
margin: .5em 1%;
}
}
@media (max-width:480px){
.header-image, .feature-image {
height: auto;
width: 100%;
padding-bottom: 75%;
margin: .25em 0;
}
}
The following is the resulting responsive image layout. The width, height, and dpr values displayed on the images are set through imgix within the image itself.
Viewing this page on any device, will result in new image renders that respond to CSS media queries, fluid containers, and device pixel ratio of the device its being viewed on.
Resizing your browser window on this page will demonstrate how new images in the layout below are loaded to replace and fill the containing elements, correctly cropped and sized.
Below, you can launch and view the source of standalone examples. Full documentation of imgix.js can be found on Github.
imgix.js also allows for easy setting and updating of imgix parameters on individual images or image sets. This gives developers greater control over complex image operations and gives them tools to make dynamic edits. Below is a basic example of how to apply some parameters to an imgix url using the imgix object.
imgix.onready(function() {
var myImage = new imgix.URL('http://assets.imgix.net/examples/mountain.jpg', {w: 320, h: 320, fit: 'crop'});
myImage.attachImageTo('.image-container');
});
Below is a way to set the watermark of an image using two sets of parameter objects. First is a set of defaults that may be applied to a wider range of images. The second has the specific watermark paramters for setting a watermark URL, alignment as well as transparency.
/* Object of imgix parameters for sizing */
var pageDefaults = {
w: 320,
h: 320,
fit: 'crop',
q: 90,
auto: 'format'
};
/* Object of imgix parameters for watermarking */
var watermarkParams = {
mark: '/imgix-logo-web.png',
markalign: 'center,middle',
markw: 160,
markalpha: 80,
markpad: 20
};
/* Construct imgix URL */
imgix.onready(function() {
var watermarkImage = new imgix.URL('http://assets.imgix.net/examples/mountain.jpg');
watermarkImage.setParams(pageDefaults);
watermarkImage.setParams(watermarkParams);
watermarkImage.attachImageTo('.watermark-image');
});
Here there are objects created for setting text, masking, blur, etc. They share the page parameter defaults, and each one is applied to a class of elements.
/* Object of imgix parameters for sizing */
var pageDefaults = {
w: 320,
h: 320,
fit: 'crop',
q: 90,
auto: 'format'
};
var memeTextParams = {
txt: 'MOUNTAIN!!',
txtalign: 'center,bottom',
txtfont: 'Impact',
txtsize: 64,
txtpad: 20,
txtshad: 10,
txtfit: 'max',
txtlineclr: '000000',
txtclr: 'ffffff'
};
var maskParams = {
mask: '/ix-mask.png',
fm: 'png'
};
var blurParams = {
blur: '100'
};
var blurParams = {
rot: '45'
};
imgix.onready(function() {
var textImage = new imgix.URL('http://assets.imgix.net/examples/mountain.jpg');
textImage.setParams(pageDefaults);
textImage.setParams(memeTextParams);
textImage.attachImageTo('.text-image');
var maskImage = new imgix.URL('http://assets.imgix.net/examples/mountain.jpg');
maskImage.setParams(pageDefaults);
maskImage.setParams(maskParams);
maskImage.attachImageTo('.mask-image');
var blurredImage = new imgix.URL('http://assets.imgix.net/examples/mountain.jpg');
blurredImage.setParams(pageDefaults);
blurredImage.setParams(blurParams);
blurredImage.attachImageTo('.blur-image');
var rotatedImage = new imgix.URL('http://assets.imgix.net/examples/mountain.jpg');
rotatedImage.setParams(pageDefaults);
rotatedImage.setParams(rotateParams);
rotatedImage.attachImageTo('.rotated-image');
});
Below, you can launch and view the source of standalone examples. Full documentation of imgix.js can be found on Github.
You can use the .getColors() method to extract colors from an imgix image. Colors are sorted by luminance, darker values first. This feature allows you to easily generate and control layout colors or dynamic gradients from an image.
/* Extract 16 colors from an image to use */
var ix = new imgix.URL('http://assets.imgix.net/examples/butterfly.jpg');
ix.getColors(function(colors) {
document.body.style.backgroundColor = colors[0];
});
This is some text
This is some text
This is some text
This is some text
Below, you can launch and view the source of standalone examples. Full documentation of imgix.js can be found on Github.
More examples and documentation of implementation can be found below. For those using jQuery, we also have an imgix.js plugin.