feat: add srcset generation

[sherwinski]

This PR creates a new class method in ImgixClient that will generate a srcset string, which can be used in the srcset attribute on an <img> HTML element. buildSrcSet() takes a path and params argument similar to createURL(), and will return a String in one of two srcset formats.

Srcset Width-Pairs
The first format creates srcset width-pairs, a comma-delimited list of URLs and width descriptors corresponding to each one. This allows for responsive size switching based on the current width of the browser viewport. buildSrcSet() will append any params passed to the method to each URL constructed within the list. The following is an example of how to generate a width-pair srcset:

var client = new ImgixClient({domain:'my-social-network.imgix.net', includeLibraryParam:false});
var srcset = client.buildSrcSet('image.jpg');
console.log(srcset);

will return the following String (collapsed for brevity):

https://my-social-network.imgix.net/image.jpg?w=100 100w,
https://my-social-network.imgix.net/image.jpg?w=116 116w,
https://my-social-network.imgix.net/image.jpg?w=134 134w,
                                            ...
https://my-social-network.imgix.net/image.jpg?w=7400 7400w,
https://my-social-network.imgix.net/image.jpg?w=8192 8192w

Notice that a w= parameter is automatically inserted for each entry in the srcset list. This is required in order for the element to properly display the correctly-sized image corresponding to the viewport's width.

Device Pixel Ratio (DPR) Srcset
The second format this method can return is a srcset list of same-size images in varying resolutions. In this case, images are scaled using the dpr= parameter to adjust for the device pixel ratio of the browser. A DPR srcset will be automatically generated instead of a width-pair srcset if exact dimensions for the output image are specified, by providing either a w (width) or a h (height) and ar (aspect ratio) in the params argument. The following is an example of how to generate a DPR srcset:

var client = new ImgixClient({domain:'my-social-network.imgix.net', includeLibraryParam:false});
var srcset = client.buildSrcSet('image.jpg', {h:800, ar:'3:2'});
console.log(srcset);

which will return the following String:

https://my-social-network.imgix.net/image.jpg?h=800&ar=3%3A2 1x,
https://my-social-network.imgix.net/image.jpg?h=800&ar=3%3A2 2x,
https://my-social-network.imgix.net/image.jpg?h=800&ar=3%3A2 3x,
https://my-social-network.imgix.net/image.jpg?h=800&ar=3%3A2 4x,
https://my-social-network.imgix.net/image.jpg?h=800&ar=3%3A2 5x

---

Signing URLs
buildSrcSet() also supports signing URLs, which can be very useful for generating server-side and then passing it to the client. This will avoid having to expose your imgix source's secure token to the client.

var client = new ImgixClient({domain:'my-social-network.imgix.net', secureURLToken:'my-token', includeLibraryParam:false});
var srcset = client.buildSrcSet('image.jpg', {w:100});
console.log(srcset);

generates a srcset with unique signatures for each URL:

https://test.imgix.net/bridge.png?dpr=1&w=100&s=f461367db3c5fad8ae9d18864b38533a 1x,
https://test.imgix.net/bridge.png?dpr=2&w=100&s=9cac4c9fa5a263cef1ca443340a64a2c 2x,
https://test.imgix.net/bridge.png?dpr=3&w=100&s=29a0aa19b074a000de96eb4f1a24803b 3x,
https://test.imgix.net/bridge.png?dpr=4&w=100&s=f16ac140640d46ed8499102730e1f62d 4x,
https://test.imgix.net/bridge.png?dpr=5&w=100&s=3ef7c404f749ed5296fe0b6de47d8d2f 5x

---

For more information on srcset, building responsive images, and resolution switching:

• Responsive images - MDN
• Srcset and Sizes - Eric Portis

[sherwinski]

@jayeb Also wanted to ask, do you have any ideas for other test cases that could helpful here?

[jayeb]

I'd like to see the tests fleshed out a bit more (see comment), but otherwise this is looking great.

[ericdeansanchez]

🎉 This PR is included in version 0.3.0-beta.1 🎉

The release is available on:

• npm package (@beta dist-tag)
• GitHub release

Your semantic-release bot 📦🚀