Append webp extension to original filename

[jornhenkes]

Hi,

Thanks for creating this plugin! I've got an request to improve the handling of webp images. I'm using webp images in combination with a rewrite in htaccess. To make this work the webp extension needs to be appended to the original file name, including the original extension. Can you add an option for this?

I found this solution in another plugin: https://github.com/iampava/imagemin-webp-webpack-plugin#overrideextension, which might work great!

Thanks,
Jorn

[chiiya]

Hey, I already looked into this before, but couldn't find a way to get it to work. The plugin that we use (image-minimizer-webpack-plugin) doesn't seem to offer any such options and there are no examples for this use case. I could not find a way to access the original asset file extension under the generator.filename option. But I am open to pull requests if anyone with more knowledge about webpack can figure it out :)

In any case, you can accomplish the same thing in your HTML with a picture element. Here's a blade partial that I use:

<picture>
  <source srcset="{{ mix(Str::replace(['.jpg', '.jpeg', '.png', '.gif'], '', $img).'.webp') }}" type="image/webp">
  <source srcset="{{ mix($img) }}" type="image/{{ $type ?? 'jpeg' }}">
  <img src="{{ mix($img) }}" alt="{{ $alt ?? '' }}" class="{{ $class ?? '' }}" loading="lazy" @if(isset($width, $height)) width="{{ $width }}" height="{{ $height }}"@endif>
</picture>

[jornhenkes]

Hi @chiiya,

Thanks for your reply and the context. My knowledge of webpack isn't that extensive either I'm afraid. I am aware of the picture option, this is indeed a good option for static files. I will look into that for now.

Thanks!