Optimizer: Add granular image processing controls and improve image handling. Issue #3

Author: bigbag

README.md

@@ -26,8 +26,13 @@ A tool for converting EPUB files to XTC/XTCH format and optimizing EPUBs for e-i
 - Optimize EPUB files for e-ink readers
 - Remove problematic CSS (floats, flex, grid, fixed positioning)
 - Strip embedded fonts to reduce file size
-- Convert images to grayscale
-- Resize images to configurable max width
+- Image processing (toggleable):
+  - Convert images to grayscale
+  - Resize images to configurable max width/height
+  - Flatten alpha transparency to white background
+  - Skip tiny decorative images (<20px)
+  - Only replace images when processed version is smaller
+- Remove unsupported image formats (SVG, WebP, TIFF)
 - Inject e-paper optimized CSS
 - Batch processing with ZIP export
 
@@ -57,7 +62,8 @@ A tool for converting EPUB files to XTC/XTCH format and optimizing EPUBs for e-i
 
 ### Optimizer Tab
 - Drop EPUBs and switch to the Optimizer tab
-- Configure optimization options
+- Configure optimization options (CSS removal, font stripping, image processing, unsupported format removal, CSS injection)
+- Image sub-controls (grayscale, max width, unsupported format removal) are disabled when "Process images" is unchecked
 - Click "Optimize EPUBs" to download optimized files
 
 ### CLI Usage
@@ -87,9 +93,14 @@ node index.js optimize book.epub -o book_optimized.epub -c settings.json
 
 # Optimize all EPUBs in a directory
 node index.js optimize ./epubs/ -o ./output/ -c settings.json
+
+# Optimize recursively (set "recursive": true in settings.json optimizer section)
+node index.js optimize ./library/ -o ./optimized/ -c settings.json
 ```
 
-Optimization options are configured in `settings.json` under the `optimizer` section. Set `recursive` to `true` to process subdirectories; use `include`/`exclude` glob patterns to filter files.
+Optimization options are configured in `settings.json` under the `optimizer` section:
+- Set `recursive` to `true` to process subdirectories (preserves directory structure in output)
+- Use `include`/`exclude` glob patterns to filter files (e.g., `"exclude": "*_optimized.epub"`)
 
 Example `settings.json`:
 ```json
@@ -104,6 +115,8 @@ Example `settings.json`:
   "optimizer": {
     "removeCss": true,
     "stripFonts": true,
+    "processImages": true,
+    "removeUnsupportedImages": true,
     "grayscale": true,
     "maxImageWidth": 480,
     "injectCss": true,

cli/optimizer.js

@@ -226,7 +226,7 @@ async function optimizeEpub(inputPath, outputPath, options) {
         }
 
         // Remove unsupported image formats (GIF, SVG, WebP, TIFF)
-        if (/\.(gif|svg|webp|tiff?)$/i.test(filePath)) {
+        if (options.removeUnsupportedImages && /\.(gif|svg|webp|tiff?)$/i.test(filePath)) {
             // Try to convert to JPEG via sharp, remove if conversion fails
             try {
                 const imgData = await zipFile.async('nodebuffer');
@@ -280,7 +280,7 @@ async function optimizeEpub(inputPath, outputPath, options) {
         }
 
         // Process supported images (JPEG, PNG, BMP)
-        if ((options.grayscale || options.maxImageWidth) && /\.(jpg|jpeg|png|bmp)$/i.test(filePath)) {
+        if (options.processImages && /\.(jpg|jpeg|png|bmp)$/i.test(filePath)) {
             const imgData = await zipFile.async('nodebuffer');
             const processed = await processImage(imgData, options.maxImageWidth, options.grayscale);
             if (processed && processed.length < imgData.length) {

cli/settings.js

@@ -51,10 +51,12 @@ const DEFAULT_SETTINGS = {
     optimizer: {
         removeCss: true,
         stripFonts: true,
+        processImages: true,
+        removeUnsupportedImages: true,
         grayscale: true,
         maxImageWidth: 480,
         injectCss: true,
-        recursive: false,
+        recursive: true,
         include: '*.epub',
         exclude: null
     }

web/app.js

@@ -813,6 +813,23 @@ function setupSettings() {
                document.getElementById('maxImageWidthNum'),
                'maxImageWidthValue');
 
+    // Toggle dependent image controls when processImages changes
+    var optProcessImages = document.getElementById('optProcessImages');
+    var imageSubControls = [
+        document.getElementById('optGrayscale'),
+        document.getElementById('optRemoveUnsupported'),
+        document.getElementById('maxImageWidth'),
+        document.getElementById('maxImageWidthNum')
+    ];
+    function updateImageSubControls() {
+        var enabled = optProcessImages.checked;
+        for (var i = 0; i < imageSubControls.length; i++) {
+            imageSubControls[i].disabled = !enabled;
+        }
+    }
+    optProcessImages.addEventListener('change', updateImageSubControls);
+    updateImageSubControls();
+
     // Status bar sliders (render-only, no applySettings needed)
     syncInputsRenderOnly(statusFontSize, statusFontSizeNum, 'statusFontSizeValue');
     syncInputsRenderOnly(statusEdgeMargin, statusEdgeMarginNum, 'statusEdgeMarginValue');
@@ -1744,6 +1761,8 @@ async function optimizeEpub(file) {
     var settings = {
         removeCss: document.getElementById('optRemoveCss').checked,
         stripFonts: document.getElementById('optStripFonts').checked,
+        processImages: document.getElementById('optProcessImages').checked,
+        removeUnsupportedImages: document.getElementById('optRemoveUnsupported').checked,
         grayscale: document.getElementById('optGrayscale').checked,
         maxWidth: parseInt(document.getElementById('maxImageWidth').value),
         injectCss: document.getElementById('optInjectCss').checked
@@ -1785,11 +1804,17 @@ async function optimizeEpub(file) {
             epubZip.file(path, html);
         }
 
+        // Remove unsupported image formats (can't reliably process in browser, won't display on device)
+        if (settings.processImages && settings.removeUnsupportedImages && /\.(svg|webp|tiff?)$/i.test(path)) {
+            epubZip.remove(path);
+            continue;
+        }
+
         // Process images
-        if (settings.grayscale && /\.(jpg|jpeg|png|gif)$/i.test(path)) {
+        if (settings.processImages && /\.(jpg|jpeg|png|bmp|gif)$/i.test(path)) {
             var imgData = await zipFile.async('arraybuffer');
             var processedImg = await processImage(imgData, settings.maxWidth, settings.grayscale);
-            if (processedImg) {
+            if (processedImg && processedImg.byteLength < imgData.byteLength) {
                 epubZip.file(path, processedImg);
             }
         }
@@ -1847,6 +1872,9 @@ async function processImage(imgData, maxWidth, toGrayscale) {
         var blob = new Blob([imgData]);
         var img = new Image();
         img.onload = function() {
+            // Skip tiny decorative images
+            if (img.width < 20 || img.height < 20) { resolve(null); return; }
+
             var canvas = document.createElement('canvas');
             var ctx = canvas.getContext('2d');
 
@@ -1859,8 +1887,20 @@ async function processImage(imgData, maxWidth, toGrayscale) {
                 width = maxWidth;
             }
 
+            // Constrain height to device decode limit
+            var maxHeight = 3072;
+            if (height > maxHeight) {
+                width = Math.round(width * (maxHeight / height));
+                height = maxHeight;
+            }
+
             canvas.width = width;
             canvas.height = height;
+
+            // Flatten alpha to white background (matches CLI behavior)
+            ctx.fillStyle = '#ffffff';
+            ctx.fillRect(0, 0, width, height);
+
             ctx.drawImage(img, 0, 0, width, height);
 
             // Convert to grayscale if enabled

web/index.html

@@ -318,11 +318,21 @@ <h2>EPUB Optimizer</h2>
                     <label for="optStripFonts">Strip embedded fonts</label>
                 </div>
 
+                <div class="checkbox-group">
+                    <input type="checkbox" id="optProcessImages" checked>
+                    <label for="optProcessImages">Process images (resize & convert to baseline JPEG)</label>
+                </div>
+
                 <div class="checkbox-group">
                     <input type="checkbox" id="optGrayscale" checked>
                     <label for="optGrayscale">Convert images to grayscale</label>
                 </div>
 
+                <div class="checkbox-group">
+                    <input type="checkbox" id="optRemoveUnsupported" checked>
+                    <label for="optRemoveUnsupported">Remove unsupported image formats (SVG, WebP, TIFF)</label>
+                </div>
+
                 <div class="control-group">
                     <label>Max Image Width: <span id="maxImageWidthValue">480</span>px</label>
                     <div class="slider-row">

web/style.css

@@ -215,6 +215,11 @@ input[type="range"]::-webkit-slider-thumb {
     margin: 0;
 }
 
+.checkbox-group input[type="checkbox"]:disabled + label,
+.control-group:has(input:disabled) label {
+    opacity: 0.4;
+}
+
 /* Checkbox row for multiple checkboxes */
 .checkbox-row {
     display: flex;