diff --git a/public/index.html b/public/index.html
index 5ce1aed..1f35889 100644
--- a/public/index.html
+++ b/public/index.html
@@ -135,6 +135,42 @@
             cursor: pointer;
         }
         label { font-size: 0.9rem; color: #666; display: flex; align-items: center; gap: 0.25rem; }
+        input[type="range"] {
+            -webkit-appearance: none;
+            appearance: none;
+            vertical-align: middle;
+            margin: 0;
+            height: 20px;
+            background: transparent;
+        }
+        input[type="range"]::-webkit-slider-runnable-track {
+            height: 6px;
+            background: #ccc;
+            border-radius: 3px;
+        }
+        input[type="range"]::-webkit-slider-thumb {
+            -webkit-appearance: none;
+            width: 16px;
+            height: 16px;
+            background: #666;
+            border-radius: 50%;
+            margin-top: -5px;
+            cursor: pointer;
+        }
+        input[type="range"]::-moz-range-track {
+            height: 6px;
+            background: #ccc;
+            border-radius: 3px;
+        }
+        input[type="range"]::-moz-range-thumb {
+            width: 16px;
+            height: 16px;
+            background: #666;
+            border-radius: 50%;
+            border: none;
+            cursor: pointer;
+        }
+        input[type="number"] { width: 70px; }
 
         @media (max-width: 500px) {
             body { margin: 1rem auto; padding: 0.5rem; }
@@ -174,6 +210,19 @@
                     Transparent
                 </label>
             </div>
+            <div class="toolbar-group">
+                <label>
+                    Quality:
+                    <input type="range" id="optimizeQuality" min="10" max="100" value="80" style="width: 100px;">
+                    <span id="qualityValue">80%</span>
+                </label>
+                <label>
+                    Max:
+                    <input type="number" id="maxDimension" value="2048" min="100" max="8192" style="width: 70px;">
+                    px
+                </label>
+                <button onclick="optimizeImage()">Optimize</button>
+            </div>
             <div class="toolbar-group">
                 <button onclick="downloadImage()">Download</button>
                 <button onclick="copyImage()">Copy</button>
@@ -642,6 +691,50 @@
             hideStatus();
             fileInput.value = '';
         }
+
+        // Optimize
+        document.getElementById('optimizeQuality').oninput = function() {
+            document.getElementById('qualityValue').textContent = this.value + '%';
+        };
+
+        function optimizeImage() {
+            if (!currentImage) return;
+
+            const quality = document.getElementById('optimizeQuality').value / 100;
+            const maxDim = parseInt(document.getElementById('maxDimension').value) || 2048;
+
+            // Calculate new dimensions (maintain aspect ratio)
+            let newW = currentImage.width;
+            let newH = currentImage.height;
+
+            if (newW > maxDim || newH > maxDim) {
+                if (newW > newH) {
+                    newH = Math.round(newH * (maxDim / newW));
+                    newW = maxDim;
+                } else {
+                    newW = Math.round(newW * (maxDim / newH));
+                    newH = maxDim;
+                }
+            }
+
+            // Create optimized canvas
+            const tempCanvas = document.createElement('canvas');
+            tempCanvas.width = newW;
+            tempCanvas.height = newH;
+            const ctx = tempCanvas.getContext('2d');
+            ctx.drawImage(currentImage, 0, 0, newW, newH);
+
+            // Convert to JPEG with quality setting
+            const optimized = tempCanvas.toDataURL('image/jpeg', quality);
+
+            // Load back as current image
+            const img = new Image();
+            img.onload = () => {
+                currentImage = img;
+                updatePreview();
+            };
+            img.src = optimized;
+        }
     </script>
 </body>
 </html>