Combine resizing with other options like webp

[mastef]

Would it be possible to stack resize with another parameter like webp? Currently it seems it's either or. Right now I can only do this in css :

.webp .bgimage {
	background-image: url('../static/images/bg.jpg?webp'); // will be over-sized
}
.no-webp .bgimage {
	background-image: url('../static/images/bg.jpg?resize&size=520');
}

Ideally I'd like to do this :

.webp .bgimage {
	background-image: url('../static/images/bg.jpg?webp&resize&size=520');
}
.no-webp .bgimage {
	background-image: url('../static/images/bg.jpg?resize&size=520');
}

[akd-io]

I'm having difficulty with this as well :/

Edit: Seems like a common issue here. #120 mentions it and references relevant issues, #84 and #91.
Quote from issue #120:

I'm not 100% happy with the current version for the following reasons:

• it depends on many different webpack loaders which has led to some workarounds and many features cannot be combined because the loaders don't work well with each other. See Inlining resized images #84, webp srcset #91 for examples.

[calclavia]

I'm getting the same issue.

[cadekynaston]

Running into this right now.

[SpicyPete]

Using multiple filters would be very useful

[nad182]

For some reason neither resizing, nor converting to webp works for me, as also mentioned in this issue. How did you guys make it work (even without combining)?

[benedfit]

Have you tried ?resize&format=webp?

[nad182]

Have you tried ?resize&format=webp?

Yes.
My css file:

background-image: url('../public/images/hero-bg.png?resize&format=webp');

My next.config.js:

module.exports = withPlugins([
  [
    optimizedImages,
    {
      optimizeImagesInDev: true,
      responsive: {
        adapter: responsiveLoaderSharp,
        sizes: [300, 320, 640, 960, 1200, 1800, 2400],
        placeholder: true,
        placeholderSize: 40,
      },
    },
  ],
]);

Output in the browser after the build and deploy to netlify: