Fix srcset width filtering

[bencroker]

Spent far too long troubleshooting what was going on in a site that was working fine before #407, and outputting the wrong image sizes after updating.

This PR removes the sorting of the set of srcsets to be filtered, which was causing them to get out of sync with the variantSourceWidths.

Here’s an example with 2x retina size selected and sizes [400, 500], to demonstrate the bug:

set: [400, 800, 500, 1000]
variantSourceWidths: [400, 400, 500, 500]

Becomes:

set: [400, 500, 800, 1000]
variantSourceWidths: [400, 400, 500, 500]

[khalwat]

What's the impact on #407 after removing this sorting?

[bencroker]

It should still work. I don’t think the set should have been sorted in the first place, only variantSourceWidths.

[khalwat]

So I'm having a look into this, and I'm slightly concerned that it might be a deeper problem than just removing that sorting of the sets.

Can you give me the template code you're been using that surfaced this issue?

[bencroker]

The template code was {{ optimizedImages.srcsetMaxWidth(size.width) }}, where optimizedImages is an ImageOptimize field on an asset, and size.width is the max width to use.

So it could be simplified as:

{{ image.imageOptimizerField.srcsetMaxWidth(1000) }}

[khalwat]

Merged, thanks. I'll backport it to the other versions.

Also not sure if you're aware, but I've added a nice fluent API that does a lot of this for you:

    {% set asset = entry.myAssetField.one() %}
    {{ asset.optimizedImagesField.imgTag()
        .loadingStrategy('lazy')
        .render() }}

<img> tags: https://nystudio107.com/docs/image-optimize/using.html#using-imgtag-to-create-img-tags

<picture> tags: https://nystudio107.com/docs/image-optimize/using.html#using-picturetag-to-create-picture-tags

[bencroker]

Thanks!