---
layout: default
title: Compress Image - Reduce Image Size
description: Compress images to reduce file size while maintaining quality. Supports JPG, PNG, GIF, and WebP.
permalink: /playground/tools/image-compress/
---

<link rel="stylesheet" href="../shared/tool-layout.css">

<div class="tool-wrapper">
    <div class="tool-breadcrumb">
        <a href="/playground/tools/">← Back to Tools</a>
    </div>

    <div class="tool-header">
        <h1>Compress Image</h1>
        <p class="tool-description">Reduce image file size while preserving quality</p>
    </div>

    <div id="alert" class="alert"></div>

    <div class="tool-content">
        <div class="drop-zone" id="dropZone">
            <div class="drop-zone-icon">🖼️</div>
            <div class="drop-zone-text">Click to select images or drag them here</div>
            <div class="drop-zone-hint">Supports JPG, PNG, GIF, WebP • Multiple files allowed</div>
        </div>
        <input type="file" id="fileInput" class="file-input" accept="image/jpeg,image/png,image/gif,image/webp" multiple>

        <div id="compressionOptions" style="display: none; margin-top: 2rem;">
            <h3>Compression Settings</h3>
            <div style="margin-top: 1rem;">
                <label for="qualitySlider" style="display: block; margin-bottom: 0.5rem;">
                    Quality: <span id="qualityValue">80</span>%
                </label>
                <input type="range" id="qualitySlider" min="1" max="100" value="80"
                       style="width: 100%; max-width: 400px;">
                <p style="font-size: 0.85rem; color: var(--tool-text-secondary); margin-top: 0.5rem;">
                    Higher quality = larger file size • Lower quality = smaller file size
                </p>
            </div>

            <div style="margin-top: 1.5rem;">
                <label style="display: flex; align-items: center; gap: 0.5rem; cursor: pointer;">
                    <input type="checkbox" id="maxSizeCheck">
                    <span>Limit maximum file size</span>
                </label>
                <div id="maxSizeInput" style="display: none; margin-left: 2rem; margin-top: 0.5rem;">
                    <input type="number" id="maxSize" value="1" min="0.1" step="0.1"
                           style="padding: 0.5rem; border: 1px solid var(--tool-border); border-radius: 4px; width: 100px;">
                    <span style="margin-left: 0.5rem;">MB</span>
                </div>
            </div>
        </div>

        <div id="fileList" class="file-list" style="display: none;">
            <h3>Images</h3>
            <div id="fileItems"></div>
        </div>

        <div class="progress-container" id="progressContainer">
            <div class="progress-bar">
                <div class="progress-fill" id="progressFill"></div>
            </div>
            <div class="progress-text" id="progressText">Processing...</div>
        </div>

        <div class="btn-group">
            <button id="clearBtn" class="btn btn-secondary" style="display: none;">
                Clear All
            </button>
            <button id="compressBtn" class="btn btn-primary" style="display: none;" disabled>
                Compress Images
            </button>
        </div>
    </div>

    <div class="feature-list">
        <h3>Features</h3>
        <ul>
            <li>Compress multiple images at once</li>
            <li>Adjustable quality settings</li>
            <li>Optional maximum file size limit</li>
            <li>Supports JPG, PNG, GIF, WebP</li>
            <li>100% client-side processing</li>
            <li>No file uploads - complete privacy</li>
            <li>Works offline</li>
        </ul>
    </div>
</div>

<script src="../shared/tool-utils.js"></script>
<script src="../shared/cdn-dependencies.js"></script>
<script>
// Load dependencies for this tool
function handleCDNError(lib) {
  showAlert(`Failed to load ${lib} from CDN. Please check your internet connection and try again.`, 'danger');
  document.getElementById('compressBtn').disabled = true;
}

// Dynamically load required libraries
const deps = window.CDNDependencies.getToolDeps('image-compress');
Object.entries(deps).forEach(([name, dep]) => {
  const script = document.createElement('script');
  script.src = dep.url;
  script.integrity = dep.integrity;
  script.crossOrigin = 'anonymous';
  script.onerror = () => handleCDNError(name);
  document.head.appendChild(script);
});
</script>
<script src="tool.js"></script>