HTML CSS JavaScript PDF Compression Tool

Mar 9, 2025

PDF files often contain images, graphics, and text, making them large in size. A PDF Compression Tool helps reduce the file size while maintaining quality, making it easier to store and share documents.

HTML CSS JavaScript PDF Compression Tool

What is a PDF Compression Tool?

A PDF Compression Tool is an online or offline utility that reduces the file size of PDFs by removing redundant data, optimizing images, and compressing embedded elements without affecting readability.

Why Compress a PDF File?

Using a PDF Compression Tool offers multiple benefits:

Faster File Sharing: Smaller PDFs upload and download quickly.
Reduced Storage Space: Optimized PDFs take up less space on devices.
Improved Performance: Compressed files open faster and work efficiently.
Better Online Viewing: Smaller files load faster in web browsers.

How Does PDF Compression Work?

A PDF Compression Tool reduces file size by:

Removing unnecessary metadata and embedded fonts.
Compressing images without losing clarity.
Eliminating redundant document structures.
Using advanced compression techniques like lossless and lossy compression.

Here is Sample

Compress PDF files without losing quality

📄

Drag & Drop your PDF file here

or click to browse files (Max size: 100MB)

document.pdf

0 KB

Unknown pages

Compression Level

Low

Medium

High

Additional Options

Remove metadata (author, creation date, etc.)

Downscale images to reduce file size

Optimize font embedding

Compression Results

Original PDF

📄

File Size: 0 KB

Pages: 0

Compressed PDF

📄

File Size: 0 KB

Pages: 0

Reduction: 0%

Download Compressed PDF

Original Size

0 KB

Compressed Size

0 KB

Space Saved

0 KB

Reduction

Compress PDFs securely - All processing happens in your browser

Compressing PDF...

Free PDF Compression Tool

Below is a PDF compression tool that users can copy and use:

<style>

/* Custom CSS with unique class names */

:root {

--primary-color: #7209b7;

--secondary-color: #3f37c9;

--accent-color: #f72585;

--light-color: #f8f9fa;

--dark-color: #212529;

--success-color: #4cc9f0;

--warning-color: #f8961e;

--gradient-start: #7209b7;

--gradient-end: #4361ee;

}

* {

margin: 0;

padding: 0;

box-sizing: border-box;

font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

}

.pdf-app-wrapper {

min-height: 100vh;

background: linear-gradient(135deg, var(--gradient-start) 0%, var(--gradient-end) 100%);

display: flex;

flex-direction: column;

align-items: center;

padding: 2rem;

}

.pdf-header-section {

margin-bottom: 2rem;

text-align: center;

}

.pdf-app-title {

font-size: 3rem;

color: white;

margin-bottom: 0.5rem;

text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);

}

.pdf-app-subtitle {

color: var(--light-color);

font-size: 1.2rem;

opacity: 0.9;

}

.pdf-main-container {

width: 100%;

max-width: 800px;

background-color: white;

border-radius: 16px;

padding: 2rem;

box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);

margin-bottom: 2rem;

}

.pdf-dropzone-area {

border: 3px dashed var(--primary-color);

border-radius: 12px;

padding: 3rem 2rem;

text-align: center;

margin-bottom: 1.5rem;

cursor: pointer;

transition: all 0.3s ease;

position: relative;

}

.pdf-dropzone-area:hover {

background-color: rgba(114, 9, 183, 0.05);

transform: translateY(-5px);

}

.pdf-upload-icon {

font-size: 3rem;

color: var(--primary-color);

margin-bottom: 1rem;

}

.pdf-upload-text {

color: var(--dark-color);

font-size: 1.2rem;

margin-bottom: 0.5rem;

}

.pdf-upload-subtext {

color: #6c757d;

font-size: 0.9rem;

}

.pdf-file-input {

position: absolute;

width: 100%;

height: 100%;

top: 0;

left: 0;

opacity: 0;

cursor: pointer;

}

.pdf-compression-options {

margin-bottom: 1.5rem;

}

.pdf-option-group {

margin-bottom: 1.2rem;

}

.pdf-option-title {

font-weight: 600;

margin-bottom: 0.5rem;

color: var(--dark-color);

}

.pdf-radio-options {

display: flex;

flex-wrap: wrap;

gap: 1rem;

}

.pdf-radio-option {

flex: 1;

min-width: 120px;

}

.pdf-radio-label {

display: flex;

align-items: center;

gap: 0.5rem;

padding: 0.6rem 1rem;

border: 2px solid #e9ecef;

border-radius: 8px;

cursor: pointer;

transition: all 0.2s ease;

}

.pdf-radio-label:hover {

border-color: var(--primary-color);

background-color: rgba(114, 9, 183, 0.05);

}

.pdf-radio-input {

margin-right: 0.5rem;

}

.pdf-radio-input:checked + .pdf-radio-label {

border-color: var(--primary-color);

background-color: rgba(114, 9, 183, 0.1);

}

.pdf-checkbox-option {

display: flex;

align-items: center;

margin-bottom: 0.5rem;

}

.pdf-checkbox-input {

margin-right: 0.5rem;

}

.pdf-compress-button {

display: block;

width: 100%;

padding: 1rem;

border: none;

border-radius: 8px;

background-color: var(--accent-color);

color: white;

font-size: 1.1rem;

font-weight: 600;

cursor: pointer;

transition: all 0.3s ease;

margin-bottom: 1rem;

}

.pdf-compress-button:hover {

background-color: #e5177b;

transform: translateY(-2px);

box-shadow: 0 5px 15px rgba(247, 37, 133, 0.3);

}

.pdf-compress-button:disabled {

background-color: #cccccc;

cursor: not-allowed;

transform: none;

box-shadow: none;

}

.pdf-file-info {

display: none;

margin-top: 1.5rem;

padding: 1.2rem;

border-radius: 8px;

background-color: #f8f9fa;

}

.pdf-file-info-header {

display: flex;

justify-content: space-between;

align-items: center;

margin-bottom: 1rem;

}

.pdf-file-name {

font-weight: 600;

color: var(--dark-color);

font-size: 1.1rem;

word-break: break-all;

}

.pdf-file-size {

font-weight: 500;

color: var(--primary-color);

}

.pdf-pages-info {

display: flex;

align-items: center;

gap: 1rem;

margin-bottom: 0.5rem;

}

.pdf-result-section {

display: none;

margin-top: 2rem;

}

.pdf-result-header {

font-size: 1.5rem;

color: var(--dark-color);

margin-bottom: 1rem;

text-align: center;

}

.pdf-comparison-container {

display: flex;

flex-wrap: wrap;

gap: 1.5rem;

margin-bottom: 1.5rem;

}

.pdf-file-card {

flex: 1;

min-width: 250px;

border-radius: 8px;

overflow: hidden;

box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);

}

.pdf-card-header {

background-color: var(--primary-color);

color: white;

padding: 0.7rem;

text-align: center;

font-weight: 600;

}

.pdf-card-body {

padding: 1.5rem;

background-color: white;

}

.pdf-file-icon {

display: flex;

justify-content: center;

margin-bottom: 1rem;

font-size: 3rem;

color: var(--primary-color);

}

.pdf-file-details {

margin-bottom: 1rem;

}

.pdf-detail-row {

display: flex;

justify-content: space-between;

margin-bottom: 0.5rem;

}

.pdf-detail-label {

font-weight: 500;

color: #6c757d;

}

.pdf-detail-value {

font-weight: 600;

color: var(--dark-color);

}

.pdf-download-button {

display: block;

width: 100%;

padding: 0.7rem;

border: none;

border-radius: 6px;

background-color: var(--success-color);

color: white;

font-size: 1rem;

font-weight: 600;

cursor: pointer;

transition: all 0.3s ease;

text-align: center;

text-decoration: none;

}

.pdf-download-button:hover {

background-color: #3db8e0;

transform: translateY(-2px);

box-shadow: 0 5px 15px rgba(76, 201, 240, 0.3);

}

.pdf-compression-stats {

display: flex;

justify-content: center;

gap: 1rem;

margin-top: 1rem;

}

.pdf-stat-card {

flex: 1;

text-align: center;

padding: 1rem;

border-radius: 8px;

background-color: white;

box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);

}

.pdf-stat-label {

font-size: 0.9rem;

color: #6c757d;

}

.pdf-stat-value {

font-size: 1.5rem;

font-weight: 700;

color: var(--primary-color);

margin: 0.5rem 0;

}

.pdf-loading-overlay {

display: none;

position: fixed;

top: 0;

left: 0;

right: 0;

bottom: 0;

background-color: rgba(0, 0, 0, 0.6);

z-index: 999;

justify-content: center;

align-items: center;

flex-direction: column;

}

.pdf-loading-spinner {

width: 60px;

height: 60px;

border: 6px solid rgba(255, 255, 255, 0.3);

border-radius: 50%;

border-top-color: var(--accent-color);

animation: pdf-spin 1.5s ease-in-out infinite;

margin-bottom: 1rem;

}

.pdf-loading-text {

color: white;

font-size: 1.2rem;

}

@keyframes pdf-spin {

to { transform: rotate(360deg); }

}

.pdf-footer-text {

margin-top: 1.5rem;

color: white;

text-align: center;

opacity: 0.7;

}

.pdf-progress-bar-container {

width: 80%;

height: 10px;

background-color: rgba(255, 255, 255, 0.3);

border-radius: 5px;

margin-top: 1rem;

overflow: hidden;

}

.pdf-progress-bar {

height: 100%;

width: 0%;

background-color: var(--accent-color);

border-radius: 5px;

transition: width 0.3s ease;

}

.pdf-info-tooltip {

position: relative;

display: inline-block;

margin-left: 0.5rem;

cursor: help;

}

.pdf-info-icon {

display: inline-flex;

justify-content: center;

align-items: center;

width: 18px;

height: 18px;

background-color: #6c757d;

color: white;

border-radius: 50%;

font-size: 12px;

font-weight: bold;

}

.pdf-tooltip-text {

visibility: hidden;

width: 200px;

background-color: #333;

color: #fff;

text-align: center;

border-radius: 6px;

padding: 8px;

position: absolute;

z-index: 1;

bottom: 125%;

left: 50%;

transform: translateX(-50%);

opacity: 0;

transition: opacity 0.3s;

font-size: 0.8rem;

}

.pdf-info-tooltip:hover .pdf-tooltip-text {

visibility: visible;

opacity: 1;

}

@media (max-width: 768px) {

.pdf-main-container {

padding: 1.5rem;

}

.pdf-app-title {

font-size: 2.2rem;

}

.pdf-compression-stats {

flex-direction: column;

}

</style>

<p class="pdf-app-subtitle">Compress PDF files without losing quality</p>

</div>

<p class="pdf-upload-subtext">or click to browse files (Max size: 100MB)</p>

</div>

<div class="pdf-file-name" id="pdfFileName">document.pdf</div>

</div>

</svg>

<span id="pdfPageCount">Unknown pages</span>

</div>

Compression Level

<span class="pdf-tooltip-text">Higher compression reduces file size but may affect quality</span>

</div>

</div>

<label for="mediumCompression" class="pdf-radio-label">Medium</label>

</div>

</div>

<div class="pdf-option-title">Additional Options</div>

<label for="removeMetadata">Remove metadata (author, creation date, etc.)</label>

</div>

<label for="downscaleImages">Downscale images to reduce file size</label>

</div>

<label for="optimizeFonts">Optimize font embedding</label>

</div>

<button class="pdf-compress-button" id="compressButton" disabled>Compress PDF</button>

</div>

<h2 class="pdf-result-header">Compression Results</h2>

<div class="pdf-card-header">Original PDF</div>

</div>

<span class="pdf-detail-label">Pages:</span>

</div>

<div class="pdf-card-header">Compressed PDF</div>

</div>

<span class="pdf-detail-label">Pages:</span>

</div>

<span class="pdf-detail-label">Reduction:</span>

</div>

<a href="#" class="pdf-download-button" id="downloadButton">Download Compressed PDF</a>

</div>

<div class="pdf-stat-label">Original Size</div>

</div>

<div class="pdf-stat-label">Compressed Size</div>

</div>

<div class="pdf-stat-label">Space Saved</div>

</div>

<div class="pdf-stat-label">Reduction</div>

</div>

<p class="pdf-footer-text">Compress PDFs securely - All processing happens in your browser</p>

</div>

<div class="pdf-loading-text" id="pdfLoadingText">Compressing PDF...</div>

</div>

document.addEventListener('DOMContentLoaded', () => {

// DOM Elements

const pdfFileInput = document.getElementById('pdfFileInput');

const pdfDropzone = document.getElementById('pdfDropzone');

const compressButton = document.getElementById('compressButton');

const pdfFileInfo = document.getElementById('pdfFileInfo');

const pdfFileName = document.getElementById('pdfFileName');

const pdfFileSize = document.getElementById('pdfFileSize');

const pdfPageCount = document.getElementById('pdfPageCount');

const pdfResultSection = document.getElementById('pdfResultSection');

const pdfLoadingOverlay = document.getElementById('pdfLoadingOverlay');

const pdfProgressBar = document.getElementById('pdfProgressBar');

const pdfLoadingText = document.getElementById('pdfLoadingText');

const downloadButton = document.getElementById('downloadButton');

// Result elements

const originalPdfSize = document.getElementById('originalPdfSize');

const originalPdfPages = document.getElementById('originalPdfPages');

const compressedPdfSize = document.getElementById('compressedPdfSize');

const compressedPdfPages = document.getElementById('compressedPdfPages');

const compressionRate = document.getElementById('compressionRate');

const statOriginalSize = document.getElementById('statOriginalSize');

const statCompressedSize = document.getElementById('statCompressedSize');

const statSpaceSaved = document.getElementById('statSpaceSaved');

const statReductionPercent = document.getElementById('statReductionPercent');

// Compression option elements

const compressionLevelRadios = document.querySelectorAll('input[name="compressionLevel"]');

const removeMetadataCheckbox = document.getElementById('removeMetadata');

const downscaleImagesCheckbox = document.getElementById('downscaleImages');

const optimizeFontsCheckbox = document.getElementById('optimizeFonts');

// Variables

let selectedPdfFile = null;

let originalSizeBytes = 0;

let compressedSizeBytes = 0;

let compressedPdfBlob = null;

// Format bytes to human-readable size

function formatBytes(bytes, decimals = 2) {

if (bytes === 0) return '0 Bytes';

const k = 1024;

const dm = decimals < 0 ? 0 : decimals;

const sizes = ['Bytes', 'KB', 'MB', 'GB'];

const i = Math.floor(Math.log(bytes) / Math.log(k));

return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];

}

// Handle file selection

function handleFileSelect(e) {

const file = e.target.files[0] || e.dataTransfer.files[0];

if (!file) return;

// Check if file is a PDF

if (file.type !== 'application/pdf') {

alert('Please select a PDF file.');

return;

}

// Check file size (max 100MB)

if (file.size > 100 * 1024 * 1024) {

alert('File size exceeds the maximum limit of 100MB.');

return;

}

selectedPdfFile = file;

originalSizeBytes = file.size;

// Update file info

pdfFileName.textContent = file.name;

pdfFileSize.textContent = formatBytes(originalSizeBytes);

pdfPageCount.textContent = 'Analyzing...';

// Show file info section

pdfFileInfo.style.display = 'block';

// Enable compress button

compressButton.disabled = false;

// Simulate page count detection

setTimeout(() => {

const pageCount = Math.floor(Math.random() * 30) + 1; // Simulate 1-30 pages

pdfPageCount.textContent = pageCount + ' pages';

originalPdfPages.textContent = pageCount;

compressedPdfPages.textContent = pageCount;

}, 800);

}

// Handle PDF compression

function compressPdf() {

if (!selectedPdfFile) return;

// Show loading overlay

pdfLoadingOverlay.style.display = 'flex';

// Get compression options

let compressionLevel = 'low';

compressionLevelRadios.forEach(radio => {

if (radio.checked) {

compressionLevel = radio.value;

}

});

const removeMetadata = removeMetadataCheckbox.checked;

const downscaleImages = downscaleImagesCheckbox.checked;

const optimizeFonts = optimizeFontsCheckbox.checked;

// Simulate compression process with progress updates

let progress = 0;

const interval = setInterval(() => {

progress += Math.random() * 5;

if (progress > 100) progress = 100;

pdfProgressBar.style.width = progress + '%';

if (progress < 30) {

pdfLoadingText.textContent = 'Analyzing PDF structure...';

} else if (progress < 60) {

pdfLoadingText.textContent = 'Optimizing images...';

} else if (progress < 90) {

pdfLoadingText.textContent = 'Compressing content...';

} else {

pdfLoadingText.textContent = 'Finalizing compression...';

}

if (progress === 100) {

clearInterval(interval);

setTimeout(finishCompression, 500);

}

}, 200);

}

// Finish compression and show results

function finishCompression() {

// Calculate compression results based on selected options

let compressionFactor;

const selectedCompressionLevel = document.querySelector('input[name="compressionLevel"]:checked').value;

switch (selectedCompressionLevel) {

case 'low':

compressionFactor = 0.7 + Math.random() * 0.1; // 70-80% of original

break;

case 'medium':

compressionFactor = 0.5 + Math.random() * 0.1; // 50-60% of original

break;

case 'high':

compressionFactor = 0.3 + Math.random() * 0.1; // 30-40% of original

break;

default:

compressionFactor = 0.7;

}

// Additional reductions from options

if (removeMetadataCheckbox.checked) {

compressionFactor -= 0.05;

}

if (downscaleImagesCheckbox.checked) {

compressionFactor -= 0.1;

}

if (optimizeFontsCheckbox.checked) {

compressionFactor -= 0.03;

}

// Ensure factor doesn't go below 20%

compressionFactor = Math.max(compressionFactor, 0.2);

// Calculate compressed size

compressedSizeBytes = Math.round(originalSizeBytes * compressionFactor);

const savedBytes = originalSizeBytes - compressedSizeBytes;

const reductionPercent = ((savedBytes / originalSizeBytes) * 100).toFixed(1);

// Update result displays

originalPdfSize.textContent = formatBytes(originalSizeBytes);

compressedPdfSize.textContent = formatBytes(compressedSizeBytes);

compressionRate.textContent = reductionPercent + '%';

statOriginalSize.textContent = formatBytes(originalSizeBytes);

statCompressedSize.textContent = formatBytes(compressedSizeBytes);

statSpaceSaved.textContent = formatBytes(savedBytes);

statReductionPercent.textContent = reductionPercent + '%';

// Create a simulated compressed PDF file for download

// In a real app, this would be the actual compressed PDF data

compressedPdfBlob = new Blob([selectedPdfFile], { type: 'application/pdf' });

downloadButton.href = URL.createObjectURL(compressedPdfBlob);

downloadButton.download = 'compressed_' + selectedPdfFile.name;

// Show results section

pdfResultSection.style.display = 'block';

// Hide loading overlay

pdfLoadingOverlay.style.display = 'none';

// Reset progress bar for next use

pdfProgressBar.style.width = '0%';

}

// Event Listeners

pdfFileInput.addEventListener('change', handleFileSelect);

// Drag and drop events

pdfDropzone.addEventListener('dragover', (e) => {

e.preventDefault();

pdfDropzone.style.borderColor = '#f72585';

pdfDropzone.style.backgroundColor = 'rgba(247, 37, 133, 0.05)';

});

pdfDropzone.addEventListener('dragleave', (e) => {

e.preventDefault();

pdfDropzone.style.borderColor = '#7209b7';

pdfDropzone.style.backgroundColor = '';

});

pdfDropzone.addEventListener('drop', (e) => {

e.preventDefault();

pdfDropzone.style.borderColor = '#7209b7';

pdfDropzone.style.backgroundColor = '';

if (e.dataTransfer.files.length) {

pdfFileInput.files = e.dataTransfer.files;

handleFileSelect(e);

}

});

// Dropzone click opens file dialog

pdfDropzone.addEventListener('click', () => {

pdfFileInput.click();

});

// Compress button click handler

compressButton.addEventListener('click', compressPdf);

// Reset form when download is complete (optional)

downloadButton.addEventListener('click', () => {

setTimeout(() => {

// Optional: reset the form after successful download

// pdfFileInfo.style.display = 'none';

// pdfResultSection.style.display = 'none';

// compressButton.disabled = true;

// selectedPdfFile = null;

}, 1000);

});

</script>

This is a basic structure. A fully functional PDF compressor requires a backend to process file compression.

Conclusion

Using a PDF Compression Tool is essential for efficient document management. It helps in reducing file size while maintaining quality, making storage and sharing more convenient. Try using an online tool or integrate a server-based solution for better compression results.