Use UPNG.js to write tiny PNG files

- Already had UPNG.js for BMP support
- Downloaded pako from https://bundle.run/pako@2.0.3 because I'm too lazy to browserify it myself. I don't really want it minified, but oh well.

.vscode/settings.json

@@ -173,6 +173,7 @@
 		"Otjiherero",
 		"Owambo",
 		"Oʻzbek",
+		"PNGs",
 		"Phlp",
 		"Photoshop",
 		"Polski",

index.html

@@ -1477,6 +1477,7 @@
 		<script src="lib/pep.js"></script>
 		<script src="lib/canvas.toBlob.js"></script>
 		<script src="lib/gif.js/gif.js"></script>
+		<script src="lib/pako-2.0.3.min.js"></script>
 		<script src="lib/UPNG.js"></script>
 		<script src="lib/bmp.js"></script>
 		<script src="lib/anypalette-0.6.0.js"></script>

src/functions.js

@@ -2782,6 +2782,15 @@ function write_image_file(canvas, mime_type, blob_callback) {
 		sanity_check_blob(blob, () => {
 			blob_callback(blob);
 		});
+	} else if (mime_type === "image/png") {
+		// UPNG.js gives better compressed PNGs than the built-in browser PNG encoder
+		// In fact you can use it as a minifier! http://upng.photopea.com/
+		const image_data = canvas.ctx.getImageData(0, 0, canvas.width, canvas.height);
+		const array_buffer = UPNG.encode([image_data.data.buffer], image_data.width, image_data.height);
+		const blob = new Blob([array_buffer]);
+		sanity_check_blob(blob, () => {
+			blob_callback(blob);
+		});
 	} else {
 		canvas.toBlob(blob => {
 			// Note: could check blob.type (mime type) instead