Is there a Webpack plugin for both compressing jpg and png images and converting them to webp format

I'm currently exploring different methods to effectively compress my images using webpack. Specifically, I am interested in compressing .jpg files (lossy), .png files, and also generating .webp files for each jpg/png file.

Although I have experimented with https://github.com/itgalaxy/imagemin-webpack which has successfully compressed .jpg and .png files, unfortunately, I have not been able to generate .webp files despite its claim of supporting other imagemin packages.

Here is my current configuration for this plugin:

const imageMinPlugin = new ImageminPlugin({
    imageminOptions: {
        plugins: [
            ['webp', { quality: 50 }],
            ['mozjpeg', { quality: 10 }],
            ['pngquant', { quality: [0.9, 0.95]}],
        ]
    }
});

However, it seems that the "webp" aspect is being overlooked without any indication or error messages. I am curious if there exists a more efficient method to compress images using webpack that aligns with my requirements, or if there is an alternative approach I should consider?

javascriptnpmwebpackimage-compressionwebp

Answer №1

This is where you can find a different perspective on the question, even though it was not exactly the same: link.

One thing that may be missing is the imageminWebp function. You can explore it further in the repository linked here (webpack.common.js lines 22-26).

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Having trouble figuring out how to update a list using ajax in Yii

I need to modify a JavaScript function that filters the content of a list. The current code looks like this: var id = $(this).data('id'); $.fn.yiiListView.update('contests-list', { data: {category: 2} }); I couldn't find any ...

javascriptphpjqueryyii

The Babel build tool seems to be causing permission issues with running NPM bin scripts

I have a package managed by NPM that includes a bin property linking to a script, located at: /foo/package.json { "name": "foo", "bin": "./dist/index.js" } The script file is located here: /foo/src/index.js #! /usr/bin/env node console.log(&a ...

node.jsnpmfile-permissionsbabeljs

Error: The function of _data__WEBPACK_IMPORTED_MODULE_3___default.a.map is not executable

As a newcomer to React, I am exploring how arrays work with components using the map function. However, I recently encountered an error that has me stumped on how to resolve it. I have scoured numerous blogs for answers, but none seem to address my specif ...

javascriptreactjsdictionary

Monitor the DOM for visibility changes in Selenium WebDriver and PjantomJS before proceeding

I am currently creating automated test scripts using selenium-webdriver, phantomJS, and mocha. The script file I'm working with is a JavaScript file. My goal is to wait until an element (<a>) is fully visible before clicking on it. Let me pro ...

javascriptselenium-webdriverphantomjsmocha.js

When trying to upload a file using multer, an error occurred stating "Unexpected field

My current issue involves using multer to upload an image from a form. However, I am encountering an Unexpected field error after uploading the image. In my HTML code, I have specified the file and file-model names as myFile. app.js var express = re ...

javascriptangularjsnode.jsmulter

Tips for creating a stylish navbar with a faded effect on the right side and integrating a fresh button into its design

I'm looking to enhance my Navbar by implementing a feature where, if the width of the Navbar exceeds that of its parent div, it will fade on the right side and a new button will be added - similar to what can be seen on Youtube. 1- When the Navbar&ap ...

javascripthtmlcssvue.jsbootstrap-4

WebStorm not recognizing NodeJS Core Modules in External Libraries

As a newcomer to NodeJS and WebStorm, I am currently diving into a tutorial on creating an Express app. In the tutorial, the instructor always gets prompted with "Configure NodeJS Core Module Sources" including the URL nodeJS.org when creating a new NodeJ ...

javascriptnode.jsexpressconfigurationwebstorm

The API GET request is not returning any data, even though Postman is able to retrieve the

While attempting to make an API call to a remote server, I encountered the following error initially: No 'Access-Control-Allow-Origin' header is present on the requested resource. To temporarily resolve this issue, I appended the https://cors- ...

javascriptreactjsjsonfetch-api

Implementing specific CSS styles for different routes in Angular 5: Use Bootstrap CSS exclusively for admin routes

I am looking to apply Bootstrap CSS only to routes starting with '/admin'. I have enabled lazy loading for both admin and public modules. ...

javascriptangularbootstrap-4angular-router

Manipulate the CSS style of the body element in Angular with Typescript using the important tag

Within my Angular application I have implemented the following code to customize the body style: constructor(private elementRef: ElementRef) { } ngOnInit() { this.elementRef.nativeElement.ownerDocument.body.style.overflowY = 'hidden'; ...

javascriptcssangulartypescriptangular-template

The Vue.js development server compiler is hitting a roadblock at 49% progress

My Vue JS project keeps getting stuck at 49% or sometimes 62% when I run npm run serve. No matter how long I wait, it never seems to move past that point. I have searched online many times for a solution to this issue, but it appears that no one else is e ...

javascriptvue.jscompiler-errors

Disconnect event happening

I am currently studying nodejs using a French tutorial on creating a chat application with nodejs https://www.youtube.com/watch?v=8jkkd2Ohte8 However, I am facing an issue when trying to track the users who leave the chat room. This is my Server.js code: ...

javascriptnode.js

The Journey of React Native Routing

When building my React Native application, I encountered a challenge with creating a Footer and Tab menu that should only be displayed on certain screens. If I define them within the NavigationContainer, they apply to all screens uniformly. How can I sep ...

javascriptreactjsreact-native

Attempting to launch my node project through the terminal in my VS Code environment

node:internal/modules/cjs/loader:988 throw err; ^ Error: Module 'C:\Users\user\desktop\dev-folder\node\node.js' not found ←[90m at Module._resolveFilename (node:internal/modules/cjs/loader:985:15)←[39m ...

javascriptnode.jsterminalcommand-line-interface

When calling `getAuth()`, an object is returned. However, upon reloading the page, the

My code is extensive, so I have only included a portion that I believe is crucial. import {getAuth} from "firebase/auth" const authFirebase = getAuth() console.log(authFirebase) const Home = () => { ... return( ... ) } Every time I ...

javascriptfirebasefirebase-authentication

What steps should I take to incorporate Google sign-in on my website and gather user information efficiently?

I am looking to add the Google sign-in button to my website. While I am knowledgeable in HTML, PHP and JavaScript are not my strong suits. My goal is to allow users to sign in with their Google account and securely store their information on my database th ...

javascriptphphtmlgoogle-signin

Disabling font-awesome checkboxes

As someone who is new to front-end technologies, I am trying to achieve the following. Despite my efforts to find a solution, I have not been successful so far. Here is the issue I am facing-- I have two master checkboxes labeled 1) I do not like numbers ...

javascripthtmlcsscheckboxfont-awesome

Learn the step-by-step process of dynamically adding elements to a JavaScript object in JSON structure

We are attempting to dynamically generate a JSON object using a for loop. The intended result should resemble the following: posJSON = [ { "position": [msg[0].Longitude, msg[0].Latitude], "radius": 0.05, "color": [255, 255, 0, ...

javascriptjson

Using Asynchronous JavaScript and XML (AJAX) to make calls to a web service

My program is showing an internal server error var parameters = "<?xml version='1.0' encoding='utf-8'?>" + "<soap:envelope xmlns:xsi='ttp://www.w3.org/2001/xmlschema-instance' xmlns:xsd='http://www.w3. ...

javascriptasp.netjsonajaxsoap

Preventing React callback refs from exposing class methods externally

In the task at hand, I am required to create a React component for displaying toasts that hide by themselves and show from outside. Most guides on React focus on how to access the DOM from a React component, but there is little information available on how ...

javascriptreactjsjsx