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 #84, #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: