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

Low Risk
Changes are limited to build tooling, asset formats, and CI; no runtime auth or data paths. Risk is mainly verifying production builds still emit and reference images correctly after the WebP and minimizer moves.

Overview
Shifts static assets and generated placeholders to WebP by pointing the login logo and WebpackImageSizesPlugin defaults at default.webp / logo.webp instead of JPG, and drops the unused background-static retina mixin.

Production image pipeline moves ImageMinimizerPlugin out of shared webpack config into plugins.js (production only), wires SVGO through a slimmed preset-default config (with removeViewBox kept), and removes the broken ['svgo', { svgoconfig }] shape from common config. The standalone logo-beapi.svg asset is cleared.

CI enables Corepack before actions/setup-node@v4 with Yarn caching and drops the explicit yarn set version berry step.

^{Reviewed by Cursor Bugbot for commit a169e0c. 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"
      }
    ]

francoistibo · 2026-04-29T07:09:25Z

TODO : tester sur un projet récent (CD78 et/ou VORTEX)

cedric07 · 2026-04-29T12:57:05Z

TODO : tester sur un projet récent (CD78 et/ou VORTEX)

Testé sur vortex, RAS ça fonctionne bien, les images par défaut de ARI pointent bien vers le fichier webp

- Modified the SVGO configuration to align with SVGO 3 standards, replacing the old plugin format with the new preset-default structure. - Adjusted the plugins list in plugins.js to ensure proper integration of the updated svgoconfig. - This change enhances image optimization while maintaining compatibility with the latest SVGO version.

cedric07 · 2026-04-29T13:16:03Z

Retour du bugbot sur svgo fixé, cela cassait la compilation au build : #486 (comment)

En regardant, en effet toute l'optimisation des svg n'était pas prise en compte car pas compatible avec la version 3 du package.

Il a fallut migrer la configuration du format svgo 2 à 3

https://github.com/BeAPI/beapi-frontend-framework/pull/486/changes#diff-49e5a23a192af92d5462330741246f3c8c015404d26c2a169dbf8cca24fc2b44

@firestar300

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 eb5e0fa. Configure here.}

cursor · 2026-04-29T13:51:16Z

+						},
+					},
+				})
+			)


ImageMinimizerPlugin moved from optimization.minimizer to plugins array

Medium Severity

ImageMinimizerPlugin with its minimizer config was moved from optimization.minimizer (in webpack.common.js) to the plugins array (in plugins.js). The PR description itself shows the correct pattern: the minimizer belongs in optimization.minimizer and only the generator belongs in plugins. Placing it in the plugins array bypasses webpack's optimization pipeline, losing caching and deduplication benefits. Community reports indicate this can cause significantly slower builds and high CPU usage with larger image sets. The plugin needs to be in optimization.minimizer — either back in webpack.common.js or in webpack.prod.js.

Additional Locations (1)

config/webpack.common.js#L12-L14

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

@firestar300 Le fait que t'as déplacé ça, le bugbot remonte ce soucis ? logique pour toi ?

- Included the 'removeTitle' plugin in the SVGO configuration to enhance SVG optimization by removing title elements from SVG files. - This addition aims to streamline SVG output and reduce file size.

francoistibo · 2026-05-18T14:44:59Z

@firestar300 traiter la dernière question de @cedric07

herewithme · 2026-05-18T15:10:46Z

j'ai ajouté toute une partie compression explicite ici : https://github.com/wpcomvip/be-api-omnes-education/commit/36cc0c2d66003b49b235625688b0172321e19bdb#diff-bb4e9e7eafd203cca023dd3b159d9341c9a0cd17d08e1af3308cb5bb3bece53fR8-R41 pour inspiration/reprise

et + considérer le passage à SVGo v4 ?

The prefixIds plugin renames SVG symbol IDs during optimization, which breaks icon rendering: PHP references sprites via fixed hashes (e.g. #icon-facebook) in <use href="...">, and prefixed IDs no longer match those references. Removing the plugin restores stable symbol IDs and ensures icons display correctly in the sprite workflow.

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

Comment thread config/webpack.dev.js

Comment thread config/webpack.prod.js

cursor Bot reviewed Apr 28, 2026

View reviewed changes

Comment thread config/plugins.js Outdated

fix svgo config comment

eb5e0fa

cursor Bot reviewed Apr 29, 2026

View reviewed changes

francoistibo reviewed May 4, 2026

View reviewed changes

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

feat(svgo): add 'removeTitle' plugin to SVGO configuration

13624d5

- Included the 'removeTitle' plugin in the SVGO configuration to enhance SVG optimization by removing title elements from SVG files. - This addition aims to streamline SVG output and reduce file size.

herewithme self-requested a review May 7, 2026 14:04

Uh oh!

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!

Uh oh!

Uh oh!

Uh oh!

francoistibo commented Apr 29, 2026

Uh oh!

cedric07 commented Apr 29, 2026

Uh oh!

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

Uh oh!

Uh oh!

cursor Bot left a comment

Choose a reason for hiding this comment

Uh oh!

cursor Bot Apr 29, 2026

Choose a reason for hiding this comment

ImageMinimizerPlugin moved from optimization.minimizer to plugins array

Uh oh!

cedric07 Apr 29, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

francoistibo commented May 18, 2026

Uh oh!

herewithme commented May 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 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

cedric07 commented Apr 29, 2026 •

edited

Loading

herewithme commented May 18, 2026 •

edited

Loading