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

**URL:** https://discourse.roots.io/t/how-can-i-add-webp-images-to-the-manifest-json-file/24235
**Category:** bud
**Tags:** webpack, sage10
**Created:** 2022-11-16T10:23:16Z
**Posts:** 6

## Post 1 by @erip2 — 2022-11-16T10:23:16Z

Hello there!

I’m using a webpack plugin ([imagemin-webp-webpack-plugin](https://www.npmjs.com/package/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 https://bud.js.org/guides/getting-started/configure}
 * @param {import('@roots/bud').Bud} app
 */

export default async (app) => {
  app
    /**
     * Application entrypoints
     *
     * Paths are relative to your resources directory
     */
    .entry({
      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.
     */
    .assets(['images'])
    .assets(['fonts'])

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

    .setPublicPath('/app/themes/my-theme/public/')

  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.
     */
    .proxy(process.env.WP_HOME)

    /**
     * Development URL
     */
    .serve(`${process.env.WP_HOME}:3000`)
}
```

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

---

## Post 2 by @ben — 2022-11-17T20:08:03Z

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

> <https://github.com/roots/bud/issues/1886>
>
> ### Agreement
> 
> - [X] This is not a duplicate of an existing issue
> - [X] I have r…ead the [guidelines for Contributing to Roots Projects](https://github.com/roots/.github/blob/master/CONTRIBUTING.md)
> - [X] This is not a personal support request that should be posted on the [Roots Discourse](https://discourse.roots.io/) community
> 
> ### Describe the issue
> 
> Setup a project based on https://bud.js.org/extensions/bud-imagemin/ and unable to get WebP assets generated
> 
> ### Expected Behavior
> 
> WebP assets generated
> 
> ### Actual Behavior
> 
> No additional assets generated
> 
> ### Steps To Reproduce
> 
> 1.
> 1.
> 1.
> 
> 
> ### version
> 
> latest
> 
> ### What package manager are you using?
> 
> yarn
> 
> ### version
> 
> _No response_
> 
> ### Logs
> 
> _No response_
> 
> ### Configuration
> 
> _No response_
> 
> ### Relevant .budfiles
> 
> _No response_

---

## Post 3 by @erip2 — 2022-11-22T15:24:21Z

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?

---

## Post 4 by @strarsis — 2022-11-22T16:49:30Z

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

> [@[Tip] Bud alias (`bud.alias`) in SCSS (SASS)](https://discourse.roots.io/t/tip-bud-alias-bud-alias-in-scss-sass/24208):
>
> When using [bud.alias](https://bud.js.org/docs/bud.alias/) with SCSS (SASS) ([bud-sass](https://bud.js.org/extensions/bud-sass/)), you can use the alias functions by prefixing them with a tilde sign (~), like so (note: ~@images used in the example is a predefined alias [added by @roots/sage](https://bud.js.org/docs/bud.alias/#rootssage)): .test { background: url("~@images/background/test.jpg"); } Without that tilde sign (~) the path isn’t correctly interpolated when compiling the SCSS.

---

## Post 5 by @erip2 — 2022-11-24T08:15:25Z

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.

---

## Post 6 by @i1100a — 2025-02-11T16:31:23Z

Sorry to revive this old topic but did you ever manage to get it working?