responsive-image-loader

New package, who dis?

A webpack loader to automagically bring your website images to a whole new level of responsiveness!

This loader tackles in an unified way three main problems with images on the web nowadays:

- usage of most efficient image formats (automatic conversion);
- images resizing to always serve the lightest bundle possible (resolution switching);
- intelligent images transformation based on focal points of an image (art direction).

Moreover, we aim to automatize everything that doesn't strictly require your input:

- calculating best breakpoints for resolution switching;
- ordering sources by most efficient image format;
- providing sensible defaults;
- serving a fallback for older browsers;
- and more!

We also focused on flexiblity and customizability: conversion, resizing and transformation engines can be easily switched with your implementation, which you can then PR here and make available to others.

Aren't there other tools doing the same stuff?
!Well yes, but actually no
We found some notable tools while evaluating if it was worth to create our own package, but none of them combines all the requirements we now offer:

- manages together conversion, resolution switching and art direction, with all their weird interactions;
- process images both when used via tags and background-image CSS rules;
- framework agnostic;
- operates at build time (did anyone said SSG?);
- works offline;
- free;
- open source;
- customizable and flexible at its core.

For more info, check out the issue from which this package spawned.

Table of contents

- Roadmap
- Donations and shameless self-advertisement
- Installation
- Loader
- Engines
- Usage
- Configuration
- Global configuration
- Paths
- Conversion
- Resolution Switching
- Art Direction
- Caveats & FAQ
- Contributing
- License

Roadmap

Features we'd like to implement, by most-wanted order.

- [ ] Add PNG to supported formats
- [x] Support background-images
- [ ] Define defaults for arbitrary groups of images
- [x] Support values in pixels for size option
- [ ] Write more granular unit tests
- [ ] Add TSDocs to public methods
- [ ] Support Cloudinary adapter for converter, transformer and resizer
- [ ] Support video conversion and processing
- [ ] Test with HMR
- [ ] Pass-through custom configuration to underlying engines

Donations and shameless self-advertisement

Dreamonkey is a software house based in Reggio Emilia, Italy.
We release packages as open-source when we feel they could benefit the entire community, nontheless we spend a considerabile amount of time studying, coding, maintaining and enhancing them.

Does your business or personal projects depend on our packages? Consider donating here on Github to help us maintain them and allow us to create new ones!

Do you need a UX and quality driven team to work on your project? Get in touch with us through our incredibly elaborate quotation request page or our much less cool contact form and let's find out if we are the right choice for you!

Installation

Install via

yarn add -D @dreamonkey/responsive-image-loader

or

npm install -D @dreamonkey/responsive-image-loader.

$3

#### Normal usage

Add the loader into your webpack rules targetting .html files.

``javascript
webpackConf.module.rules.push({
test: /\.html$/,
loader: '@dreamonkey/responsive-image-loader',
options: {
/ ... /
},
});
`

If you plan to process CSS background images, you should also include the package as you'd do with a polyfill.

`javascript
webpackConf.entry['responsive-bg-image-handler'] =
'@dreamonkey/responsive-image-loader';
`

`html