Converts settings images to webp

package.json

@@ -8114,6 +8114,7 @@
 		"@typescript-eslint/parser": "4.6.1",
 		"circular-dependency-plugin": "5.2.2",
 		"clean-webpack-plugin": "3.0.0",
+		"copy-webpack-plugin": "6.3.0",
 		"csp-html-webpack-plugin": "4.0.0",
 		"css-loader": "5.0.1",
 		"eslint": "7.13.0",
@@ -8122,9 +8123,11 @@
 		"eslint-plugin-import": "2.22.1",
 		"fork-ts-checker-webpack-plugin": "6.0.0",
 		"html-loader": "1.3.2",
-		"html-webpack-plugin": "5.0.0-alpha.11",
+		"html-webpack-plugin": "5.0.0-alpha.13",
 		"html-webpack-skip-assets-plugin": "0.0.2",
-		"imagemin-webpack-plugin": "2.4.2",
+		"image-minimizer-webpack-plugin": "1.0.0",
+		"imagemin-pngquant": "9.0.1",
+		"imagemin-webp": "6.0.0",
 		"mini-css-extract-plugin": "1.3.0",
 		"node-sass": "5.0.0",
 		"prettier": "2.1.2",

src/webviews/apps/settings/partials/blame.html

@@ -184,42 +184,42 @@
 			<div class="section__preview">
 				<img
 					class="image__preview hidden"
-					src="#{root}/images/settings/blame.png"
+					src="#{root}/images/settings/blame.webp"
 					data-visibility="blame.compact =false"
 				/>
 				<img
 					class="image__preview--overlay hidden"
-					src="#{root}/images/settings/blame-highlight.png"
+					src="#{root}/images/settings/blame-highlight.webp"
 					data-visibility="blame.compact =false &amp; blame.highlight.enabled &amp; blame.highlight.locations +line"
 				/>
 				<img
 					class="image__preview hidden"
-					src="#{root}/images/settings/blame-compact.png"
+					src="#{root}/images/settings/blame-compact.webp"
 					data-visibility="blame.compact"
 				/>
 				<img
 					class="image__preview--overlay hidden"
-					src="#{root}/images/settings/blame-compact-highlight.png"
+					src="#{root}/images/settings/blame-compact-highlight.webp"
 					data-visibility="blame.compact &amp; blame.highlight.enabled &amp; blame.highlight.locations +line"
 				/>
 				<img
 					class="image__preview--overlay hidden"
-					src="#{root}/images/settings/blame-highlight-gutter.png"
+					src="#{root}/images/settings/blame-highlight-gutter.webp"
 					data-visibility="blame.highlight.enabled &amp; blame.highlight.locations +gutter"
 				/>
 				<img
 					class="image__preview--overlay hidden"
-					src="#{root}/images/settings/blame-highlight-scrollbar.png"
+					src="#{root}/images/settings/blame-highlight-scrollbar.webp"
 					data-visibility="blame.highlight.enabled &amp; blame.highlight.locations +overview"
 				/>
 				<img
 					class="image__preview--overlay hidden"
-					src="#{root}/images/settings/blame-heatmap-left.png"
+					src="#{root}/images/settings/blame-heatmap-left.webp"
 					data-visibility="blame.heatmap.enabled &amp; blame.heatmap.location =left"
 				/>
 				<img
 					class="image__preview--overlay hidden"
-					src="#{root}/images/settings/blame-heatmap-right.png"
+					src="#{root}/images/settings/blame-heatmap-right.webp"
 					data-visibility="blame.heatmap.enabled &amp; blame.heatmap.location =right"
 				/>
 			</div>

src/webviews/apps/settings/partials/changes.html

@@ -85,15 +85,15 @@
 			</div>
 
 			<div class="section__preview">
-				<img class="image__preview" src="#{root}/images/settings/changes.png" />
+				<img class="image__preview" src="#{root}/images/settings/changes.webp" />
 				<img
 					class="image__preview--overlay hidden"
-					src="#{root}/images/settings/changes-highlight-gutter.png"
+					src="#{root}/images/settings/changes-highlight-gutter.webp"
 					data-visibility="changes.locations +gutter"
 				/>
 				<img
 					class="image__preview--overlay hidden"
-					src="#{root}/images/settings/changes-highlight-scrollbar.png"
+					src="#{root}/images/settings/changes-highlight-scrollbar.webp"
 					data-visibility="changes.locations +overview"
 				/>
 			</div>

src/webviews/apps/settings/partials/code-lens.html

@@ -218,52 +218,52 @@
 			</div>
 
 			<div class="section__preview">
-				<img class="image__preview" src="#{root}/images/settings/code-lens.png" />
+				<img class="image__preview" src="#{root}/images/settings/code-lens.webp" />
 				<img
 					class="image__preview--overlay hidden"
-					src="#{root}/images/settings/code-lens-file-recent+authors.png"
+					src="#{root}/images/settings/code-lens-file-recent+authors.webp"
 					data-visibility="codeLens.enabled &amp; codeLens.recentChange.enabled &amp; codeLens.authors.enabled &amp; codeLens.scopes +document"
 				/>
 				<img
 					class="image__preview--overlay hidden"
-					src="#{root}/images/settings/code-lens-file-recent.png"
+					src="#{root}/images/settings/code-lens-file-recent.webp"
 					data-visibility="codeLens.enabled &amp; codeLens.recentChange.enabled &amp; codeLens.authors.enabled =false &amp; codeLens.scopes +document"
 				/>
 				<img
 					class="image__preview--overlay hidden"
-					src="#{root}/images/settings/code-lens-file-authors.png"
+					src="#{root}/images/settings/code-lens-file-authors.webp"
 					data-visibility="codeLens.enabled &amp; codeLens.recentChange.enabled =false &amp; codeLens.authors.enabled &amp; codeLens.scopes +document"
 				/>
 
 				<img
 					class="image__preview--overlay hidden"
-					src="#{root}/images/settings/code-lens-containers-recent+authors.png"
+					src="#{root}/images/settings/code-lens-containers-recent+authors.webp"
 					data-visibility="codeLens.enabled &amp; codeLens.recentChange.enabled &amp; codeLens.authors.enabled &amp; codeLens.scopes +containers"
 				/>
 				<img
 					class="image__preview--overlay hidden"
-					src="#{root}/images/settings/code-lens-containers-recent.png"
+					src="#{root}/images/settings/code-lens-containers-recent.webp"
 					data-visibility="codeLens.enabled &amp; codeLens.recentChange.enabled &amp; codeLens.authors.enabled =false &amp; codeLens.scopes +containers"
 				/>
 				<img
 					class="image__preview--overlay hidden"
-					src="#{root}/images/settings/code-lens-containers-authors.png"
+					src="#{root}/images/settings/code-lens-containers-authors.webp"
 					data-visibility="codeLens.enabled &amp; codeLens.recentChange.enabled =false &amp; codeLens.authors.enabled &amp; codeLens.scopes +containers"
 				/>
 
 				<img
 					class="image__preview--overlay hidden"
-					src="#{root}/images/settings/code-lens-blocks-recent+authors.png"
+					src="#{root}/images/settings/code-lens-blocks-recent+authors.webp"
 					data-visibility="codeLens.enabled &amp; codeLens.recentChange.enabled &amp; codeLens.authors.enabled &amp; codeLens.scopes +blocks"
 				/>
 				<img
 					class="image__preview--overlay hidden"
-					src="#{root}/images/settings/code-lens-blocks-recent.png"
+					src="#{root}/images/settings/code-lens-blocks-recent.webp"
 					data-visibility="codeLens.enabled &amp; codeLens.recentChange.enabled &amp; codeLens.authors.enabled =false &amp; codeLens.scopes +blocks"
 				/>
 				<img
 					class="image__preview--overlay hidden"
-					src="#{root}/images/settings/code-lens-blocks-authors.png"
+					src="#{root}/images/settings/code-lens-blocks-authors.webp"
 					data-visibility="codeLens.enabled &amp; codeLens.recentChange.enabled =false &amp; codeLens.authors.enabled &amp; codeLens.scopes +blocks"
 				/>
 			</div>

src/webviews/apps/settings/partials/current-line.html

@@ -107,20 +107,20 @@
 			</div>
 
 			<div class="section__preview">
-				<img class="image__preview" src="#{root}/images/settings/current-line-blame.png" />
+				<img class="image__preview" src="#{root}/images/settings/current-line-blame.webp" />
 				<img
 					class="image__preview--overlay hidden"
-					src="#{root}/images/settings/current-line-blame-on.png"
+					src="#{root}/images/settings/current-line-blame-on.webp"
 					data-visibility="currentLine.enabled &amp; currentLine.pullRequests.enabled =false"
 				/>
 				<img
 					class="image__preview--overlay hidden"
-					src="#{root}/images/settings/current-line-blame-on+pr.png"
+					src="#{root}/images/settings/current-line-blame-on+pr.webp"
 					data-visibility="currentLine.enabled &amp; currentLine.pullRequests.enabled"
 				/>
 				<img
 					class="image__preview--overlay hidden"
-					src="#{root}/images/settings/current-line-blame-on-scrollable.png"
+					src="#{root}/images/settings/current-line-blame-on-scrollable.webp"
 					data-visibility="currentLine.enabled &amp; currentLine.scrollable"
 				/>
 			</div>

src/webviews/apps/settings/partials/heatmap.html

@@ -75,7 +75,7 @@
 			</div>
 
 			<div class="section__preview">
-				<img class="image__preview" src="#{root}/images/settings/heatmap.png" />
+				<img class="image__preview" src="#{root}/images/settings/heatmap.webp" />
 			</div>
 		</div>
 

src/webviews/apps/settings/partials/hovers.html

@@ -156,40 +156,40 @@
 			</div>
 
 			<div class="section__preview" data-visibility="hovers.enabled">
-				<img class="image__preview" src="#{root}/images/settings/hovers-currentLine.png" />
+				<img class="image__preview" src="#{root}/images/settings/hovers-currentLine.webp" />
 				<img
 					class="image__preview--overlay hidden"
-					src="#{root}/images/settings/hovers-currentLine-on.png"
+					src="#{root}/images/settings/hovers-currentLine-on.webp"
 					data-visibility="currentLine.enabled &amp; currentLine.pullRequests.enabled =false"
 				/>
 				<img
 					class="image__preview--overlay hidden"
-					src="#{root}/images/settings/hovers-currentLine-on+pr.png"
+					src="#{root}/images/settings/hovers-currentLine-on+pr.webp"
 					data-visibility="currentLine.enabled &amp; currentLine.pullRequests.enabled"
 				/>
 				<img
 					class="image__preview--overlay hidden"
-					src="#{root}/images/settings/hovers-details+pr+changes.png"
+					src="#{root}/images/settings/hovers-details+pr+changes.webp"
 					data-visibility="hovers.enabled &amp; hovers.currentLine.enabled &amp; hovers.currentLine.details &amp; hovers.currentLine.changes &amp; hovers.pullRequests.enabled"
 				/>
 				<img
 					class="image__preview--overlay hidden"
-					src="#{root}/images/settings/hovers-details+changes.png"
+					src="#{root}/images/settings/hovers-details+changes.webp"
 					data-visibility="hovers.enabled &amp; hovers.currentLine.enabled &amp; hovers.currentLine.details &amp; hovers.currentLine.changes &amp; hovers.pullRequests.enabled =false"
 				/>
 				<img
 					class="image__preview--overlay hidden"
-					src="#{root}/images/settings/hovers-details+pr.png"
+					src="#{root}/images/settings/hovers-details+pr.webp"
 					data-visibility="hovers.enabled &amp; hovers.currentLine.enabled &amp; hovers.currentLine.details &amp; hovers.currentLine.changes =false &amp; hovers.pullRequests.enabled"
 				/>
 				<img
 					class="image__preview--overlay hidden"
-					src="#{root}/images/settings/hovers-details.png"
+					src="#{root}/images/settings/hovers-details.webp"
 					data-visibility="hovers.enabled &amp; hovers.currentLine.enabled &amp; hovers.currentLine.details &amp; hovers.currentLine.changes =false &amp; hovers.pullRequests.enabled =false"
 				/>
 				<img
 					class="image__preview--overlay hidden"
-					src="#{root}/images/settings/hovers-changes.png"
+					src="#{root}/images/settings/hovers-changes.webp"
 					data-visibility="hovers.enabled &amp; hovers.currentLine.enabled &amp; hovers.currentLine.details =false &amp; hovers.currentLine.changes"
 				/>
 			</div>
@@ -263,42 +263,42 @@
 			<div class="section__preview" data-visibility="hovers.enabled">
 				<img
 					class="image__preview hidden"
-					src="#{root}/images/settings/hovers-annotations.png"
+					src="#{root}/images/settings/hovers-annotations.webp"
 					data-visibility="blame.compact =false"
 				/>
 				<img
 					class="image__preview hidden"
-					src="#{root}/images/settings/hovers-annotations-compact.png"
+					src="#{root}/images/settings/hovers-annotations-compact.webp"
 					data-visibility="blame.compact"
 				/>
 				<img
 					class="image__preview--overlay hidden"
-					src="#{root}/images/settings/hovers-annotations-currentLine-on.png"
+					src="#{root}/images/settings/hovers-annotations-currentLine-on.webp"
 					data-visibility="currentLine.enabled"
 				/>
 				<img
 					class="image__preview--overlay hidden"
-					src="#{root}/images/settings/hovers-details+pr+changes.png"
+					src="#{root}/images/settings/hovers-details+pr+changes.webp"
 					data-visibility="hovers.enabled &amp; hovers.annotations.enabled &amp; hovers.annotations.details &amp; hovers.annotations.changes &amp; hovers.pullRequests.enabled"
 				/>
 				<img
 					class="image__preview--overlay hidden"
-					src="#{root}/images/settings/hovers-details+changes.png"
+					src="#{root}/images/settings/hovers-details+changes.webp"
 					data-visibility="hovers.enabled &amp; hovers.annotations.enabled &amp; hovers.annotations.details &amp; hovers.annotations.changes &amp; hovers.pullRequests.enabled =false"
 				/>
 				<img
 					class="image__preview--overlay hidden"
-					src="#{root}/images/settings/hovers-details+pr.png"
+					src="#{root}/images/settings/hovers-details+pr.webp"
 					data-visibility="hovers.enabled &amp; hovers.annotations.enabled &amp; hovers.annotations.details &amp; hovers.annotations.changes =false &amp; hovers.pullRequests.enabled"
 				/>
 				<img
 					class="image__preview--overlay hidden"
-					src="#{root}/images/settings/hovers-details.png"
+					src="#{root}/images/settings/hovers-details.webp"
 					data-visibility="hovers.enabled &amp; hovers.annotations.enabled &amp; hovers.annotations.details &amp; hovers.annotations.changes =false &amp; hovers.pullRequests.enabled =false"
 				/>
 				<img
 					class="image__preview--overlay hidden"
-					src="#{root}/images/settings/hovers-changes.png"
+					src="#{root}/images/settings/hovers-changes.webp"
 					data-visibility="hovers.enabled &amp; hovers.annotations.enabled &amp; hovers.annotations.details =false &amp; hovers.annotations.changes"
 				/>
 			</div>

src/webviews/apps/settings/partials/modes.html

@@ -69,15 +69,15 @@
 			</div>
 
 			<div class="section__preview">
-				<img class="image__preview" src="#{root}/images/settings/status-bar.png" />
+				<img class="image__preview" src="#{root}/images/settings/status-bar.webp" />
 				<img
 					class="image__preview--overlay hidden"
-					src="#{root}/images/settings/modes-status-bar-left.png"
+					src="#{root}/images/settings/modes-status-bar-left.webp"
 					data-visibility="mode.statusBar.enabled &amp; mode.statusBar.alignment =left"
 				/>
 				<img
 					class="image__preview--overlay hidden"
-					src="#{root}/images/settings/modes-status-bar-right.png"
+					src="#{root}/images/settings/modes-status-bar-right.webp"
 					data-visibility="mode.statusBar.enabled &amp; mode.statusBar.alignment =right"
 				/>
 			</div>

src/webviews/apps/settings/partials/status-bar.html

@@ -130,25 +130,25 @@
 			</div>
 
 			<div class="section__preview">
-				<img class="image__preview" src="#{root}/images/settings/status-bar.png" />
+				<img class="image__preview" src="#{root}/images/settings/status-bar.webp" />
 				<img
 					class="image__preview--overlay hidden"
-					src="#{root}/images/settings/status-bar-right+pr.png"
+					src="#{root}/images/settings/status-bar-right+pr.webp"
 					data-visibility="statusBar.enabled &amp; statusBar.alignment =right &amp; statusBar.pullRequests.enabled"
 				/>
 				<img
 					class="image__preview--overlay hidden"
-					src="#{root}/images/settings/status-bar-right.png"
+					src="#{root}/images/settings/status-bar-right.webp"
 					data-visibility="statusBar.enabled &amp; statusBar.alignment =right &amp; statusBar.pullRequests.enabled =false"
 				/>
 				<img
 					class="image__preview--overlay hidden"
-					src="#{root}/images/settings/status-bar-left+pr.png"
+					src="#{root}/images/settings/status-bar-left+pr.webp"
 					data-visibility="statusBar.enabled &amp; statusBar.alignment =left &amp; statusBar.pullRequests.enabled"
 				/>
 				<img
 					class="image__preview--overlay hidden"
-					src="#{root}/images/settings/status-bar-left.png"
+					src="#{root}/images/settings/status-bar-left.webp"
 					data-visibility="statusBar.enabled &amp; statusBar.alignment =left &amp; statusBar.pullRequests.enabled =false"
 				/>
 			</div>

src/webviews/apps/settings/partials/views.branches.html

@@ -176,32 +176,32 @@
 			<div class="section__preview">
 				<img
 					class="image__preview hidden"
-					src="#{root}/images/settings/branches-view-compare+pr.png"
+					src="#{root}/images/settings/branches-view-compare+pr.webp"
 					data-visibility="views.branches.showBranchComparison !false &amp; views.branches.pullRequests.enabled &amp; views.branches.pullRequests.showForBranches"
 				/>
 				<img
 					class="image__preview hidden"
-					src="#{root}/images/settings/branches-view-compare.png"
+					src="#{root}/images/settings/branches-view-compare.webp"
 					data-visibility="views.branches.showBranchComparison !false &amp; views.branches.pullRequests.enabled =false"
 				/>
 				<img
 					class="image__preview hidden"
-					src="#{root}/images/settings/branches-view-compare.png"
+					src="#{root}/images/settings/branches-view-compare.webp"
 					data-visibility="views.branches.showBranchComparison !false &amp; views.branches.pullRequests.enabled &amp; views.branches.pullRequests.showForBranches =false"
 				/>
 				<img
 					class="image__preview hidden"
-					src="#{root}/images/settings/branches-view-pr.png"
+					src="#{root}/images/settings/branches-view-pr.webp"
 					data-visibility="views.branches.showBranchComparison =false &amp; views.branches.pullRequests.enabled &amp; views.branches.pullRequests.showForBranches"
 				/>
 				<img
 					class="image__preview hidden"
-					src="#{root}/images/settings/branches-view.png"
+					src="#{root}/images/settings/branches-view.webp"
 					data-visibility="views.branches.showBranchComparison =false &amp; views.branches.pullRequests.enabled =false"
 				/>
 				<img
 					class="image__preview hidden"
-					src="#{root}/images/settings/branches-view.png"
+					src="#{root}/images/settings/branches-view.webp"
 					data-visibility="views.branches.showBranchComparison =false &amp; views.branches.pullRequests.enabled &amp; views.branches.pullRequests.showForBranches =false"
 				/>
 			</div>

src/webviews/apps/settings/partials/views.commits.html

@@ -212,103 +212,103 @@
 			<div class="section__preview">
 				<img
 					class="image__preview hidden"
-					src="#{root}/images/settings/commits-view-auto-compare+pr+commit-pr.png"
+					src="#{root}/images/settings/commits-view-auto-compare+pr+commit-pr.webp"
 					data-visibility="views.commits.files.layout !tree &amp; views.commits.showBranchComparison !false &amp; views.commits.pullRequests.enabled &amp; views.commits.pullRequests.showForBranches &amp; views.commits.pullRequests.showForCommits"
 				/>
 				<img
 					class="image__preview hidden"
-					src="#{root}/images/settings/commits-view-auto-compare+pr.png"
+					src="#{root}/images/settings/commits-view-auto-compare+pr.webp"
 					data-visibility="views.commits.files.layout !tree &amp; views.commits.showBranchComparison !false &amp; views.commits.pullRequests.enabled &amp; views.commits.pullRequests.showForBranches &amp; views.commits.pullRequests.showForCommits =false"
 				/>
 				<img
 					class="image__preview hidden"
-					src="#{root}/images/settings/commits-view-auto-compare+commit-pr.png"
+					src="#{root}/images/settings/commits-view-auto-compare+commit-pr.webp"
 					data-visibility="views.commits.files.layout !tree &amp; views.commits.showBranchComparison !false &amp; views.commits.pullRequests.enabled &amp; views.commits.pullRequests.showForBranches =false &amp; views.commits.pullRequests.showForCommits"
 				/>
 				<img
 					class="image__preview hidden"
-					src="#{root}/images/settings/commits-view-auto-compare.png"
+					src="#{root}/images/settings/commits-view-auto-compare.webp"
 					data-visibility="views.commits.files.layout !tree &amp; views.commits.showBranchComparison !false &amp; views.commits.pullRequests.enabled =false"
 				/>
 				<img
 					class="image__preview hidden"
-					src="#{root}/images/settings/commits-view-auto-compare.png"
+					src="#{root}/images/settings/commits-view-auto-compare.webp"
 					data-visibility="views.commits.files.layout !tree &amp; views.commits.showBranchComparison !false &amp; views.commits.pullRequests.enabled &amp; views.commits.pullRequests.showForBranches =false &amp; views.commits.pullRequests.showForCommits =false"
 				/>
 				<img
 					class="image__preview hidden"
-					src="#{root}/images/settings/commits-view-auto-pr+commit-pr.png"
+					src="#{root}/images/settings/commits-view-auto-pr+commit-pr.webp"
 					data-visibility="views.commits.files.layout !tree &amp; views.commits.showBranchComparison =false &amp; views.commits.pullRequests.enabled &amp; views.commits.pullRequests.showForBranches &amp; views.commits.pullRequests.showForCommits"
 				/>
 				<img
 					class="image__preview hidden"
-					src="#{root}/images/settings/commits-view-auto-pr.png"
+					src="#{root}/images/settings/commits-view-auto-pr.webp"
 					data-visibility="views.commits.files.layout !tree &amp; views.commits.showBranchComparison =false &amp; views.commits.pullRequests.enabled &amp; views.commits.pullRequests.showForBranches &amp; views.commits.pullRequests.showForCommits =false"
 				/>
 				<img
 					class="image__preview hidden"
-					src="#{root}/images/settings/commits-view-auto-commit-pr.png"
+					src="#{root}/images/settings/commits-view-auto-commit-pr.webp"
 					data-visibility="views.commits.files.layout !tree &amp; views.commits.showBranchComparison =false &amp; views.commits.pullRequests.enabled &amp; views.commits.pullRequests.showForBranches =false &amp; views.commits.pullRequests.showForCommits"
 				/>
 				<img
 					class="image__preview hidden"
-					src="#{root}/images/settings/commits-view-auto.png"
+					src="#{root}/images/settings/commits-view-auto.webp"
 					data-visibility="views.commits.files.layout !tree &amp; views.commits.showBranchComparison =false &amp; views.commits.pullRequests.enabled =false"
 				/>
 				<img
 					class="image__preview hidden"
-					src="#{root}/images/settings/commits-view-auto.png"
+					src="#{root}/images/settings/commits-view-auto.webp"
 					data-visibility="views.commits.files.layout !tree &amp; views.commits.showBranchComparison =false &amp; views.commits.pullRequests.enabled &amp; views.commits.pullRequests.showForBranches =false &amp; views.commits.pullRequests.showForCommits =false"
 				/>
 
 				<img
 					class="image__preview hidden"
-					src="#{root}/images/settings/commits-view-tree-compare+pr+commit-pr.png"
+					src="#{root}/images/settings/commits-view-tree-compare+pr+commit-pr.webp"
 					data-visibility="views.commits.files.layout =tree &amp; views.commits.showBranchComparison !false &amp; views.commits.pullRequests.enabled &amp; views.commits.pullRequests.showForBranches &amp; views.commits.pullRequests.showForCommits"
 				/>
 				<img
 					class="image__preview hidden"
-					src="#{root}/images/settings/commits-view-tree-compare+pr.png"
+					src="#{root}/images/settings/commits-view-tree-compare+pr.webp"
 					data-visibility="views.commits.files.layout =tree &amp; views.commits.showBranchComparison !false &amp; views.commits.pullRequests.enabled &amp; views.commits.pullRequests.showForBranches &amp; views.commits.pullRequests.showForCommits = false"
 				/>
 				<img
 					class="image__preview hidden"
-					src="#{root}/images/settings/commits-view-tree-compare+commit-pr.png"
+					src="#{root}/images/settings/commits-view-tree-compare+commit-pr.webp"
 					data-visibility="views.commits.files.layout =tree &amp; views.commits.showBranchComparison !false &amp; views.commits.pullRequests.enabled &amp; views.commits.pullRequests.showForBranches =false &amp; views.commits.pullRequests.showForCommits"
 				/>
 				<img
 					class="image__preview hidden"
-					src="#{root}/images/settings/commits-view-tree-compare.png"
+					src="#{root}/images/settings/commits-view-tree-compare.webp"
 					data-visibility="views.commits.files.layout =tree &amp; views.commits.showBranchComparison !false &amp; views.commits.pullRequests.enabled =false"
 				/>
 				<img
 					class="image__preview hidden"
-					src="#{root}/images/settings/commits-view-tree-compare.png"
+					src="#{root}/images/settings/commits-view-tree-compare.webp"
 					data-visibility="views.commits.files.layout =tree &amp; views.commits.showBranchComparison !false &amp; views.commits.pullRequests.enabled &amp; views.commits.pullRequests.showForBranches =false &amp; views.commits.pullRequests.showForCommits =false "
 				/>
 				<img
 					class="image__preview hidden"
-					src="#{root}/images/settings/commits-view-tree-pr+commit-pr.png"
+					src="#{root}/images/settings/commits-view-tree-pr+commit-pr.webp"
 					data-visibility="views.commits.files.layout =tree &amp; views.commits.showBranchComparison =false &amp; views.commits.pullRequests.enabled &amp; views.commits.pullRequests.showForBranches &amp; views.commits.pullRequests.showForCommits"
 				/>
 				<img
 					class="image__preview hidden"
-					src="#{root}/images/settings/commits-view-tree-pr.png"
+					src="#{root}/images/settings/commits-view-tree-pr.webp"
 					data-visibility="views.commits.files.layout =tree &amp; views.commits.showBranchComparison =false &amp; views.commits.pullRequests.enabled &amp; views.commits.pullRequests.showForBranches &amp; views.commits.pullRequests.showForCommits =false"
 				/>
 				<img
 					class="image__preview hidden"
-					src="#{root}/images/settings/commits-view-tree-commit-pr.png"
+					src="#{root}/images/settings/commits-view-tree-commit-pr.webp"
 					data-visibility="views.commits.files.layout =tree &amp; views.commits.showBranchComparison =false &amp; views.commits.pullRequests.enabled &amp; views.commits.pullRequests.showForBranches =false &amp; views.commits.pullRequests.showForCommits"
 				/>
 				<img
 					class="image__preview hidden"
-					src="#{root}/images/settings/commits-view-tree.png"
+					src="#{root}/images/settings/commits-view-tree.webp"
 					data-visibility="views.commits.files.layout =tree &amp; views.commits.showBranchComparison =false &amp; views.commits.pullRequests.enabled =false"
 				/>
 				<img
 					class="image__preview hidden"
-					src="#{root}/images/settings/commits-view-tree.png"
+					src="#{root}/images/settings/commits-view-tree.webp"
 					data-visibility="views.commits.files.layout =tree &amp; views.commits.showBranchComparison =false &amp; views.commits.pullRequests.enabled &amp; views.commits.pullRequests.showForBranches =false &amp; views.commits.pullRequests.showForCommits =false"
 				/>
 			</div>

src/webviews/apps/settings/partials/views.contributors.html

@@ -114,7 +114,7 @@
 			</div>
 
 			<div class="section__preview">
-				<img class="image__preview" src="#{root}/images/settings/contributors-view.png" />
+				<img class="image__preview" src="#{root}/images/settings/contributors-view.webp" />
 			</div>
 		</div>
 

src/webviews/apps/settings/partials/views.file-history.html

@@ -42,10 +42,10 @@
 			</div>
 
 			<div class="section__preview">
-				<img class="image__preview" src="#{root}/images/settings/file-history-view.png" />
+				<img class="image__preview" src="#{root}/images/settings/file-history-view.webp" />
 				<img
 					class="image__preview--overlay hidden"
-					src="#{root}/images/settings/file-history-view-avatars.png"
+					src="#{root}/images/settings/file-history-view-avatars.webp"
 					data-visibility="views.fileHistory.avatars"
 				/>
 			</div>

src/webviews/apps/settings/partials/views.line-history.html

@@ -45,12 +45,12 @@
 			<div class="section__preview" data-visibility="views.lineHistory.enabled">
 				<img
 					class="image__preview hidden"
-					src="#{root}/images/settings/view-line-history.png"
+					src="#{root}/images/settings/view-line-history.webp"
 					data-visibility="views.lineHistory.enabled"
 				/>
 				<img
 					class="image__preview--overlay hidden"
-					src="#{root}/images/settings/view-line-history-avatars.png"
+					src="#{root}/images/settings/view-line-history-avatars.webp"
 					data-visibility="views.lineHistory.enabled &amp; views.lineHistory.avatars"
 				/>
 			</div>

src/webviews/apps/settings/partials/views.remotes.html

@@ -157,17 +157,17 @@
 			<div class="section__preview">
 				<img
 					class="image__preview hidden"
-					src="#{root}/images/settings/remotes-view-pr.png"
+					src="#{root}/images/settings/remotes-view-pr.webp"
 					data-visibility="views.remotes.pullRequests.enabled &amp; views.remotes.pullRequests.showForBranches"
 				/>
 				<img
 					class="image__preview hidden"
-					src="#{root}/images/settings/remotes-view.png"
+					src="#{root}/images/settings/remotes-view.webp"
 					data-visibility="views.remotes.pullRequests.enabled =false"
 				/>
 				<img
 					class="image__preview hidden"
-					src="#{root}/images/settings/remotes-view.png"
+					src="#{root}/images/settings/remotes-view.webp"
 					data-visibility="views.remotes.pullRequests.enabled &amp; views.remotes.pullRequests.showForBranches =false"
 				/>
 			</div>

src/webviews/apps/settings/partials/views.repositories.html

@@ -248,22 +248,22 @@
 			<div class="section__preview" data-visibility="views.repositories.enabled">
 				<img
 					class="image__preview hidden"
-					src="#{root}/images/settings/view-repositories.png"
+					src="#{root}/images/settings/view-repositories.webp"
 					data-visibility="views.repositories.enabled &amp; views.repositories.files.layout !tree"
 				/>
 				<img
 					class="image__preview hidden"
-					src="#{root}/images/settings/view-repositories-tree-compact.png"
+					src="#{root}/images/settings/view-repositories-tree-compact.webp"
 					data-visibility="views.repositories.enabled &amp; views.repositories.files.layout =tree &amp; views.repositories.files.compact"
 				/>
 				<img
 					class="image__preview hidden"
-					src="#{root}/images/settings/view-repositories-tree.png"
+					src="#{root}/images/settings/view-repositories-tree.webp"
 					data-visibility="views.repositories.enabled &amp; views.repositories.files.layout =tree &amp; views.repositories.files.compact =false"
 				/>
 				<img
 					class="image__preview--overlay hidden"
-					src="#{root}/images/settings/view-repositories-avatars.png"
+					src="#{root}/images/settings/view-repositories-avatars.webp"
 					data-visibility="views.repositories.enabled &amp; views.repositories.avatars"
 				/>
 			</div>

src/webviews/apps/settings/partials/views.searchAndCompare.html

@@ -112,7 +112,7 @@
 			</div>
 
 			<div class="section__preview">
-				<img class="image__preview" src="#{root}/images/settings/search-and-compare-view.png" />
+				<img class="image__preview" src="#{root}/images/settings/search-and-compare-view.webp" />
 			</div>
 		</div>
 

src/webviews/apps/settings/partials/views.stashes.html

@@ -116,12 +116,12 @@
 			<div class="section__preview">
 				<img
 					class="image__preview hidden"
-					src="#{root}/images/settings/stashes-view-auto.png"
+					src="#{root}/images/settings/stashes-view-auto.webp"
 					data-visibility="views.stashes.files.layout !tree"
 				/>
 				<img
 					class="image__preview hidden"
-					src="#{root}/images/settings/stashes-view-tree.png"
+					src="#{root}/images/settings/stashes-view-tree.webp"
 					data-visibility="views.stashes.files.layout =tree"
 				/>
 			</div>

src/webviews/apps/settings/partials/views.tags.html

@@ -89,12 +89,12 @@
 			<div class="section__preview">
 				<img
 					class="image__preview hidden"
-					src="#{root}/images/settings/tags-view-list.png"
+					src="#{root}/images/settings/tags-view-list.webp"
 					data-visibility="views.tags.branches.layout !tree"
 				/>
 				<img
 					class="image__preview hidden"
-					src="#{root}/images/settings/tags-view-tree.png"
+					src="#{root}/images/settings/tags-view-tree.webp"
 					data-visibility="views.tags.branches.layout =tree"
 				/>
 			</div>

src/webviews/apps/welcome/welcome.html

@@ -121,20 +121,20 @@
 						</div>
 					</div>
 					<div class="section__preview">
-						<img class="image__preview" src="#{root}/images/settings/current-line-blame.png" />
+						<img class="image__preview" src="#{root}/images/settings/current-line-blame.webp" />
 						<img
 							class="image__preview--overlay hidden"
-							src="#{root}/images/settings/current-line-blame-on.png"
+							src="#{root}/images/settings/current-line-blame-on.webp"
 							data-visibility="currentLine.enabled"
 						/>
 						<img
 							class="image__preview--overlay hidden"
-							src="#{root}/images/settings/current-line-blame-on+pr.png"
+							src="#{root}/images/settings/current-line-blame-on+pr.webp"
 							data-visibility="currentLine.enabled &amp; currentLine.pullRequests.enabled"
 						/>
 						<img
 							class="image__preview--overlay hidden"
-							src="#{root}/images/settings/current-line-blame-on-scrollable.png"
+							src="#{root}/images/settings/current-line-blame-on-scrollable.webp"
 							data-visibility="currentLine.enabled &amp; currentLine.scrollable"
 						/>
 					</div>
@@ -160,52 +160,52 @@
 						</div>
 					</div>
 					<div class="section__preview">
-						<img class="image__preview" src="#{root}/images/settings/code-lens.png" />
+						<img class="image__preview" src="#{root}/images/settings/code-lens.webp" />
 						<img
 							class="image__preview--overlay hidden"
-							src="#{root}/images/settings/code-lens-file-recent+authors.png"
+							src="#{root}/images/settings/code-lens-file-recent+authors.webp"
 							data-visibility="codeLens.enabled &amp; codeLens.recentChange.enabled &amp; codeLens.authors.enabled &amp; codeLens.scopes +document"
 						/>
 						<img
 							class="image__preview--overlay hidden"
-							src="#{root}/images/settings/code-lens-file-recent.png"
+							src="#{root}/images/settings/code-lens-file-recent.webp"
 							data-visibility="codeLens.enabled &amp; codeLens.recentChange.enabled &amp; codeLens.authors.enabled =false &amp; codeLens.scopes +document"
 						/>
 						<img
 							class="image__preview--overlay hidden"
-							src="#{root}/images/settings/code-lens-file-authors.png"
+							src="#{root}/images/settings/code-lens-file-authors.webp"
 							data-visibility="codeLens.enabled &amp; codeLens.recentChange.enabled =false &amp; codeLens.authors.enabled &amp; codeLens.scopes +document"
 						/>
 
 						<img
 							class="image__preview--overlay hidden"
-							src="#{root}/images/settings/code-lens-containers-recent+authors.png"
+							src="#{root}/images/settings/code-lens-containers-recent+authors.webp"
 							data-visibility="codeLens.enabled &amp; codeLens.recentChange.enabled &amp; codeLens.authors.enabled &amp; codeLens.scopes +containers"
 						/>
 						<img
 							class="image__preview--overlay hidden"
-							src="#{root}/images/settings/code-lens-containers-recent.png"
+							src="#{root}/images/settings/code-lens-containers-recent.webp"
 							data-visibility="codeLens.enabled &amp; codeLens.recentChange.enabled &amp; codeLens.authors.enabled =false &amp; codeLens.scopes +containers"
 						/>
 						<img
 							class="image__preview--overlay hidden"
-							src="#{root}/images/settings/code-lens-containers-authors.png"
+							src="#{root}/images/settings/code-lens-containers-authors.webp"
 							data-visibility="codeLens.enabled &amp; codeLens.recentChange.enabled =false &amp; codeLens.authors.enabled &amp; codeLens.scopes +containers"
 						/>
 
 						<img
 							class="image__preview--overlay hidden"
-							src="#{root}/images/settings/code-lens-blocks-recent+authors.png"
+							src="#{root}/images/settings/code-lens-blocks-recent+authors.webp"
 							data-visibility="codeLens.enabled &amp; codeLens.recentChange.enabled &amp; codeLens.authors.enabled &amp; codeLens.scopes +blocks"
 						/>
 						<img
 							class="image__preview--overlay hidden"
-							src="#{root}/images/settings/code-lens-blocks-recent.png"
+							src="#{root}/images/settings/code-lens-blocks-recent.webp"
 							data-visibility="codeLens.enabled &amp; codeLens.recentChange.enabled &amp; codeLens.authors.enabled =false &amp; codeLens.scopes +blocks"
 						/>
 						<img
 							class="image__preview--overlay hidden"
-							src="#{root}/images/settings/code-lens-blocks-authors.png"
+							src="#{root}/images/settings/code-lens-blocks-authors.webp"
 							data-visibility="codeLens.enabled &amp; codeLens.recentChange.enabled =false &amp; codeLens.authors.enabled &amp; codeLens.scopes +blocks"
 						/>
 					</div>
@@ -231,15 +231,15 @@
 						</div>
 					</div>
 					<div class="section__preview">
-						<img class="image__preview" src="#{root}/images/settings/status-bar.png" />
+						<img class="image__preview" src="#{root}/images/settings/status-bar.webp" />
 						<img
 							class="image__preview--overlay hidden"
-							src="#{root}/images/settings/status-bar-left.png"
+							src="#{root}/images/settings/status-bar-left.webp"
 							data-visibility="statusBar.enabled &amp; statusBar.alignment =left"
 						/>
 						<img
 							class="image__preview--overlay hidden"
-							src="#{root}/images/settings/status-bar-right.png"
+							src="#{root}/images/settings/status-bar-right.webp"
 							data-visibility="statusBar.enabled &amp; statusBar.alignment =right"
 						/>
 					</div>

webpack.config.js

@@ -6,17 +6,16 @@
 /* eslint-disable @typescript-eslint/strict-boolean-expressions */
 /* eslint-disable @typescript-eslint/prefer-optional-chain */
 'use strict';
-const fs = require('fs');
 const path = require('path');
-const glob = require('glob');
 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 const { CleanWebpackPlugin: CleanPlugin } = require('clean-webpack-plugin');
 const CircularDependencyPlugin = require('circular-dependency-plugin');
+const CopyPlugin = require('copy-webpack-plugin');
 const CspHtmlPlugin = require('csp-html-webpack-plugin');
 const ForkTsCheckerPlugin = require('fork-ts-checker-webpack-plugin');
 const HtmlPlugin = require('html-webpack-plugin');
 const HtmlSkipAssetsPlugin = require('html-webpack-skip-assets-plugin').HtmlWebpackSkipAssetsPlugin;
-const ImageminPlugin = require('imagemin-webpack-plugin').default;
+const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const TerserPlugin = require('terser-webpack-plugin');
 
@@ -69,7 +68,7 @@ class InlineChunkHtmlPlugin {
 
 module.exports =
 	/**
-	 * @param {{ analyzeBundle?: boolean; analyzeDeps?: boolean; optimizeImages?: boolean; } | undefined } env
+	 * @param {{ analyzeBundle?: boolean; analyzeDeps?: boolean; } | undefined } env
 	 * @param {{ mode: 'production' | 'development' | 'none' | undefined; }} argv
 	 * @returns { WebpackConfig[] }
 	 */
@@ -79,22 +78,15 @@ module.exports =
 		env = {
 			analyzeBundle: false,
 			analyzeDeps: false,
-			optimizeImages: mode === 'production',
 			...env,
 		};
 
-		if (env.analyzeBundle || env.analyzeDeps) {
-			env.optimizeImages = false;
-		} else if (!env.optimizeImages && !fs.existsSync(path.join(__dirname, 'images/settings'))) {
-			env.optimizeImages = true;
-		}
-
 		return [getExtensionConfig(mode, env), getWebviewsConfig(mode, env)];
 	};
 
 /**
  * @param { 'production' | 'development' | 'none' } mode
- * @param {{ analyzeBundle?: boolean; analyzeDeps?: boolean; optimizeImages?: boolean; }} env
+ * @param {{ analyzeBundle?: boolean; analyzeDeps?: boolean; }} env
  * @returns { WebpackConfig }
  */
 function getExtensionConfig(mode, env) {
@@ -205,18 +197,12 @@ function getExtensionConfig(mode, env) {
 
 /**
  * @param { 'production' | 'development' | 'none' } mode
- * @param {{ analyzeBundle?: boolean; analyzeDeps?: boolean; optimizeImages?: boolean; }} env
+ * @param {{ analyzeBundle?: boolean; analyzeDeps?: boolean; }} _env
  * @returns { WebpackConfig }
  */
-function getWebviewsConfig(mode, env) {
+function getWebviewsConfig(mode, _env) {
 	const basePath = path.join(__dirname, 'src/webviews/apps');
 
-	const clean = ['**/*'];
-	if (env.optimizeImages) {
-		console.log('Optimizing images (src/webviews/apps/images/settings/*.png)...');
-		clean.push(path.join(__dirname, 'images/settings/*'));
-	}
-
 	const cspPolicy = {
 		'default-src': "'none'",
 		'img-src': ['#{cspSource}', 'https:', 'data:'],
@@ -232,7 +218,10 @@ function getWebviewsConfig(mode, env) {
 	 * @type WebpackConfig['plugins'] | any
 	 */
 	const plugins = [
-		new CleanPlugin({ cleanOnceBeforeBuildPatterns: clean, cleanStaleWebpackAssets: false }),
+		new CleanPlugin({
+			cleanOnceBeforeBuildPatterns: ['**/*', path.join(__dirname, 'images/settings/*')],
+			cleanStaleWebpackAssets: false,
+		}),
 		new ForkTsCheckerPlugin({
 			async: false,
 			eslint: {
@@ -334,24 +323,35 @@ function getWebviewsConfig(mode, env) {
 		}),
 		new HtmlSkipAssetsPlugin({}),
 		new CspHtmlPlugin(),
-		new ImageminPlugin({
-			disable: !env.optimizeImages,
-			externalImages: {
-				context: path.join(basePath, 'images'),
-				sources: glob.sync(path.join(basePath, 'images/settings/*.png')),
-				destination: path.join(__dirname, 'images'),
-			},
-			cacheFolder: path.join(__dirname, 'node_modules', '.cache', 'imagemin-webpack-plugin'),
-			gifsicle: null,
-			jpegtran: null,
-			optipng: null,
-			pngquant: {
-				quality: '85-100',
-				speed: mode === 'production' ? 1 : 10,
+		new InlineChunkHtmlPlugin(HtmlPlugin, mode === 'production' ? ['\\.css$'] : []),
+		new CopyPlugin({
+			patterns: [
+				{
+					from: path.posix.join(basePath.replace(/\\/g, '/'), 'images', 'settings', '*.png'),
+					to: __dirname.replace(/\\/g, '/'),
+				},
+			],
+		}),
+		new ImageMinimizerPlugin({
+			test: /\.(png)$/i,
+			filename: '[path][name].webp',
+			cache: true,
+			loader: false,
+			deleteOriginalAssets: true,
+			minimizerOptions: {
+				plugins: [
+					[
+						'imagemin-webp',
+						{
+							lossless: true,
+							nearLossless: mode === 'production' ? 0 : 100,
+							quality: 100,
+							method: mode === 'production' ? 6 : 0,
+						},
+					],
+				],
 			},
-			svgo: null,
 		}),
-		new InlineChunkHtmlPlugin(HtmlPlugin, mode === 'production' ? ['\\.css$'] : []),
 	];
 
 	return {