CHANGELOG.md

Change Log

v1.1.0

• Added min and max options to automatically generate a number of images, and steps option to say how many images (#31).

v1.0.0

New

• 🚀 Added support for sharp (#19)

Breaking

Webpack 2 support

Removed support for webpack 1! Please upgrade to webpack >= 2.

The syntax to import images has changed. The query part now comes after the resource (the image) instead of the loader.

- require('responsive-loader?size=100!some-image.jpg')
+ require('responsive-loader!some-image.jpg?size=100')

That means if responsive-loader is configured in your webpack-config, it's possible to specify image-specific options without having to add the loader part to the import path. For example:

// webpack.config.js
module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.jpg$/,
        loader: 'responsive-loader',
        options: {
          size: 1000
          //...
        }
      }
    ]
  },
}

// some-file.js
const image1000 = require('some-image.jpg') // will have size 1000 from the config
const image500 = require('some-image.jpg?size=500')

Other breaking changes

• The ext option was removed, in favor of format=jpg|png. [ext] is now part of the name option like in other loaders (fixes #13)
• Changed default JPEG quality to 85
• The pass option is now called disable

v0.7.0

• Add placeholder option (#16)
• Add width and height attributes to output (#19)

v0.6.1

• Declare default name, context, quality, and background through webpack options when they're not specified in the loader query (#12).

v0.6.0

• Add linting (#7)
• Breaking (maybe): Require node >= v4

v0.5.3

• Fix wrong callback being called on file load error (#6)

v0.5.2

• Added tests!
• Update queue-async to d3-queue

v0.5.1

• Optimization: skip resizing images of the same size (#5)

v0.5.0

Using the size option for getting only one resized image no longer just returns a string but the same object structure as when using sizes. The difference is, that when toString() is called on that object, it will return the path of the first resized image.

Also, for pure convenience, the returned object also contains a src property, so it can be spread onto a React component (e.g. <img {...resized} />).

Before

This worked:

import resized from 'responsive?sizes[]=100,sizes[]=200';

<img srcSet={resized.srcSet} src={resized.images[0].path} />

.foo { background-image: url('responsive?size=100'); }

But this didn't 😭:

import resized from 'responsive?size=100';

// Whoops, error because `resized` ist just a string
<img srcSet={resized.srcSet} src={resized.images[0].path} />

/* Whoops, `url('[object Object]')` */
.foo { background-image: url('responsive?sizes[]=100'); }

After

All these work ✌️

import resized from 'responsive?sizes[]=100,sizes[]=200';

<img srcSet={resized.srcSet} src={resized.src} />
<img srcSet={resized.srcSet} src={resized} />
<img {...resized} />

.foo { background-image: url('responsive?sizes[]=100,sizes[]=200'); }
.foo { background-image: url('responsive?sizes[]=100'); }
.foo { background-image: url('responsive?size=100'); }