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.

One of imgix’s most powerful benefits is the ease of setting up the service and serving better images right away. This is true whether you’re serving images directly to your customers or building a platform for others to use. One of our customers, Stream, demonstrated this in their tutorial about building a demo app called Cabin in React with their feed service.

Here’s how they did it, in their own words. (This is part 5 in their series.)

Dashboard

• Added a new support view with a form to write directly to our support team, and links to important sections of our documentation.
• Added a proper error message when trying to request a password reset link for an email address that doesn’t exist in our system.
• Fixed a bug that prevented a useful error message from showing when trying to set a password using an expired link, instead showing a confusing generic message.
• Fixed a bug in the source-signing view that prevented URLs with non-API parameters (including our own ixlib parameter) from being used.
• Fixed another bug in the source-signing view that was showing an error message when using relative URLs for parameters such as mark and blend.
• Made a number of minor style improvements to form fields nested inside of info-table layouts, such as in the account view.

Website

• Launched a shiny new home page and added a detailed look at the benefits of using imgix.

Libraries

• Released Luminous 0.3.0, which adds support for image galleries.
• Released ember-cli-imgix 0.3.4, which prevents debounced calls on destroyed objects.

Blog

• Published a post on using imgix with the Low-Quality Image Placeholder method to improve user experiences.

“Page weight” may well become the new chant to replace “developers, developers, developers.” As websites continue to become more visually rich (and need to, to be effective), ensuring that visitors don’t have to wait for images is paramount.

So, how to make sure that your site loads as quickly as possible but still with a visually compelling experience? The Low-Quality Image Placeholders (LQIP) method initially loads a low-quality, smaller version of the final image to fill in the container until the high-resolution version can load.