Generating both WEBP and not-WEBP images

[germanocorrea]

I want to use WEBP images, but I'd like to fallback them to PNG, JPEG or whatever file extension it is. So I need both versions of each file, but I'm not being able to make image-webpack-loader or webpack itself to save that way. Neither searching for a way (maybe I'm using the wrong search terms?).

All I need is two different files, one converted to WEBP, and the other just optimized.

Is there any way to do this?

Thanks for the help

[tcoopman]

That's not something that's possible at the moment. It's something to look into. If someone is up to create a PR for it, that would be great

[germanocorrea]

I have managed to do it passing a custom output name to webp object and using imagemin.buffer() again and this.emitFile() before calling the callback. Only thing is that SVGs (obviously) doesn't change, but generate a file (I would like to skip SVG files instead of duplicating them). Or the developer using the loader should use two test cases (like one /\.(gif|png|jpe?g)$/i and /\.(svg)$/i) to avoid this?

(also, I don't know if the emitFile it's the best approach, since I've never developed a webpack plugin - in fact, I'm using webpack for the first time)

[bitttttten]

I guess I just asked this in: https://github.com/tcoopman/image-webpack-loader/issues/183

I was thinking of doing two loaders in webpack, and importing two different files.. although that's not the best solution. It would be ideal if image-webpack-loader could also return the original image too alongside src, srcSet, etc:

image.src image.srcSet image.originalImage.src image.originalImage.srcSet

[wintercounter]

Alongside with this I think this could be tackled with an introduction of a query-string based system with other features as well. In my case I would need on-the-fly resizing, and it would be nice if I would be able to just do import MyImage from './MyImage.jpg?width=300'

This was already tackled here: https://github.com/tcoopman/image-webpack-loader/issues/125

I understand this would add huge complexity and it's not the scope of this loader, however I doubt that any other loader will every be 100% completible with this loader. There is one soultion that's out of date and I don't think it can work together.

Here are some examples that would be nice to have:

// Single image, no args, keep it simple and backward compatible
import MyImage from './name.jpg'
<img src={MyImage} />

// Single size
import MyImage from './name.jpg?width=300'
<img src={MyImage.width300} />

// Multiple size to be used in srcset
import MyImage from './name.jpg?width=300&width=600'
<img src={MyImage.width600} />

// Multiple formats
import MyImage from './name.jpg?width=300&format=jpg&format=webp'
<img src={MyImage.width300_webp} />

// How about supporting some extra stuff using jimp for example?
import MyImage from './name.jpg?blur=10'
<img src={MyImage.blur10_webp} />

// Mixing args: generated name would always follow the ofter of the QS
import MyImage from './name.jpg?blur=10&height=300'
<img src={MyImage.blur10_height300} />

As there could be many combinations, I would simply have all options in the key.

Also maybe nice imports can be supported like:

import { blur10_height300 } from './name.jpg?blur=10&height=300'

This way this would be an out of the box AIO solution to all our image problems.

If there would be intentions for such direction, I'd be happy to help working on this.

[anikethsaha]

https://github.com/tcoopman/image-webpack-loader/issues/183#issuecomment-566193692