Add WebP support and update dependencies by cedric07 · Pull Request #486 · BeAPI/beapi-frontend-framework

cedric07 · 2026-04-24T09:09:51Z

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
Touches the webpack production build pipeline (image minification and default image generation) and asset formats, which can change compiled output and potentially break image references if any paths/extensions are missed.

Overview
Switches default generated/static images from JPG to WebP: WebpackImageSizesPlugin now generates defaults from default.webp in webp format, and the login stylesheet points the logo to logo.webp.

Moves image optimization to the production plugin stack by adding image-minimizer-webpack-plugin (with imagemin + SVGO config) in config/plugins.js and removing the previous optimizer wiring from webpack.common.js.

Updates CI to use Corepack + actions/setup-node@v4 with Yarn caching, removes an unused SCSS mixin file, deletes an obsolete SVG asset, and bumps caniuse-lite in yarn.lock.

^{Reviewed by Cursor Bugbot for commit fc805ae. Bugbot is set up for automated code reviews on this repo. Configure here.}

francoistibo · 2026-04-24T10:07:01Z

forcer la transformation de toutes les images en WebP

francoistibo · 2026-04-24T10:09:01Z

tester composer cs pour fix les warnings

- 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.

…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.

cedric07 · 2026-04-27T09:17:54Z

Vu avec @MarieComet

Ne fonctionne pas pour les appels en PHP. Cette solution native webpack ne semble pas être le bon compromis. Il faudrait voir pour une alternative différente.

TEST sur une autre branche pour pas poluer cette dernière :

PR : #491

Pour la partie PHP, un plugin JS pour convertir toutes les images jpg et png du dossier static en webp, et les mettre dans le dossier dist. Ce qui permet de pouvoir les appeler directement en PHP
Garder le fonctionnement actuel pour les CSS, car sinon la compilation casse (css-loader) si on appel l'image webp directement car elle n'existe pas encore

@firestar300 Bonne approche ou pas ? a dispo pour en discuter / tester

- Introduced WebpackStaticImagesPlugin to copy and convert static images to WebP format. - Configured plugin in plugins.js with input and output directories, quality settings, and console output options.

Improve build performance by skipping image processing when no files in the input directory have changed. The plugin now registers the input directory as a context dependency and checks modified files during subsequent builds to avoid redundant processing.

…lugin Switch from Sharp to fs.copyFile for original assets to ensure they are preserved exactly as-is, maintaining source quality and metadata (EXIF/ICC). Sharp is now used exclusively for generating the WebP derivatives.

Add WebpackStaticImagesPlugin to handle static image processing

- Deleted unused JPEG images (default.jpg, logo.jpg) and replaced them with WebP versions (default.webp, logo.webp). - Updated SCSS and Webpack configuration to reference the new WebP images. - Removed imagemin-webp from package.json and yarn.lock as it is no longer needed. - Generate default images in webp format by default

- Deleted WebpackStaticImagesPlugin to streamline image processing. - Removed related configuration from plugins.js, eliminating the static image processing setup. - This change simplifies the build process by relying on existing image handling methods.

cedric07 · 2026-04-28T14:19:05Z

Pour faire suite au point entre TD :

Suppression du generator webpack webp
Transformation manuelle des jpg/png en webp dans le dossier static
Mise à jour du script qui génère les images par défaut pour qu'elles soient générées en webp
Suppression du script qui va transformer toutes les images jpg/png du dossier static en webp

TODO : A tester dans le cadre d'un projet, si ARI va bien aller charger les images webp générées, normalement oui au vu du json généré :

"square": [
      {
        "srcsets": [
          {
            "srcset": "",
            "size": "img-100-100"
          },
          {
            "srcset": "2x",
            "size": "img-200-200"
          },
          {
            "srcset": "2x",
            "size": "img-400-400"
          }
        ],
        "default_img": "default-400-400.webp",
        "img_base": "img-400-400"
      }
    ]

cedric07 · 2026-04-28T14:22:04Z


 module.exports = merge(common, {
-	mode: mode,
+	mode,


@firestar300 toujours ok cette modif ? au vu des derniers ajustements

cedric07 · 2026-04-28T14:22:14Z


 module.exports = merge(common, {
-	mode: mode,
+	mode,


cursor

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

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

^{Reviewed by Cursor Bugbot for commit fc805ae. Configure here.}

cursor · 2026-04-28T14:23:23Z

+								['gifsicle', { interlaced: true }],
+								['jpegtran', { progressive: true }],
+								['optipng', { optimizationLevel: 5 }],
+								['svgo', { svgoconfig }],


SVGO config wrapped in extra object layer

Medium Severity

The svgoconfig variable (which exports { plugins: [...] }) is passed as { svgoconfig }, creating the object { svgoconfig: { plugins: [...] } } due to ES6 shorthand property syntax. The imagemin-svgo plugin expects the config object directly (e.g. { plugins: [...] }), so the custom SVGO settings are silently ignored and defaults are used instead. The correct usage is ['svgo', svgoconfig] without the wrapping braces.

^{Reviewed by Cursor Bugbot for commit fc805ae. Configure here.}

cedric07 requested a review from firestar300 April 24, 2026 09:09

firestar300 force-pushed the feat/webp branch from 029806f to d5acef3 Compare April 24, 2026 09:37

cursor Bot reviewed Apr 24, 2026

View reviewed changes

Comment thread src/scss/02-tools/_m-background-static.scss Outdated

francoistibo requested review from francoistibo and ptesei April 24, 2026 10:04

cedric07 and others added 2 commits April 24, 2026 12:20

Add WebP support and update dependencies

f57f759

- 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.

ci: use Corepack for Yarn 4.5.0 instead of latest Berry

db240d6

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.

firestar300 force-pushed the feat/webp branch from 96d6e18 to db240d6 Compare April 24, 2026 10:20

cursor Bot reviewed Apr 24, 2026

View reviewed changes

Comment thread .github/workflows/node.js.yml Outdated

ci(node.js): change order of tasks

50732ce

cursor Bot reviewed Apr 24, 2026

View reviewed changes

Comment thread config/webpack.common.js Outdated

firestar300 and others added 2 commits April 24, 2026 16:19

remove: delete unused background-static SCSS mixin

d8070be

Add WebpackStaticImagesPlugin to handle static image processing

803eb39

- Introduced WebpackStaticImagesPlugin to copy and convert static images to WebP format. - Configured plugin in plugins.js with input and output directories, quality settings, and console output options.

cedric07 mentioned this pull request Apr 27, 2026

Add WebpackStaticImagesPlugin to handle static image processing #491

Merged

firestar300 and others added 5 commits April 27, 2026 14:14

Merge pull request #491 from BeAPI/feat/webp-plugin

90876fc

Add WebpackStaticImagesPlugin to handle static image processing

cedric07 commented Apr 28, 2026

View reviewed changes

cursor Bot reviewed Apr 28, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add WebP support and update dependencies#486

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

cedric07 commented Apr 24, 2026 •

edited by cursor Bot

Loading

Uh oh!

Uh oh!

francoistibo commented Apr 24, 2026

Uh oh!

francoistibo commented Apr 24, 2026

Uh oh!

Uh oh!

Uh oh!

cedric07 commented Apr 27, 2026 •

edited

Loading

Uh oh!

cedric07 commented Apr 28, 2026 •

edited

Loading

Uh oh!

cedric07 Apr 28, 2026

Uh oh!

cedric07 Apr 28, 2026

Uh oh!

cursor Bot left a comment

Uh oh!

cursor Bot Apr 28, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

cedric07 commented Apr 24, 2026 • edited by cursor Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

francoistibo commented Apr 24, 2026

Uh oh!

francoistibo commented Apr 24, 2026

Uh oh!

Uh oh!

Uh oh!

cedric07 commented Apr 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

cedric07 commented Apr 28, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

cedric07 Apr 28, 2026

Choose a reason for hiding this comment

Uh oh!

cedric07 Apr 28, 2026

Choose a reason for hiding this comment

Uh oh!

cursor Bot left a comment

Choose a reason for hiding this comment

Uh oh!

cursor Bot Apr 28, 2026

Choose a reason for hiding this comment

SVGO config wrapped in extra object layer

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

cedric07 commented Apr 24, 2026 •

edited by cursor Bot

Loading

cedric07 commented Apr 27, 2026 •

edited

Loading

cedric07 commented Apr 28, 2026 •

edited

Loading