How can I add webp images to the manifest.json file?

Hello there!

I’m using a webpack plugin (imagemin-webp-webpack-plugin) to convert images to webp. Everything works fine on the bud process and the webp image files are created inside the /public folder, but the problem is that these new files are not reflected on the manifest.json file and this means I can’t use them like this: @asset('images/home/about/mobile-about-section.webp').

I also tried the @roots/bud-imagemin extension, but when I add ?as=webp the file is still loaded as jpg.

This is my bud config:

import SVGSpritemapPlugin from 'svg-spritemap-webpack-plugin'
import ImageminWebpWebpackPlugin from 'imagemin-webp-webpack-plugin'

 * Build configuration
 * @see {@link}
 * @param {import('@roots/bud').Bud} app

export default async (app) => {
     * Application entrypoints
     * Paths are relative to your resources directory
      app: ['@scripts/app.js', '@styles/app.scss']

     * These files should be processed as part of the build
     * even if they are not explicitly imported in application assets.

     * These files will trigger a full page reload
     * when modified.
    .watch('resources/views/**/*', 'app/**/*')


  await app.use(
    new SVGSpritemapPlugin('resources/sprite/*.svg', {
      output: {
        filename: 'spritesheet.svg',
        chunk: { keep: true },
        svgo: false

  await app
    .use(new ImageminWebpWebpackPlugin())

     * Target URL to be proxied by the dev server.
     * This is your local dev server.

     * Development URL

I tried changing the order of the plugin use, but with no effect.

Confirmed the @roots/bud-imagemin extension isn’t working as expected, tracking the bug here:

1 Like

Hey there!

Thanks for your reply!

I got the latest bud (6.6.2) that fixes this issue, but still I’m not able to make it work.

According to documentation, it’s supposed to work out of the box without any configuration in the bud.config.mjs file.
I have the library installed on package.json.

I tried to add this just to make a quick test:

body {
  background-image: url('../../images/home/about/mobile-about-section.jpg?as=webp');

but still the file is as jpeg.

Furthermore, I want to get the file directly on the blade view with @asset(). Is this possible?

This may be interesting for using relative URLs in SCSS/SASS:

Hi there!

The path of the image is alright in my case; the image is shown.
It’s just that isn’t shown in a webp format like (I believe) it’s supposed to.