CHANGELOG.md

Change Log

0.7.0

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

0.6.1

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

0.6.0

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

0.5.3

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

0.5.2

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

0.5.1

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

0.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'); }