diff --git a/package.json b/package.json
index 160bd919..a3ea3d2e 100644
--- a/package.json
+++ b/package.json
@@ -45,8 +45,8 @@
 	"scripts": {
 		"start": "grunt watch",
 		"minify:svg": "svgo --config=.svgo.config.js --quiet --recursive --folder ./ --exclude principles-paper-ink.svg",
-		"build:squoosh": "squoosh-cli --oxipng '{\"level\": 4}' -d img/components/ img/components/*.png && squoosh-cli --oxipng '{\"level\": 4}' -d img/design-principles/ img/design-principles/*.png && squoosh-cli --oxipng '{\"level\": 4}' -d img/visual-style/ img/visual-style/*.png && squoosh-cli --oxipng '{\"level\": 4}' -d resources/ resources/!\\(WikimediaUI-components_overview\\).png",
-		"build": "npm run minify:svg && grunt && npx npm-run-all build:*",
+		"build:png": "npm run svg-to-png.mjs",
+		"build": "npm run minify:svg && grunt & npm run build:png",
 		"test": "grunt lint"
 	}
 }
diff --git a/svg-to-png.mjs b/svg-to-png.mjs
new file mode 100644
index 00000000..af1c42fd
--- /dev/null
+++ b/svg-to-png.mjs
@@ -0,0 +1,22 @@
+import glob from 'glob';
+import sharp from 'sharp';
+
+glob( '{img/{components,design-principles,visual-style},resources}/**/!(WikimediaUI-components_overview).svg', ( er, files ) => {
+	files.forEach( ( file ) => {
+		sharp( file )
+			.png( {
+				// force color indexing
+				quality: 99,
+				timeout: 180
+			} )
+			.toFile( file.replace( '.svg', '.png' ) )
+			// eslint-disable-next-line
+			.then( ( info ) => {
+				console.log( file );
+				// console.log( info );
+			} )
+			.catch( ( err ) => {
+				console.log( err );
+			} );
+	} );
+} );