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
Build-time image outputs and login branding paths change format; removing the background-static mixin could break any consumer still importing it outside this repo snapshot.

Overview
Shifts static and generated imagery toward WebP: WebpackImageSizesPlugin now uses default.webp as the source and emits default placeholders as WebP; the login stylesheet points at logo.webp instead of logo.jpg. imagemin-webp is added as a dev dependency (lockfile updated).

SVGO is simplified to preset-default with removeViewBox disabled, plus removeTitle, convertStyleToAttrs, and prefixIds. Webpack passes that config directly into imagemin (['svgo', svgoconfig]).

Removes the unused background-static SCSS mixin (retina @2x backgrounds) and deletes logo-beapi.svg. Minor cleanups: mode shorthand in dev/prod webpack configs and a formatting tweak in the image plugin log line.

^{Reviewed by Cursor Bugbot for commit 0f068df. 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

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

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

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

Stale Bugbot comment from a previous run.

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 ?

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

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

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

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

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

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

…inimizer Move image minimization out of the plugins array so it runs in webpack’s optimization pipeline. Keeps SVGO config wired as svgoconfig for imagemin-svgo.

cursor

Cursor Bugbot has reviewed your changes using default effort 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 0f068df. Configure here.}

…age.json and package-lock.json - Deleted imagemin-webp from both package.json and package-lock.json as it is no longer needed for the project. - Cleaned up the package-lock.json by removing associated entries to streamline dependency management.

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

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

cursor Bot reviewed Apr 24, 2026

View reviewed changes

Comment thread config/webpack.common.js Outdated

cedric07 mentioned this pull request Apr 27, 2026

Add WebpackStaticImagesPlugin to handle static image processing #491

Merged

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

cursor Bot reviewed Apr 29, 2026

View reviewed changes

Comment thread config/plugins.js Outdated

francoistibo reviewed May 4, 2026

View reviewed changes

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

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

cedric07 and others added 7 commits October 2, 2026 12:45

Add WebP support and update dependencies

9fcfdff

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

remove: delete unused background-static SCSS mixin

e073cce

Add WebpackStaticImagesPlugin to handle static image processing

bcc4162

- 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 added 4 commits October 2, 2026 12:48

fix svgo config comment

6ff65b4

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

3004476

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

cedric07 force-pushed the feat/webp branch from a169e0c to 3004476 Compare October 2, 2026 10:49

cedric07 added 2 commits October 2, 2026 12:49

update package-json lock

559d8e5

fix bugbot (webpack): register ImageMinimizerPlugin in optimization.m…

0f068df

…inimizer Move image minimization out of the plugins array so it runs in webpack’s optimization pipeline. Keeps SVGO config wired as svgoconfig for imagemin-svgo.

cursor Bot reviewed Oct 2, 2026

View reviewed changes

Comment thread package.json Outdated

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 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

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!

cursor Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 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

cursor Bot left a comment •

edited

Loading

herewithme commented May 18, 2026 •

edited

Loading