Description

This PR add 2 new options to control DPR srcset generation :

• targetDPRRatios to generate DPR we need Allow configure srcSet DPR generation #304
• targetDPRRatiosQualities to control image quality by DPR Allow different Quality presets for buildSrcSet #284

No breaking changes. buildSrcSet return the same as before if we don't provide this new options.

Checklist: New Feature

• Each commit follows the Conventional Commit format: e.g. chore(readme): fix typo. See the end of this file for more information.
• Any breaking changes are specified on the commit on which they are introduced with BREAKING CHANGE in the body of the commit.
• If this is a big feature with breaking changes, consider opening an issue to discuss first. This is completely up to you, but please keep in mind that your PR might not be accepted.
• Run unit tests to ensure all existing tests are still passing
• Add new passing unit tests to cover the code introduced by your PR
• Update the readme
• Add some steps so we can test your cool new feature!

Steps to Test

targetDPRRatios

const client = new ImgixClient({
  domain: 'testing.imgix.net',
  secureURLToken: 'my-token',
  includeLibraryParam: false,
});

const srcset = client.buildSrcSet(
  'image.jpg',
  {
    h: 800,
    ar: '3:2',
    fit: 'crop',
  },
  {
    targetDPRRatios: [1, 2],
  },
);

Result :

https://testing.imgix.net/image.jpg?h=800&ar=3%3A2&fit=crop&dpr=1&s=3d754a157458402fd3e26977107ade74 1x,
https://testing.imgix.net/image.jpg?h=800&ar=3%3A2&fit=crop&dpr=2&s=a984ad1a81d24d9dd7d18195d5262c82 2x

targetDPRRatiosQualities

const client = new ImgixClient({
  domain: 'testing.imgix.net',
  includeLibraryParam: false,
});

const srcset = client.buildSrcSet(
  'image.jpg',
  { w: 100 },
  { targetDPRRatiosQualities: { 1: 45, 2: 30, 3: 20, 4: 15, 5: 10 } },
);

Result :

https://testing.imgix.net/image.jpg?w=100&dpr=1&q=45 1x,
https://testing.imgix.net/image.jpg?w=100&dpr=2&q=30 2x,
https://testing.imgix.net/image.jpg?w=100&dpr=3&q=20 3x,
https://testing.imgix.net/image.jpg?w=100&dpr=4&q=15 4x,
https://testing.imgix.net/image.jpg?w=100&dpr=5&q=10 5x