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
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
<img> elements, imgix.js 3.0 generates an exhaustive
srcset to enable the browser to decide.
For example, in version 3.0, this:
will generate the following HTML:
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 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.
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
By default, browsers that don't support
picturewill gracefully fall back to the default
img 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.