Many developers are aware of responsive imagery, but don't implement it for two reasons: the assets are difficult to generate, and the HTML is difficult/confusing/tedious to write. Using a library to generate your code can simplify the implementation. imgix.js, our flagship library, was designed to do just that. Responsive design patterns have solidified over the past few years, so we're releasing a major update of imgix.js that takes advantage of the modern web and imgix's ability to generate different asset sizes on demand.
This is a major release, so it includes breaking changes. imgix.js 3.0 presents a new API that provides more stability and better performance. It no longer relies on event listeners to trigger changes on <img> tags. Instead of responding dynamically to viewport changes, it generates a comprehensive set of srcset and sizes declarations based on the parameters you provide it.
This moves much of the decision-making around which image to download to the browser: a modern browser will select the correct image to display given these signals. Rather than rely on event listeners to set the src on <img> elements, imgix.js 3.0 generates an exhaustive srcset to enable the browser to decide.
For example, in version 3.0, this:
<img
ix-src="https://assets.imgix.net/unsplash/hotairballoon.jpg?w=300&h=500&fit=crop&crop=right"
alt="A hot air balloon on a sunny day"
>
will generate the following HTML:
<img
ix-src="https://assets.imgix.net/unsplash/hotairballoon.jpg?w=300&h=500&fit=crop&crop=right"
alt="A hot air balloon on a sunny day"
sizes="100vw"
srcset="
https://assets.imgix.net/unsplash/hotairballoon.jpg?w=100&h=167&fit=crop&crop=right 100w,
https://assets.imgix.net/unsplash/hotairballoon.jpg?w=200&h=333&fit=crop&crop=right 200w,
…
https://assets.imgix.net/unsplash/hotairballoon.jpg?w=2560&h=4267&fit=crop&crop=right 2560w
"
src="https://assets.imgix.net/unsplash/hotairballoon.jpg?w=300&h=500&fit=crop&crop=right"
ix-initialized="ix-initialized"
>
This squarely hits the resolution switching responsive image use case.
You can simplify even further by setting imgix.config.host to your imgix Source when calling the library. This allows you to set the params in JSON format, removing the need to type the Source name repeatedly and making the parameter listing more easily nestable and readable.
<!-- In the <head> -->
<meta property="ix:host" content="assets.imgix.net">
<!-- Later, somewhere in the <body> -->
<img ix-path="unsplash/hotairballoon.jpg" ix-params='{
"w": 300,
"h": 500,
"fit": "crop",
"crop": "right"
}' alt="A hot air balloon on a sunny day">
Additional Details
In addition to improving performance and simplifying implementation, imgix.js 3.0 is also leaner and more standards-compliant. It’s designed to match with current best practices in responsive design and provides better cache hit ratios by stepping the srcset declarations every 100 pixels instead of trying to resize to exact sizes.
For further information and implementation examples, see the imgix.js repo on GitHub.
Compatibility
imgix.js 3.0 is not compatible with version 2.x. The older version will still be archived and available on Github, but we will no longer officially support it beyond evaluating and merging pull requests from the community.
imgix.js 3.0 also removes support for lazyloading, which we recommend using lazysizes for instead.
imgix.js 3.0 removes support for scaling a
background-imageon resize. If you must take this approach, we recommend using your web framework to declare CSS with media queries.imgix.js 3.0 also removes support for color extraction from images. We instead recommend building the URL and issuing the HTTP request using your preferred approach. This is easily accomplished using the
paletteparameter.By default, browsers that don't support
srcset,sizes, orpicturewill gracefully fall back to the defaultimg srcwhen appropriate. If you want these browsers to display responsive images in these cases, we recommend using Picturefill.imgix.js 3.0 represents a step forward in imgix's commitment to providing a performant, standards-compliant responsive image solution.