Make WidthStep and MaxWidth overridable via helper & service

[lars-erik]

It'd be nice to be able to specify a "slimmer" srcset in specific use cases.
If I understand the code correctly, there's only one SlimsyOptions with settings for WidthStep and MaxWidth, and you'd have to create the service manually to do it differently.

Maybe as simple as making those two optional parameters all the way. I think the remaining config options are already overridable?

[Jeavon]

Should also add parameters to the tag helper to pass these through for specific instances

[Jeavon]

Thinking about the tag helper and the many options we now have, for v5 we are going to introduce "Config Presets"

[lars-erik]

Thinking about the tag helper and the many options we now have, for v5 we are going to introduce "Config Presets"

Nice! So we can do "small image with 3 steps" and "large photo with 7 steps" like the crop aliases?

[Jeavon]

@lars-erik yes exactly, something like:

   "TagHelper": {
      "Presets": [
        {
          "Alias": "SpecialImportant",
          "PictureSources": [
            {
              "Extension": "webp",
              "Quality": 100,
              "LQIPQuality":20
            },
            {
              "Extension": "avif",
              "Quality": 100,
              "LQIPQuality":10
            },
            {
              "Extension": "jpg",
              "Quality": 100
              "LQIPQuality":20
            }
          ],
          "WidthStep": 60,
          "MaxWdith": 3000,
          "UseCropAsSrc": true,
          "ImageDimensions": true
        },
        {
          "Alias": "NormalImage",
          "PictureSources": [
            {
              "Extension": "webp",
              "Quality": 70
              "LQIPQuality":20
            },
            {
              "Extension": "avif",
              "Quality": 60
              "LQIPQuality":10              
            },
            {
              "Extension": "jpg",
              "Quality": 70
              "LQIPQuality":20              
            }
          ],
          "WidthStep": 160,
          "MaxWdith": 3000,
          "UseCropAsSrc": true,
          "ImageDimensions": true
        }
      ]
    }

What do you think?

[lars-erik]

Awesome!

How about quality for placeholder image that's there before lazysizes kicks in?

On a sidenote, I had an interesting dicussion with @bjarnef about how to make "the" image above the fold not lazy loaded. (think block grid)
No big conclutions. 🙈

[Jeavon]

I've added LQIPQuality to the above config concept.

On the question of not lazy loading the first image, we think we can generate a sizes attribute with a new method, something like @Url.GenerateSizesForEagerLoad() but you would still need to figure out in your own logic which image should use this method instead of lazy load, interesting in block grids etc.....

[sekmenhuseyin]

Hi @Jeavon is it possible to get this output with Slimsy, I've tried every option but couldn't find a way