Image optimalization (#343)

I have minify images and convert them to webp format that reduce size
and keep quality.
Reduce size of bg image since its already blured by css so no need to
have it that big.

Reduce size of thumbs and helper images in helper modals should be fine
since they will not exceed the container size. Even that make them
larger than containter just to be safe

src/scripts/TerrainMapGenerator.ts

@@ -338,15 +338,31 @@ function getNeighborCoords(x: number, y: number, map: Terrain[][]): Coord[] {
   return coords;
 }
 
-async function createMapThumbnail(map: Terrain[][]): Promise<Bitmap> {
+async function createMapThumbnail(
+  map: Terrain[][],
+  quality: number = 0.5,
+): Promise<Bitmap> {
   console.log("creating thumbnail");
-  const bitmap = new Bitmap(map.length, map[0].length);
-  for (let x = 0; x < bitmap.width; x++) {
-    for (let y = 0; y < bitmap.height; y++) {
-      const rgba = getThumbnailColor(map[x][y]);
+
+  const srcWidth = map.length;
+  const srcHeight = map[0].length;
+
+  const targetWidth = Math.max(1, Math.floor(srcWidth * quality));
+  const targetHeight = Math.max(1, Math.floor(srcHeight * quality));
+
+  const bitmap = new Bitmap(targetWidth, targetHeight);
+
+  for (let x = 0; x < targetWidth; x++) {
+    for (let y = 0; y < targetHeight; y++) {
+      const srcX = Math.floor(x / quality);
+      const srcY = Math.floor(y / quality);
+      const terrain =
+        map[Math.min(srcX, srcWidth - 1)][Math.min(srcY, srcHeight - 1)];
+      const rgba = getThumbnailColor(terrain);
       bitmap.setPixelRGBA_i(x, y, rgba.r, rgba.g, rgba.b, rgba.a);
     }
   }
+
   return bitmap;
 }
 
@@ -357,9 +373,9 @@ function getThumbnailColor(t: Terrain): {
   a: number;
 } {
   if (t.type === TerrainType.Water) {
-    //shoreline water
+    // Shoreline water
     if (t.shoreline) return { r: 100, g: 143, b: 255, a: 0 };
-    //all other water
+    // All other water: adjust based on magnitude
     const waterAdjRGB: number = 11 - Math.min(t.magnitude / 2, 10) - 10;
     return {
       r: Math.max(70 + waterAdjRGB, 0),

src/scripts/generateTerrainMaps.ts

@@ -1,8 +1,7 @@
-import { encodePNGToStream } from "pureimage";
+import sharp from "sharp";
 import { generateMap } from "./TerrainMapGenerator.js";
 import path from "path";
 import fs from "fs/promises";
-import { WriteStream, createWriteStream } from "fs";
 
 const maps = [
   "Africa",
@@ -56,17 +55,21 @@ async function loadTerrainMaps() {
         process.cwd(),
         "resources",
         "maps",
-        map + "Thumb.png",
-      );
-      const thumbOutStream: WriteStream = createWriteStream(
-        thumbOutputPath,
-        "binary",
+        map + "Thumb.webp",
       );
 
       await Promise.all([
         fs.writeFile(outputPath, mainMap),
         fs.writeFile(miniOutputPath, miniMap),
-        encodePNGToStream(thumb, thumbOutStream),
+        sharp(Buffer.from(thumb.data), {
+          raw: {
+            width: thumb.width,
+            height: thumb.height,
+            channels: 4,
+          },
+        })
+          .webp({ quality: 45 })
+          .toFile(thumbOutputPath),
       ]);
     }),
   );