Skip to content

Add WebP support and update dependencies#486

Open
cedric07 wants to merge 4 commits intomasterfrom
feat/webp
Open

Add WebP support and update dependencies#486
cedric07 wants to merge 4 commits intomasterfrom
feat/webp

Conversation

@cedric07
Copy link
Copy Markdown
Contributor

@cedric07 cedric07 commented Apr 24, 2026

  • Added imagemin-webp to package.json and updated yarn.lock.
  • Configured WebP generation in webpack.common.js.
  • Updated SCSS files to support WebP images.
  • Removed obsolete logo SVG file.

Sur la base de cette doc : https://webpack.js.org/plugins/image-minimizer-webpack-plugin/#loader-generator-example-for-imagemin

Par défaut webpack va garder également le fichier non converti dans le dossier compilé.

Pour l'appel au fichier dans le code, il faut lui passer l'option presetdu generator : ?as=webp

Exemple : background-image: url(../img/static/logo.jpg?as=webp) et Webpack viendra automatiquement convertir le fichier en webp et remplacer l'url : background-image: url(images/logo.webp)

Exemple : background-image: url(../img/static/logo.jpg) et Webpack ne fera pas la conversion et gardera le fichier jpg : background-image: url(images/logo.jpg)

La conversion se fait au yarn build

Si elle doit se faire aussi en mode dev, il faudrait déplacer le code au dessus :

module.exports = {
	entry: entries,
	output: { ... },
	plugins: [
		// 1. Le générateur va ici pour fonctionner en DEV et en PROD
		new ImageMinimizerPlugin({
			generator: [
				{
					preset: 'webp',
					implementation: ImageMinimizerPlugin.imageminGenerate,
					options: {
						plugins: ['imagemin-webp'],
					},
				},
			],
		}),
	],
	optimization: {
		minimizer: [
			// 2. La minification classique reste ici, elle ne tournera qu'en PROD
			new ImageMinimizerPlugin({ ... }),
		],
	},
}

Note

Medium Risk
Build pipeline now rewrites image URLs to generated WebP assets and changes how images are processed in dev vs prod, which could break asset paths or output if misconfigured. CI also changes yarn/node setup (Corepack + cached yarn), which can surface lockfile/packaging issues.

Overview
Adds WebP support by configuring ImageMinimizerPlugin as a webpack loader/generator so assets requested with ?as=webp are emitted as .webp (and keeps production-only minification in the same plugin instance).

Updates SCSS (background-static mixin and login logo) to request WebP variants via ?as=webp, adds the imagemin-webp dependency, and removes the now-unused logo-beapi.svg.

Modernizes GitHub Actions by enabling Corepack, upgrading actions/setup-node to v4, and enabling Yarn caching.

Reviewed by Cursor Bugbot for commit 56120c3. Bugbot is set up for automated code reviews on this repo. Configure here.

Comment thread src/scss/02-tools/_m-background-static.scss
@francoistibo
Copy link
Copy Markdown
Contributor

forcer la transformation de toutes les images en WebP

@francoistibo
Copy link
Copy Markdown
Contributor

tester composer cs pour fix les warnings

cedric07 and others added 2 commits April 24, 2026 12:20
- Added imagemin-webp to package.json and updated yarn.lock.
- Configured WebP generation in webpack.common.js.
- Updated SCSS files to support WebP images.
- Removed obsolete logo SVG file.
Replace yarn set version berry with corepack enable to match
packageManager and avoid lockfile v8→v9 migration blocked in PRs.
Upgrade actions/setup-node to v4 with yarn cache.
Comment thread .github/workflows/node.js.yml Outdated
Copy link
Copy Markdown

@cursor cursor Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cursor Bugbot has reviewed your changes and found 1 potential issue.

Fix All in Cursor

❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.

Reviewed by Cursor Bugbot for commit 50732ce. Configure here.

Comment thread config/webpack.common.js Outdated
…ate instance

Move ImageMinimizerPlugin to plugins (generator + optional prod minifier) so
?as=webp works when minimization is off. Remove it from optimization.minimizer
to keep a single instance and avoid asset name conflicts. Minor shorthand for mode in dev/prod config.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants