WebP Empty State Images #DS-3119

package.json

@@ -25,6 +25,8 @@
         "clean": "rimraf temp && rimraf dist",
         "copy:svg-to-src": "node scripts/svg-copy-to-src.mjs",
         "copy:copy-meta-to-dist": "node scripts/copy-meta-to-dist.mjs",
+        "convert": "bash scripts/convert.sh",
+        "gen-preview": "node scripts/generate-preview.mjs",
         "------RELEASE SCRIPTS------": "-------------------------------------------------------",
         "stage:commit": "koobiq-cli stage-commit -c \"Icons\" --without-references",
         "publish:gitlab": "koobiq-cli publish-ci-gitlab",
@@ -53,7 +55,9 @@
         "@svgr/plugin-svgo": "^8.1.0",
         "@types/fs-extra": "^11.0.4",
         "@types/node": "18.19.33",
+        "concurrently": "^9.1.2",
         "cross-env": "^7.0.3",
+        "cwebp-bin": "^8.0.0",
         "dotenv": "^16.4.5",
         "fantasticon": "^3.0.0",
         "fs-extra": "^11.2.0",
@@ -64,5 +68,8 @@
         "svgo": "^3.3.2",
         "ts-node": "^10.9.2",
         "typescript": "~5.5.4"
+    },
+    "dependencies": {
+        "glob": "^11.0.1"
     }
 }

scripts/convert.sh

@@ -0,0 +1,89 @@
+#!/bin/bash
+
+# Define source and destination directories
+SRC_DIR="src/images"
+DEST_DIR="dist/images"
+
+# Check if the directory exists before attempting to delete it
+if [ -d "$DEST_DIR" ]; then
+    # Remove the output directory and all its contents
+    rm -rf "$DEST_DIR"
+    echo "Deleted $DEST_DIR"
+else
+    echo "$DEST_DIR does not exist."
+    # Create destination directory if it doesn't exist
+    mkdir -p "$DEST_DIR"
+fi
+
+# Initialize variables for size calculations
+total_png_size=0
+total_webp_size=0
+total_lossless_webp_size=0
+count=0
+
+# Find all PNG files in the source directory
+find "$SRC_DIR" -type f -name "*.png" | while read -r file; do
+    # Get the relative path of the file
+    relative_path="${file#$SRC_DIR/}"
+
+    # Create the corresponding directory structure in the destination directory
+    mkdir -p "$DEST_DIR/$(dirname "$relative_path")"
+
+    # Copy the original PNG file to the destination directory
+    cp "$file" "$DEST_DIR/$relative_path"
+
+    # Convert to Lossy WebP = and save it in the destination directory
+    webp_file="$DEST_DIR/${relative_path%.png}-lossy80.webp"
+    cwebp -near_lossless 80 "$file" -o "$webp_file"
+
+    # Convert to lossless WebP and save it in the destination directory with a -lossless suffix
+    lossless_webp_file="$DEST_DIR/${relative_path%.png}-lossless.webp"
+    cwebp -lossless "$file" -o "$lossless_webp_file"
+
+    # Convert lossless AVIF using ImageMagick with a -lossless suffix
+    lossless_avif_file="$DEST_DIR/${relative_path%.png}-lossless.avif"
+    magick "$file" -quality 100 "$lossless_avif_file"
+
+    # Convert lossy AVIF using ImageMagick
+    avif_file="$DEST_DIR/${relative_path%.png}-lossy75.avif"
+    magick "$file" -quality 75 "$avif_file"
+
+    # Calculate sizes using stat with correct options for macOS
+    png_size=$(stat -f "%z" "$file")
+    webp_size=$(stat -f "%z" "$webp_file")
+    lossless_webp_size=$(stat -f "%z" "$lossless_webp_file")
+
+    total_png_size=$((total_png_size + png_size))
+    total_webp_size=$((total_webp_size + webp_size))
+    total_lossless_webp_size=$((total_lossless_webp_size + lossless_webp_size))
+
+    count=$((count+1))
+done
+
+
+echo "Count: $count" # Print the number of files found
+
+# Calculate average sizes and compression ratios
+if [ $count -gt 0 ]; then
+    avg_png_size=$((total_png_size / count))
+    avg_webp_size=$((total_webp_size / count))
+    avg_lossless_webp_size=$((total_lossless_webp_size / count))
+
+    webp_compression_ratio=$(echo "scale=2; 100 * (1 - $avg_webp_size / $avg_png_size)" | bc)
+    lossless_webp_compression_ratio=$(echo "scale=2; 100 * (1 - $avg_lossless_webp_size / $avg_png_size)" | bc)
+
+    # Print report
+    echo "==============================="
+    echo " Image Format Compression Report "
+    echo "==============================="
+    echo "Average PNG Size: $avg_png_size bytes"
+    echo "Average WebP Size: $avg_webp_size bytes"
+    echo "Average Lossless WebP Size: $avg_lossless_webp_size bytes"
+    echo ""
+    echo "WebP Compression Ratio: $webp_compression_ratio%"
+    echo "Lossless WebP Compression Ratio: $lossless_webp_compression_ratio%"
+else
+    echo "No PNG files found for conversion."
+fi
+
+echo "Conversion complete!"

scripts/generate-preview.mjs

@@ -0,0 +1,151 @@
+import { promises as fs } from 'fs';
+import path from 'path';
+import { exec } from 'child_process';
+import { promisify } from 'util';
+
+const execAsync = promisify(exec);
+
+// Directories and output file
+const DEST_DIR = 'dist/images/light';
+const URL_PREFIX = './images/light';
+const OUTPUT_HTML = 'dist/index.html';
+
+// HTML table styles and header
+const HTML_HEADER = `
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Image Preview</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+        }
+        table {
+            border-collapse: collapse;
+        }
+        thead {
+            position: sticky;
+            top: 0;
+            box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.1);
+            background-color: white;
+        }
+        th, td {
+            border: none;
+            padding: 0;
+            text-align: center;
+        }
+        th {
+         padding: 0.5em;
+        }
+        img {
+            max-width: 256px;
+            height: auto;
+        }
+        .size {
+            opacity: 0.5;
+            margin-left: 0.1em;
+        }
+    </style>
+</head>
+<body>
+    <h1>Empty States Images: PNG, WEbP, AVIF</h1>
+    <table>
+        <thead>
+            <tr>
+                <th>PNG</th>
+                <th>AVIF</th>
+                <th>WebP</th>
+            </tr>
+        </thead>
+        <tbody>
+`;
+
+// HTML footer
+const HTML_FOOTER = `
+        </tbody>
+    </table>
+</body>
+</html>
+`;
+
+// Function to find all PNG files in the destination directory
+async function findImages(dir) {
+    const files = await execAsync(`find ${dir} -type f -name "*.png"`);
+    return files.stdout.trim().split('\n');
+}
+
+// Function to get file size in KB
+async function getFileSize(filePath) {
+    try {
+        const stats = await fs.stat(filePath);
+        return (stats.size / 1024).toFixed(1);
+        return stats.size
+    } catch (err) {
+        console.error(`Error getting size for ${filePath}:`, err);
+        return 'N/A';
+    }
+}
+
+// Function to generate an HTML row for an image
+async function generateRow(baseName, isRetina) {
+    const retinaLabel = isRetina ? '(Retina)' : '';
+    const pngSrc = `${URL_PREFIX}/${baseName}.png`;
+    const losslessAvif = `${URL_PREFIX}/${baseName}-lossless.avif`;
+    const losslessWebp = `${URL_PREFIX}/${baseName}-lossless.webp`;
+    const lossyAvif = `${URL_PREFIX}/${baseName}-lossy75.avif`;
+    const lossyWebp = `${URL_PREFIX}/${baseName}-lossy80.webp`;
+
+    // Get file sizes
+    const pngSize = await getFileSize(path.join(DEST_DIR, `${baseName}.png`));
+    const losslessAvifSize = await getFileSize(path.join(DEST_DIR, `${baseName}-lossless.avif`));
+    const losslessWebpSize = await getFileSize(path.join(DEST_DIR, `${baseName}-lossless.webp`));
+    const lossyAvifSize = await getFileSize(path.join(DEST_DIR, `${baseName}-lossy75.avif`));
+    const lossyWebpSize = await getFileSize(path.join(DEST_DIR, `${baseName}-lossy80.webp`));
+
+    return `
+        <tr>
+            <td><img src="${pngSrc}" alt="${baseName}"><br>${baseName}.png<div class="size">${pngSize} KB</div></td>
+            <td><img src="${losslessAvif}" alt="${baseName}"><br>AVIF Lossless<div class="size">${losslessAvifSize} KB</div></td>
+            <td><img src="${losslessWebp}" alt="${baseName}"><br>WebP Lossless<div class="size">${losslessWebpSize} KB</div></td>
+        </tr>
+        <tr>
+            <td><img src="${pngSrc}" alt="${baseName}"><br>${baseName}.png<div class="size">${pngSize} KB</div></td>
+            <td><img src="${lossyAvif}" alt="${baseName}"><br>AVIF Lossy Q75<div class="size">${lossyAvifSize} KB</div></td>
+            <td><img src="${lossyWebp}" alt="${baseName}"><br>WebP Lossy Q80<div class="size">${lossyWebpSize} KB</div></td>
+        </tr>
+    `;
+}
+
+// Main function to generate the HTML file
+async function generateHtml() {
+    try {
+        // Ensure the output directory exists
+        await fs.mkdir(path.dirname(OUTPUT_HTML), { recursive: true });
+
+        // Start writing the HTML file
+        await fs.writeFile(OUTPUT_HTML, HTML_HEADER);
+
+        // Find all PNG files
+        const pngFiles = await findImages(DEST_DIR);
+
+        // Generate rows for each PNG file
+        for (const file of pngFiles) {
+            const baseName = path.basename(file, '.png');
+            const isRetina = baseName.includes('@2x');
+            const row = await generateRow(baseName, isRetina);
+            await fs.appendFile(OUTPUT_HTML, row);
+        }
+
+        // Append the footer to complete the HTML
+        await fs.appendFile(OUTPUT_HTML, HTML_FOOTER);
+
+        console.log(`HTML preview generated at ${OUTPUT_HTML}`);
+    } catch (err) {
+        console.error('Error generating HTML:', err);
+    }
+}
+
+// Run the script
+generateHtml();