feat: dpr srcset options

[sylcastaing]

Description

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

• targetDPRRatios to generate DPR we need https://github.com/imgix/js-core/issues/304
• targetDPRRatiosQualities to control image quality by DPR https://github.com/imgix/js-core/issues/284

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

Checklist: New Feature

• [x] Each commit follows the Conventional Commit format: e.g. chore(readme): fix typo. See the end of this file for more information.
• [x] Any breaking changes are specified on the commit on which they are introduced with BREAKING CHANGE in the body of the commit.
• [x] 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.
• [x] Run unit tests to ensure all existing tests are still passing
• [x] Add new passing unit tests to cover the code introduced by your PR
• [x] Update the readme
• [x] 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

[commit-lint[bot]]

Features

• dpr srcset options (961025b)

Bug Fixes

• review: dpr srcset options (8d86dd9)

Chore

• lint (b1fb340)

Contributors

sylcastaing, frederickfogerty

Commit-Lint commands

You can trigger Commit-Lint actions by commenting on this PR: - `@Commit-Lint merge patch` will merge dependabot PR on "patch" versions (X.X.Y - Y change) - `@Commit-Lint merge minor` will merge dependabot PR on "minor" versions (X.Y.Y - Y change) - `@Commit-Lint merge major` will merge dependabot PR on "major" versions (Y.Y.Y - Y change) - `@Commit-Lint merge disable` will desactivate merge dependabot PR - `@Commit-Lint review` will approve dependabot PR - `@Commit-Lint stop review` will stop approve dependabot PR

[frederickfogerty]

@sylcastaing so I discussed with my team and we'd like to call the parameters devicePixelRatios instead of targetDPRs, and variableQualities rather than targetDPRRatiosQualities. This is the last change, and then we should be good to go!

[sylcastaing]

@sylcastaing so I discussed with my team and we'd like to call the parameters devicePixelRatios instead of targetDPRs, and variableQualities rather than targetDPRRatiosQualities. This is the last change, and then we should be good to go!

Ok thanks !

I have time tomorrow morning (Paris TZ) to make the last changes

[frederickfogerty]

Merci @sylcastaing, ca sonne bien ! À demain 👋

[sylcastaing]

I have push a new commit (not sure if the commit message is correct) with :

• Rename options to devicePixelRatios and variableQualities
• Accept float DPR
• Remove dist file from PR