Be able to add an array of sizes

[romainpoirier]

This plugin is nice, but I found the method for srcset range somehow incomplete. It would be better to be able to add an array of sizes instead of a range, like we can do with the Imager plugin. Because the step would be in most of the case not accurate to the context to display, because the element width in the container can variously change at each breakpoint. The <picture> + <source> example is nice and could do the job, but that's a lot of code!

[croxton]

If you prefer not to use a range, you can add multiple tags to construct a srcset exactly as you want it:

<img
  srcset="{{ image | imgix({ ar:'16:9', w:480, q:60 }) }} 480w, 
          {{ image | imgix({ ar:'16:9', w:1000, q:70 }) }} 1000w,
          {{ image | imgix({ ar:'16:9', w:1600, q:80 }) }} 1600w"
  sizes="(max-width: 600px) 480px, 100vw"
  src="{{ image | imgix({ ar:'16:9', w:1000 }) }}"
  alt="">

That to me is pretty readable, and allows for varying things like the quality or compression at each breakpoint.

<picture> should be used when you need art-directed images. For example, different dimensions or crop for a particular breakpoint.

[romainpoirier]

Ok, thank you. This can works. However, in simple settings, it's still a lot of code.

I'm wondering if the use of the plugin may not be overkill sometimes, as the same result can be done like this with almost the same amount of code:

{% set image = 'https://{{ getenv('IMGIX_URL') }}/{{ image.volume.handle }}/{{ image.getPath() }}?' %}
<img
  srcset="{{ image ~ 'ar:16:9&w=480&q=60' ) }} 480w, 
          {{ image ~ 'ar:16:9&w=1000&q=70' }) }} 1000w,
          {{ image ~ 'ar:16:9&w=1600&q=80' }) }} 1600w"
  sizes="(max-width: 600px) 480px, 100vw"
  src="{{ image ~ 'ar:16:9&w=1000 }) }}"
  alt="">

Not the cleanest one, but may be refactored easily.

[croxton]

Sure, that can work too (although you'd want to pass a hash to sign the images too, and a modified-date timestamp to break the cache when images are edited). Imgixer is a simple URL builder by design. It just makes things a little more convenient for you by formalising the syntax and configuration.

[romainpoirier]

Ok, thank you for these explanations. By the way, the Imager X transformImage method is maybe more efficient, especially because we can add an array of objects. That's maybe less literal than clear HTML, but with less repeated code and more versatility. It would be super nice if you could implement something like that.

[croxton]

Sure, it's a good idea, thank you. I'll consider how best to add this feature.