refactor: remove JPEG images and update to WebP format

- 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

Author: cedric07

config/plugins.js

@@ -18,38 +18,7 @@ const WebpackStaticImagesPlugin = require('./webpack-static-images-plugin')
 
 module.exports = {
 	get: function (mode) {
-		const isProduction = mode === 'production'
-		// A single instance: `optimization.minimizer` is only `apply()`'d when `minimize: true`
-		// (see webpack `WebpackOptionsApply.js`), so WebP `?as=webp` must live on the main
-		// `plugins` list to work with `yarn start` / dev. Image minify runs on `processAssets`
-		// from this same plugin in production only (keeps dev watch fast).
-		const imageMinimizerOptions = {
-			loader: true,
-			generator: [
-				{
-					preset: 'webp',
-					implementation: ImageMinimizerPlugin.imageminGenerate,
-					options: {
-						plugins: ['imagemin-webp'],
-					},
-				},
-			],
-		}
-		if (isProduction) {
-			imageMinimizerOptions.minimizer = {
-				implementation: ImageMinimizerPlugin.imageminMinify,
-				options: {
-					plugins: [
-						['gifsicle', { interlaced: true }],
-						['jpegtran', { progressive: true }],
-						['optipng', { optimizationLevel: 5 }],
-						['svgo', { svgoconfig }],
-					],
-				},
-			}
-		}
 		const plugins = [
-			new ImageMinimizerPlugin(imageMinimizerOptions),
 			new WebpackThemeJsonPlugin({
 				watch: mode !== 'production',
 			}),
@@ -81,9 +50,9 @@ module.exports = {
 				outputImageLocations: 'image-locations.json', // Output locations file name
 				outputImageSizes: 'image-sizes.json', // Output sizes file name
 				generateDefaultImages: true, // Generate default images
-				defaultImageSource: 'src/img/static/default.jpg', // Source image for generation
+				defaultImageSource: 'src/img/static/default.webp', // Source image for generation
 				defaultImagesOutputDir: 'dist/images', // Default images output directory
-				defaultImageFormat: 'jpg', // Generated image format (jpg, png, webp, avif)
+				defaultImageFormat: 'webp', // Generated image format (jpg, png, webp, avif)
 				silence: true, // Suppress console output
 			}),
 			new WebpackStaticImagesPlugin({
@@ -95,6 +64,21 @@ module.exports = {
 		]
 
 		if (mode === 'production') {
+			plugins.push(
+				new ImageMinimizerPlugin({
+					minimizer: {
+						implementation: ImageMinimizerPlugin.imageminMinify,
+						options: {
+							plugins: [
+								['gifsicle', { interlaced: true }],
+								['jpegtran', { progressive: true }],
+								['optipng', { optimizationLevel: 5 }],
+								['svgo', { svgoconfig }],
+							],
+						},
+					},
+				})
+			)
 			plugins.push(
 				new BundleAnalyzerPlugin({
 					analyzerMode: 'json',

config/webpack-image-sizes-plugin.js

@@ -41,9 +41,9 @@ class WebpackImageSizesPlugin {
 			outputImageLocations: 'image-locations.json',
 			outputImageSizes: 'image-sizes.json',
 			generateDefaultImages: false,
-			defaultImageSource: 'src/img/static/default.jpg',
+			defaultImageSource: 'src/img/static/default.webp',
 			defaultImagesOutputDir: 'dist/images',
-			defaultImageFormat: 'jpg',
+			defaultImageFormat: 'webp',
 			silence: false,
 			...options,
 		}
@@ -543,8 +543,7 @@ class WebpackImageSizesPlugin {
 
 		this.log(
 			'log',
-			`🖼️  Processing ${sizeKeys.length} default images (${format.toUpperCase()}) from ${
-				this.options.defaultImageSource
+			`🖼️  Processing ${sizeKeys.length} default images (${format.toUpperCase()}) from ${this.options.defaultImageSource
 			}`
 		)
 

package.json

@@ -43,7 +43,6 @@
     "imagemin-jpegtran": "^7.0.0",
     "imagemin-optipng": "^8.0.0",
     "imagemin-svgo": "^10.0.1",
-    "imagemin-webp": "^8.0.0",
     "mini-css-extract-plugin": "^1.5.0",
     "postcss": "^8.4.24",
     "postcss-import": "^15.1.0",

src/img/static/default.jpg

@@ -1,7 +1,7 @@
 // SCSS variables to customise the login page styles
 // The CSS file generated in dist/ by webpack is called automatically thanks to the WP Login Page mu-plugin present in the WP Skeleton.
 
-$login-logo-path: "../../src/img/static/logo.jpg?as=webp";
+$login-logo-path: "../../src/img/static/logo.webp";
 $login-logo-size: 312px 43px;
 $login-logo-height: 60px;
 $login-body-bg-color: #666;

src/img/static/default.webp

@@ -2280,7 +2280,6 @@ __metadata:
     imagemin-jpegtran: "npm:^7.0.0"
     imagemin-optipng: "npm:^8.0.0"
     imagemin-svgo: "npm:^10.0.1"
-    imagemin-webp: "npm:^8.0.0"
     lazysizes: "npm:^5.3.2"
     mini-css-extract-plugin: "npm:^1.5.0"
     oneloop.js: "npm:^5.2.1"
@@ -2364,7 +2363,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"bin-wrapper@npm:^4.0.0, bin-wrapper@npm:^4.0.1":
+"bin-wrapper@npm:^4.0.0":
   version: 4.1.0
   resolution: "bin-wrapper@npm:4.1.0"
   dependencies:
@@ -3384,18 +3383,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"cwebp-bin@npm:^8.0.0":
-  version: 8.0.0
-  resolution: "cwebp-bin@npm:8.0.0"
-  dependencies:
-    bin-build: "npm:^3.0.0"
-    bin-wrapper: "npm:^4.0.1"
-  bin:
-    cwebp: cli.js
-  checksum: 10/cdf14da37bcc225a5ec577955ad32dfc97469f574af37520030d4da8858e74b9433e8dca5f892041f88f8e19554cdbdc94851afde1e0f22271308f0dd270e767
-  languageName: node
-  linkType: hard
-
 "data-view-buffer@npm:^1.0.2":
   version: 1.0.2
   resolution: "data-view-buffer@npm:1.0.2"
@@ -4474,7 +4461,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"exec-buffer@npm:^3.0.0, exec-buffer@npm:^3.2.0":
+"exec-buffer@npm:^3.0.0":
   version: 3.2.0
   resolution: "exec-buffer@npm:3.2.0"
   dependencies:
@@ -4741,7 +4728,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"file-type@npm:^10.4.0, file-type@npm:^10.5.0":
+"file-type@npm:^10.4.0":
   version: 10.11.0
   resolution: "file-type@npm:10.11.0"
   checksum: 10/787ab64574316dbd423eccbadac2876879c5d2f1d24309948debdaf1dfbd0f5f25f881a716f44d294090bf435407f6938da41c833895c888a78127113337a608
@@ -5792,17 +5779,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"imagemin-webp@npm:^8.0.0":
-  version: 8.0.0
-  resolution: "imagemin-webp@npm:8.0.0"
-  dependencies:
-    cwebp-bin: "npm:^8.0.0"
-    exec-buffer: "npm:^3.2.0"
-    is-cwebp-readable: "npm:^3.0.0"
-  checksum: 10/707404df20f346b83b5651bc99017c2f272f400b87238ed64236a0dce112dd9c5d77d10ab365af6356e6ce33afd6a2d79fe534c82a8717ea746d9bc6f70b6804
-  languageName: node
-  linkType: hard
-
 "imagemin@npm:^8.0.1":
   version: 8.0.1
   resolution: "imagemin@npm:8.0.1"
@@ -6045,15 +6021,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-cwebp-readable@npm:^3.0.0":
-  version: 3.0.0
-  resolution: "is-cwebp-readable@npm:3.0.0"
-  dependencies:
-    file-type: "npm:^10.5.0"
-  checksum: 10/768ae017586ba2fb0831d3cc9cfb4cd56c9580b71684ea5584cf61910597c5fe91a419490ed85422424c6339fe9c327df3643c3496145134d4d0385fb479b591
-  languageName: node
-  linkType: hard
-
 "is-data-descriptor@npm:^1.0.1":
   version: 1.0.1
   resolution: "is-data-descriptor@npm:1.0.1"