---
layout: default
title: Compress PDF - Reduce PDF File Size
description: Reduce PDF file size by optimizing images and removing unnecessary data.
permalink: /playground/tools/compress-pdf/
---

<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 PDF</h1>
        <p class="tool-description">Reduce PDF file size while maintaining 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 a PDF or drag it here</div>
            <div class="drop-zone-hint">Single PDF file only</div>
        </div>
        <input type="file" id="fileInput" class="file-input" accept=".pdf,application/pdf">

        <div id="controlsContainer" style="display: none; margin-top: 2rem;">
            <h3>Compression Settings</h3>
            <div class="input-group">
                <label for="compressionLevel">Compression Level:</label>
                <select id="compressionLevel" style="padding: 0.5rem; border: 1px solid var(--tool-border); border-radius: 4px;">
                    <option value="low">Low (Better Quality)</option>
                    <option value="medium" selected>Medium (Balanced)</option>
                    <option value="high">High (Smaller Size)</option>
                </select>
                <div style="font-size: 0.9rem; color: var(--tool-text-secondary); margin-top: 0.5rem;">
                    <strong>⚠️ Limited effectiveness:</strong> Client-side compression typically achieves 10-20% reduction. PDFs with already-compressed images will see minimal improvement. For better results, use server-based compression tools.
                </div>
            </div>

            <div id="fileInfo" style="margin-top: 1.5rem; padding: 1rem; border: 1px solid var(--tool-border); border-radius: 8px; background: var(--tool-bg-light);">
                <div><strong>Original Size:</strong> <span id="originalSize">-</span></div>
                <div style="margin-top: 0.5rem;"><strong>Pages:</strong> <span id="pageCount">-</span></div>
            </div>
        </div>

        <div class="btn-group" style="margin-top: 2rem;">
            <button id="clearBtn" class="btn btn-secondary" style="display: none;">
                Clear
            </button>
            <button id="compressBtn" class="btn btn-primary" style="display: none;">
                Compress PDF
            </button>
        </div>

        <div id="progressContainer" style="display: none; margin-top: 1.5rem;">
            <div style="font-weight: 600; margin-bottom: 0.5rem;">Compressing PDF...</div>
            <div class="progress-bar">
                <div id="progressFill" class="progress-fill"></div>
            </div>
            <div id="progressText" style="margin-top: 0.5rem; font-size: 0.9rem; color: var(--tool-text-secondary);"></div>
        </div>

        <div id="resultContainer" style="display: none; margin-top: 2rem; padding: 1.5rem; border: 2px solid var(--tool-success); border-radius: 8px; background: var(--tool-success-bg);">
            <h3 style="margin-top: 0;">Compression Complete!</h3>
            <div><strong>New Size:</strong> <span id="newSize">-</span></div>
            <div style="margin-top: 0.5rem;"><strong>Reduction:</strong> <span id="reduction">-</span></div>
            <button id="downloadBtn" class="btn btn-success" style="margin-top: 1rem;">
                Download Compressed PDF
            </button>
        </div>
    </div>

    <div class="feature-list">
        <h3>Features</h3>
        <ul>
            <li>Multiple compression levels</li>
            <li>Image optimization</li>
            <li>Metadata cleanup</li>
            <li>Size reduction report</li>
            <li>100% client-side processing</li>
            <li>No file uploads - complete privacy</li>
            <li>Works offline</li>
        </ul>

        <div style="margin-top: 1.5rem; padding: 1rem; border: 1px solid var(--tool-border); border-radius: 8px; background: var(--tool-bg-light);">
            <strong>Note:</strong> Browser-based PDF compression is limited. For best results with large files or heavily image-based PDFs, consider server-based solutions.
        </div>
    </div>
</div>

<script src="../shared/tool-utils.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf-lib/1.17.1/pdf-lib.min.js"
        integrity="sha384-TzqKflHZaLYKpKjLG7g3w8zkFSGdTqZB1wXU2/mKXPBqC8AE4V5GV76KxGqKGKGj"
        crossorigin="anonymous"></script>
<script src="tool.js"></script>