Image Compressor Pro | WordPress Plugin<\/title>\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jszip\/3.10.1\/jszip.min.js\"><\/script>\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/FileSaver.js\/2.0.5\/FileSaver.min.js\"><\/script>\n <style>\n :root {\n --primary-color: #4a6cf7;\n --primary-light: #e8edff;\n --secondary-color: #10b981;\n --dark-color: #1e293b;\n --light-color: #17171f;\n --gray-color: #64748b;\n --border-radius: 8px;\n --box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);\n --transition: all 0.3s ease;\n }\n\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n body {\n font-family: 'Inter', sans-serif;\n line-height: 1.6;\n color: #f0f0f0;\n background-color: #15151c;\n padding: 20px;\n }\n\n .container {\n max-width: 1200px;\n margin: 0 auto;\n background: #15151c;\n border-radius: var(--border-radius);\n box-shadow: var(--box-shadow);\n overflow: hidden;\n }\n\n header {\n background: var(--dark-color);\n color: white;\n padding: 20px 30px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n }\n\n .logo {\n display: flex;\n align-items: center;\n gap: 10px;\n }\n\n .logo-icon {\n width: 32px;\n height: 32px;\n background: var(--primary-color);\n border-radius: 6px;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .logo-text {\n font-size: 1.5rem;\n font-weight: 700;\n }\n\n .tabs {\n display: flex;\n background: var(--light-color);\n border-bottom: 1px solid rgba(255,255,255,.14);\n }\n\n .tab {\n padding: 15px 25px;\n cursor: pointer;\n font-weight: 500;\n border-bottom: 3px solid transparent;\n transition: var(--transition);\n }\n\n .tab.active {\n color: var(--primary-color);\n border-bottom-color: var(--primary-color);\n }\n\n .tab:hover:not(.active) {\n background: #15151c;\n }\n\n .tab-content {\n display: none;\n padding: 30px;\n }\n\n .tab-content.active {\n display: block;\n }\n\n .upload-area {\n border: 2px dashed rgba(255,255,255,.14);\n border-radius: var(--border-radius);\n padding: 40px 20px;\n text-align: center;\n margin-bottom: 30px;\n transition: var(--transition);\n background: #15151c;\n }\n\n .upload-area.highlight {\n border-color: var(--primary-color);\n background: var(--primary-light);\n }\n\n .upload-icon {\n font-size: 48px;\n color: var(--gray-color);\n margin-bottom: 15px;\n }\n\n .upload-text {\n margin-bottom: 20px;\n color: var(--gray-color);\n }\n\n .upload-btn {\n background: var(--primary-color);\n color: white;\n border: none;\n padding: 12px 24px;\n border-radius: var(--border-radius);\n font-weight: 500;\n cursor: pointer;\n transition: var(--transition);\n display: inline-block;\n }\n\n .upload-btn:hover {\n background: #3a5ce5;\n transform: translateY(-2px);\n }\n\n .compression-controls {\n background: var(--light-color);\n padding: 20px;\n border-radius: var(--border-radius);\n margin-bottom: 30px;\n }\n\n .control-group {\n margin-bottom: 15px;\n }\n\n .control-label {\n display: flex;\n justify-content: space-between;\n margin-bottom: 8px;\n }\n\n .quality-value {\n font-weight: 600;\n color: var(--primary-color);\n }\n\n .slider {\n width: 100%;\n height: 6px;\n -webkit-appearance: none;\n background: #15151c;\n border-radius: 3px;\n outline: none;\n }\n\n .slider::-webkit-slider-thumb {\n -webkit-appearance: none;\n width: 18px;\n height: 18px;\n border-radius: 50%;\n background: var(--primary-color);\n cursor: pointer;\n }\n\n .queue-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 20px;\n }\n\n .queue-title {\n font-size: 1.2rem;\n font-weight: 600;\n }\n\n .queue-actions {\n display: flex;\n gap: 10px;\n }\n\n .action-btn {\n padding: 8px 16px;\n border-radius: var(--border-radius);\n font-weight: 500;\n cursor: pointer;\n transition: var(--transition);\n border: 1px solid rgba(255,255,255,.14);\n background: #15151c;\n }\n\n .action-btn.primary {\n background: var(--primary-color);\n color: white;\n border-color: var(--primary-color);\n }\n\n .action-btn.danger {\n background: #ef4444;\n color: white;\n border-color: #ef4444;\n }\n\n .action-btn:hover {\n transform: translateY(-2px);\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);\n }\n\n .image-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));\n gap: 20px;\n }\n\n .image-card {\n border: 1px solid rgba(255,255,255,.14);\n border-radius: var(--border-radius);\n overflow: hidden;\n background: #15151c;\n transition: var(--transition);\n }\n\n .image-card:hover {\n transform: translateY(-5px);\n box-shadow: var(--box-shadow);\n }\n\n .image-preview {\n height: 180px;\n overflow: hidden;\n display: flex;\n align-items: center;\n justify-content: center;\n background: #15151c;\n }\n\n .image-preview img {\n max-width: 100%;\n max-height: 100%;\n object-fit: contain;\n }\n\n .image-info {\n padding: 15px;\n }\n\n .image-name {\n font-weight: 600;\n margin-bottom: 10px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n .image-stats {\n display: flex;\n justify-content: space-between;\n margin-bottom: 15px;\n font-size: 0.9rem;\n }\n\n .original-size {\n color: var(--gray-color);\n }\n\n .compressed-size {\n color: var(--secondary-color);\n font-weight: 600;\n }\n\n .compression-ratio {\n color: var(--primary-color);\n font-weight: 600;\n }\n\n .image-actions {\n display: flex;\n gap: 8px;\n }\n\n .image-btn {\n flex: 1;\n padding: 8px;\n border-radius: var(--border-radius);\n font-size: 0.85rem;\n text-align: center;\n cursor: pointer;\n transition: var(--transition);\n border: 1px solid rgba(255,255,255,.14);\n background: #15151c;\n }\n\n .image-btn.primary {\n background: var(--primary-color);\n color: white;\n border-color: var(--primary-color);\n }\n\n .image-btn:hover {\n transform: translateY(-2px);\n }\n\n .exif-table {\n width: 100%;\n border-collapse: collapse;\n margin-top: 20px;\n }\n\n .exif-table th, .exif-table td {\n padding: 12px 15px;\n text-align: left;\n border-bottom: 1px solid rgba(255,255,255,.14);\n }\n\n .exif-table th {\n background: #15151c;\n font-weight: 600;\n }\n\n .progress-bar {\n height: 6px;\n background: #15151c;\n border-radius: 3px;\n margin-top: 10px;\n overflow: hidden;\n }\n\n .progress-fill {\n height: 100%;\n background: var(--secondary-color);\n width: 0%;\n transition: width 0.3s ease;\n }\n\n .empty-state {\n text-align: center;\n padding: 40px 20px;\n color: var(--gray-color);\n }\n\n .empty-icon {\n font-size: 48px;\n margin-bottom: 15px;\n opacity: 0.5;\n }\n\n .notification {\n position: fixed;\n top: 20px;\n right: 20px;\n padding: 15px 20px;\n border-radius: var(--border-radius);\n background: #15151c;\n box-shadow: var(--box-shadow);\n display: flex;\n align-items: center;\n gap: 10px;\n transform: translateX(150%);\n transition: transform 0.3s ease;\n z-index: 1000;\n }\n\n .notification.show {\n transform: translateX(0);\n }\n\n .notification.success {\n border-left: 4px solid var(--secondary-color);\n }\n\n .notification.error {\n border-left: 4px solid #ef4444;\n }\n\n .notification-icon {\n font-size: 20px;\n }\n\n .notification.success .notification-icon {\n color: var(--secondary-color);\n }\n\n .notification.error .notification-icon {\n color: #ef4444;\n }\n\n @media (max-width: 768px) {\n .tabs {\n flex-wrap: wrap;\n }\n \n .tab {\n flex: 1;\n min-width: 120px;\n text-align: center;\n }\n \n .image-grid {\n grid-template-columns: 1fr;\n }\n \n .queue-header {\n flex-direction: column;\n gap: 15px;\n align-items: flex-start;\n }\n \n .queue-actions {\n width: 100%;\n justify-content: space-between;\n }\n \n .action-btn {\n flex: 1;\n text-align: center;\n }\n }\n\n @media (max-width: 480px) {\n body {\n padding: 10px;\n }\n \n header {\n padding: 15px 20px;\n }\n \n .tab-content {\n padding: 20px 15px;\n }\n \n .upload-area {\n padding: 30px 15px;\n }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"container\">\n <header>\n <div class=\"logo\">\n <div class=\"logo-icon\">\ud83d\udcf7<\/div>\n <div class=\"logo-text\">Image Compressor Pro<\/div>\n <\/div>\n <div class=\"version\">v2.1.0<\/div>\n <\/header>\n \n <div class=\"tabs\">\n <div class=\"tab active\" data-tab=\"compressor\">Image Compressor<\/div>\n <div class=\"tab\" data-tab=\"exif\">EXIF Viewer<\/div>\n <\/div>\n \n <div class=\"tab-content active\" id=\"compressor\">\n <div class=\"upload-area\" id=\"uploadArea\">\n <div class=\"upload-icon\">\ud83d\udcc1<\/div>\n <h2 class=\"upload-text\">Drag & Drop your images here<\/h2>\n <p class=\"upload-subtext\">Supports JPEG, PNG, and WebP (Max 20 files)<\/p>\n <input type=\"file\" id=\"fileInput\" multiple accept=\".jpg,.jpeg,.png,.webp\" style=\"display: none;\">\n <button class=\"upload-btn\" id=\"uploadBtn\">Select Files<\/button>\n <\/div>\n \n <div class=\"compression-controls\">\n <div class=\"control-group\">\n <div class=\"control-label\">\n <span>Compression Quality<\/span>\n <span class=\"quality-value\" id=\"qualityValue\">80%<\/span>\n <\/div>\n <input type=\"range\" min=\"0\" max=\"100\" value=\"80\" class=\"slider\" id=\"qualitySlider\">\n <\/div>\n \n <div class=\"control-group\">\n <div class=\"control-label\">\n <span>Output Format<\/span>\n <\/div>\n <select id=\"formatSelect\" class=\"slider\" style=\"width: 100%; padding: 8px; border-radius: var(--border-radius); border: 1px solid rgba(255,255,255,.14);\">\n <option value=\"original\">Keep Original Format<\/option>\n <option value=\"jpeg\">JPEG<\/option>\n <option value=\"png\">PNG<\/option>\n <option value=\"webp\">WebP<\/option>\n <\/select>\n <\/div>\n <\/div>\n \n <div class=\"queue-section\">\n <div class=\"queue-header\">\n <h3 class=\"queue-title\">Compression Queue (<span id=\"fileCount\">0<\/span> files)<\/h3>\n <div class=\"queue-actions\">\n <button class=\"action-btn primary\" id=\"downloadAllBtn\">Download All as ZIP<\/button>\n <button class=\"action-btn danger\" id=\"clearQueueBtn\">Clear Queue<\/button>\n <\/div>\n <\/div>\n \n <div class=\"image-grid\" id=\"imageGrid\">\n <div class=\"empty-state\" id=\"emptyState\">\n <div class=\"empty-icon\">\ud83d\udcf7<\/div>\n <p>No images uploaded yet. Drag and drop or click the button above to get started.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"tab-content\" id=\"exif\">\n <div class=\"upload-area\">\n <div class=\"upload-icon\">\ud83d\udd0d<\/div>\n <h2 class=\"upload-text\">Select an image to view EXIF data<\/h2>\n <p class=\"upload-subtext\">EXIF data will be displayed for supported image formats<\/p>\n <input type=\"file\" id=\"exifFileInput\" accept=\".jpg,.jpeg,.png,.tiff\" style=\"display: none;\">\n <button class=\"upload-btn\" id=\"exifUploadBtn\">Select Image<\/button>\n <\/div>\n \n <div id=\"exifData\" style=\"display: none;\">\n <h3>EXIF Metadata<\/h3>\n <table class=\"exif-table\">\n <thead>\n <tr>\n <th>Property<\/th>\n <th>Value<\/th>\n <\/tr>\n <\/thead>\n <tbody id=\"exifTableBody\">\n \n <\/tbody>\n <\/table>\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"notification\" id=\"notification\">\n <div class=\"notification-icon\">\u2713<\/div>\n <div class=\"notification-text\">Operation completed successfully!<\/div>\n <\/div>\n\n <script>\n \/\/ DOM Elements\n const uploadArea = document.getElementById('uploadArea');\n const fileInput = document.getElementById('fileInput');\n const uploadBtn = document.getElementById('uploadBtn');\n const qualitySlider = document.getElementById('qualitySlider');\n const qualityValue = document.getElementById('qualityValue');\n const formatSelect = document.getElementById('formatSelect');\n const imageGrid = document.getElementById('imageGrid');\n const emptyState = document.getElementById('emptyState');\n const fileCount = document.getElementById('fileCount');\n const downloadAllBtn = document.getElementById('downloadAllBtn');\n const clearQueueBtn = document.getElementById('clearQueueBtn');\n const tabs = document.querySelectorAll('.tab');\n const tabContents = document.querySelectorAll('.tab-content');\n const exifFileInput = document.getElementById('exifFileInput');\n const exifUploadBtn = document.getElementById('exifUploadBtn');\n const exifData = document.getElementById('exifData');\n const exifTableBody = document.getElementById('exifTableBody');\n const notification = document.getElementById('notification');\n\n \/\/ State\n let files = [];\n let compressedFiles = [];\n let compressionQuality = 80;\n\n \/\/ Event Listeners\n uploadBtn.addEventListener('click', () => fileInput.click());\n fileInput.addEventListener('change', handleFileSelect);\n qualitySlider.addEventListener('input', updateQuality);\n downloadAllBtn.addEventListener('click', downloadAllAsZip);\n clearQueueBtn.addEventListener('click', clearQueue);\n exifUploadBtn.addEventListener('click', () => exifFileInput.click());\n exifFileInput.addEventListener('change', handleExifFileSelect);\n formatSelect.addEventListener('change', handleFormatChange);\n\n \/\/ Drag and Drop\n ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {\n uploadArea.addEventListener(eventName, preventDefaults, false);\n });\n\n function preventDefaults(e) {\n e.preventDefault();\n e.stopPropagation();\n }\n\n ['dragenter', 'dragover'].forEach(eventName => {\n uploadArea.addEventListener(eventName, highlight, false);\n });\n\n ['dragleave', 'drop'].forEach(eventName => {\n uploadArea.addEventListener(eventName, unhighlight, false);\n });\n\n function highlight() {\n uploadArea.classList.add('highlight');\n }\n\n function unhighlight() {\n uploadArea.classList.remove('highlight');\n }\n\n uploadArea.addEventListener('drop', handleDrop, false);\n\n function handleDrop(e) {\n const dt = e.dataTransfer;\n const droppedFiles = dt.files;\n handleFiles(droppedFiles);\n }\n\n \/\/ Tab switching\n tabs.forEach(tab => {\n tab.addEventListener('click', () => {\n const tabId = tab.getAttribute('data-tab');\n \n tabs.forEach(t => t.classList.remove('active'));\n tabContents.forEach(tc => tc.classList.remove('active'));\n \n tab.classList.add('active');\n document.getElementById(tabId).classList.add('active');\n });\n });\n\n \/\/ Functions\n function handleFileSelect(e) {\n const selectedFiles = e.target.files;\n handleFiles(selectedFiles);\n }\n\n function handleFiles(selectedFiles) {\n if (files.length + selectedFiles.length > 20) {\n showNotification('Maximum 20 files allowed. Please remove some files before adding more.', 'error');\n return;\n }\n\n for (let i = 0; i < selectedFiles.length; i++) {\n const file = selectedFiles[i];\n if (isValidFileType(file)) {\n files.push(file);\n processFile(file);\n } else {\n showNotification(`File \"${file.name}\" is not a supported format.`, 'error');\n }\n }\n\n updateFileCount();\n fileInput.value = ''; \/\/ Reset input to allow selecting same files again\n }\n\n function isValidFileType(file) {\n const validTypes = ['image\/jpeg', 'image\/png', 'image\/webp'];\n return validTypes.includes(file.type);\n }\n\n function processFile(file) {\n \/\/ Hide empty state\n emptyState.style.display = 'none';\n \n \/\/ Create image card\n const card = document.createElement('div');\n card.className = 'image-card';\n card.id = `card-${file.name.replace(\/\\s\/g, '-')}`;\n \n \/\/ Create preview\n const preview = document.createElement('div');\n preview.className = 'image-preview';\n \n const img = document.createElement('img');\n img.src = URL.createObjectURL(file);\n preview.appendChild(img);\n \n \/\/ Create file info\n const info = document.createElement('div');\n info.className = 'image-info';\n \n const name = document.createElement('div');\n name.className = 'image-name';\n name.textContent = file.name;\n \n const stats = document.createElement('div');\n stats.className = 'image-stats';\n \n const originalSize = document.createElement('div');\n originalSize.className = 'original-size';\n originalSize.textContent = `Original: ${formatFileSize(file.size)}`;\n \n const compressedSize = document.createElement('div');\n compressedSize.className = 'compressed-size';\n compressedSize.textContent = 'Compressed: --';\n compressedSize.id = `compressed-${file.name.replace(\/\\s\/g, '-')}`;\n \n const ratio = document.createElement('div');\n ratio.className = 'compression-ratio';\n ratio.textContent = '--% smaller';\n ratio.id = `ratio-${file.name.replace(\/\\s\/g, '-')}`;\n \n stats.appendChild(originalSize);\n stats.appendChild(compressedSize);\n stats.appendChild(ratio);\n \n \/\/ Create actions\n const actions = document.createElement('div');\n actions.className = 'image-actions';\n \n const downloadBtn = document.createElement('button');\n downloadBtn.className = 'image-btn primary';\n downloadBtn.textContent = 'Download';\n downloadBtn.addEventListener('click', () => downloadFile(file));\n \n const removeBtn = document.createElement('button');\n removeBtn.className = 'image-btn';\n removeBtn.textContent = 'Remove';\n removeBtn.addEventListener('click', () => removeFile(file, card));\n \n actions.appendChild(downloadBtn);\n actions.appendChild(removeBtn);\n \n \/\/ Add progress bar\n const progressBar = document.createElement('div');\n progressBar.className = 'progress-bar';\n const progressFill = document.createElement('div');\n progressFill.className = 'progress-fill';\n progressFill.id = `progress-${file.name.replace(\/\\s\/g, '-')}`;\n progressBar.appendChild(progressFill);\n \n \/\/ Assemble card\n info.appendChild(name);\n info.appendChild(stats);\n info.appendChild(progressBar);\n info.appendChild(actions);\n \n card.appendChild(preview);\n card.appendChild(info);\n \n imageGrid.appendChild(card);\n \n \/\/ Compress the file\n compressFile(file, compressionQuality);\n }\n\n function compressFile(file, quality) {\n const progressFill = document.getElementById(`progress-${file.name.replace(\/\\s\/g, '-')}`);\n \n \/\/ For images, use Canvas API for compression\n const reader = new FileReader();\n \n reader.onload = function(e) {\n const img = new Image();\n img.src = e.target.result;\n \n img.onload = function() {\n const canvas = document.createElement('canvas');\n const ctx = canvas.getContext('2d');\n \n \/\/ Calculate new dimensions if needed (maintain aspect ratio)\n let width = img.width;\n let height = img.height;\n const maxDimension = 2000; \/\/ Max width\/height\n \n if (width > maxDimension || height > maxDimension) {\n if (width > height) {\n height = Math.round((height * maxDimension) \/ width);\n width = maxDimension;\n } else {\n width = Math.round((width * maxDimension) \/ height);\n height = maxDimension;\n }\n }\n \n canvas.width = width;\n canvas.height = height;\n \n \/\/ Draw image on canvas\n ctx.drawImage(img, 0, 0, width, height);\n \n \/\/ Get the output format\n let outputFormat = 'image\/jpeg';\n if (formatSelect.value === 'png') {\n outputFormat = 'image\/png';\n } else if (formatSelect.value === 'webp') {\n outputFormat = 'image\/webp';\n } else if (formatSelect.value === 'original') {\n \/\/ Keep the original format\n outputFormat = file.type;\n }\n \n \/\/ Convert to blob with quality setting\n canvas.toBlob((blob) => {\n progressFill.style.width = '100%';\n updateFileStats(file, blob.size);\n \n \/\/ Determine file extension based on output format\n let fileExtension = '.jpg';\n if (outputFormat === 'image\/png') fileExtension = '.png';\n if (outputFormat === 'image\/webp') fileExtension = '.webp';\n \n \/\/ Get original filename without extension\n const originalName = file.name.substring(0, file.name.lastIndexOf('.'));\n \n compressedFiles.push({\n original: file,\n compressed: blob,\n name: originalName + fileExtension\n });\n }, outputFormat, quality \/ 100);\n };\n };\n \n reader.readAsDataURL(file);\n \n \/\/ Simulate progress (in a real implementation, this would be based on actual compression progress)\n let progress = 0;\n const progressInterval = setInterval(() => {\n progress += 5;\n progressFill.style.width = `${progress}%`;\n \n if (progress >= 90) {\n clearInterval(progressInterval);\n }\n }, 100);\n }\n\n function updateFileStats(file, compressedSize) {\n const compressedElement = document.getElementById(`compressed-${file.name.replace(\/\\s\/g, '-')}`);\n const ratioElement = document.getElementById(`ratio-${file.name.replace(\/\\s\/g, '-')}`);\n \n compressedElement.textContent = `Compressed: ${formatFileSize(compressedSize)}`;\n \n const ratio = ((file.size - compressedSize) \/ file.size * 100).toFixed(1);\n ratioElement.textContent = `${ratio}% smaller`;\n \n if (parseFloat(ratio) > 0) {\n ratioElement.style.color = 'var(--secondary-color)';\n } else {\n ratioElement.style.color = '#ef4444';\n }\n }\n\n function updateQuality() {\n compressionQuality = qualitySlider.value;\n qualityValue.textContent = `${compressionQuality}%`;\n \n \/\/ Recompress all files with new quality setting\n if (files.length > 0) {\n compressedFiles = [];\n files.forEach(file => {\n const progressFill = document.getElementById(`progress-${file.name.replace(\/\\s\/g, '-')}`);\n progressFill.style.width = '0%';\n compressFile(file, compressionQuality);\n });\n }\n }\n\n function handleFormatChange() {\n \/\/ Recompress all files with new format setting\n if (files.length > 0) {\n compressedFiles = [];\n files.forEach(file => {\n const progressFill = document.getElementById(`progress-${file.name.replace(\/\\s\/g, '-')}`);\n progressFill.style.width = '0%';\n compressFile(file, compressionQuality);\n });\n }\n }\n\n function downloadFile(file) {\n const compressedFile = compressedFiles.find(f => f.original === file);\n \n if (compressedFile) {\n const url = URL.createObjectURL(compressedFile.compressed);\n const a = document.createElement('a');\n a.href = url;\n a.download = compressedFile.name;\n document.body.appendChild(a);\n a.click();\n document.body.removeChild(a);\n URL.revokeObjectURL(url);\n \n showNotification(`Downloaded ${compressedFile.name} successfully!`);\n } else {\n showNotification(`File ${file.name} is not ready yet. Please wait.`, 'error');\n }\n }\n\n function downloadAllAsZip() {\n if (compressedFiles.length === 0) {\n showNotification('No files to download.', 'error');\n return;\n }\n \n const zip = new JSZip();\n let addedFiles = 0;\n \n compressedFiles.forEach(fileObj => {\n zip.file(fileObj.name, fileObj.compressed);\n addedFiles++;\n });\n \n zip.generateAsync({ type: 'blob' })\n .then(blob => {\n saveAs(blob, 'compressed_images.zip');\n showNotification(`Downloaded ${addedFiles} files as ZIP successfully!`);\n })\n .catch(err => {\n console.error('Error creating ZIP:', err);\n showNotification('Error creating ZIP file.', 'error');\n });\n }\n\n function removeFile(file, card) {\n files = files.filter(f => f !== file);\n compressedFiles = compressedFiles.filter(f => f.original !== file);\n card.remove();\n \n if (files.length === 0) {\n emptyState.style.display = 'block';\n }\n \n updateFileCount();\n }\n\n function clearQueue() {\n if (files.length === 0) {\n showNotification('Queue is already empty.', 'error');\n return;\n }\n \n files = [];\n compressedFiles = [];\n imageGrid.innerHTML = '';\n emptyState.style.display = 'block';\n updateFileCount();\n \n showNotification('Queue cleared successfully.');\n }\n\n function updateFileCount() {\n fileCount.textContent = files.length;\n }\n\n function formatFileSize(bytes) {\n if (bytes === 0) return '0 Bytes';\n \n const k = 1024;\n const sizes = ['Bytes', 'KB', 'MB', 'GB'];\n const i = Math.floor(Math.log(bytes) \/ Math.log(k));\n \n return parseFloat((bytes \/ Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];\n }\n\n function showNotification(message, type = 'success') {\n const notificationText = notification.querySelector('.notification-text');\n notificationText.textContent = message;\n \n notification.className = 'notification';\n notification.classList.add(type);\n \n notification.classList.add('show');\n \n setTimeout(() => {\n notification.classList.remove('show');\n }, 3000);\n }\n\n \/\/ EXIF Viewer functionality\n function handleExifFileSelect(e) {\n const file = e.target.files[0];\n \n if (!file) return;\n \n if (!file.type.match(\/image\\\/(jpeg|png|tiff)\/)) {\n showNotification('Please select a JPEG, PNG, or TIFF image for EXIF data.', 'error');\n return;\n }\n \n \/\/ In a real implementation, you would use a library like exif-js to read EXIF data\n \/\/ For this demo, we'll simulate EXIF data\n \n const simulatedExifData = {\n 'Make': 'Canon',\n 'Model': 'EOS 5D Mark IV',\n 'Software': 'Adobe Photoshop CC 2021',\n 'DateTime': '2023:05:15 14:30:22',\n 'ExposureTime': '1\/250',\n 'FNumber': 'f\/5.6',\n 'ISOSpeedRatings': '200',\n 'FocalLength': '50 mm',\n 'LensModel': 'EF50mm f\/1.8 STM',\n 'ImageWidth': '6720',\n 'ImageHeight': '4480',\n 'GPSLatitude': '40.7128\u00b0 N',\n 'GPSLongitude': '74.0060\u00b0 W'\n };\n \n displayExifData(simulatedExifData);\n exifFileInput.value = ''; \/\/ Reset input\n }\n\n function displayExifData(data) {\n exifTableBody.innerHTML = '';\n \n for (const [key, value] of Object.entries(data)) {\n const row = document.createElement('tr');\n \n const keyCell = document.createElement('td');\n keyCell.textContent = key;\n \n const valueCell = document.createElement('td');\n valueCell.textContent = value;\n \n row.appendChild(keyCell);\n row.appendChild(valueCell);\n exifTableBody.appendChild(row);\n }\n \n exifData.style.display = 'block';\n }\n <\/script>\n<\/body>\n<\/html><\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n\n<div class=\"wp-block-kadence-column kadence-column3028_bdd3d6-08\"><div class=\"kt-inside-inner-col\">\n\n<div class=\"wp-block-kadence-column kadence-column3028_fa1306-c8\"><div class=\"kt-inside-inner-col\"><\/div><\/div>\n\n\n\n<div class=\"wp-block-kadence-column kadence-column3028_9922a7-9a\"><div class=\"kt-inside-inner-col\">\n<h2 class=\"wp-block-heading\"><strong>\ud83d\udcc9 Compress JPG File Online \u2013 Free, Fast, and Reliable<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Alright, let\u2019s get honest. Pictures are basically running the internet. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For Shopify, you need compress jpg file any time.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">It doesn’t matter if you’re working with a small business, writing a blog, or just sharing your pet’s picture with family\u2013 everything boils down to photos. And compress JPEG file? Well, they’re absolutely ubiquitous.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">But here’s the thing: those files can be absurdly massive. I recall trying to upload a vacation snap that was 12 MB. Twelve! It felt like my Wi-Fi aged ten years just watching it load.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Large images slow websites down, eat up your phone storage, and sharing them makes you feel like you’re back in the dial-up days. So yes, making them smaller is definitely the way to go.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>\ud83d\udd0e What Does \u201cCompress JPG file\u201d Even Mean?<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Imagine needing more room in your suitcase for a trip while having packed everything! It feels like suddenly realizing compression technology for JPG files is similar\u2013 reducing the file size without negative impacts on image quality.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1200\" height=\"630\" src=\"https:\/\/yamuparkoti.com\/wp-content\/uploads\/2026\/06\/dark-banner-comp-1781272398734.png\" alt=\"Compress JPG File \u2014 yamuparkoti.com\" class=\"wp-image-3448\" srcset=\"https:\/\/yamuparkoti.com\/wp-content\/uploads\/2026\/06\/dark-banner-comp-1781272398734.png 1200w, https:\/\/yamuparkoti.com\/wp-content\/uploads\/2026\/06\/dark-banner-comp-1781272398734-300x158.png 300w, https:\/\/yamuparkoti.com\/wp-content\/uploads\/2026\/06\/dark-banner-comp-1781272398734-1024x538.png 1024w, https:\/\/yamuparkoti.com\/wp-content\/uploads\/2026\/06\/dark-banner-comp-1781272398734-768x403.png 768w, https:\/\/yamuparkoti.com\/wp-content\/uploads\/2026\/06\/dark-banner-comp-1781272398734-18x9.png 18w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">In fact sometimes photos that must be 5 MB can be shrunk down to just 500 KB\u2013 a big difference! Uploading is faster; pages load more quickly. It eliminates that feeling of waiting for the internet \u201cto crawl out of bed.”<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">We can divide methods into two broad types:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">1. Lossy: This takes care of tiniest details\u2014 would it be accurate to say most human eyes don\u2019t see them?<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">2. Lossless: Definitely keeps every single detail intact but still manages some saving on space too!<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Which one is the best? That changes for each case, you know! For me personally with images going online, I almost always go with lossy compression jpg file\u2013 because honestly, I can’t spot any difference.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>\ud83d\ude80 Why Bother Compressing JPGs?<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Still not sold? Here\u2019s why it matters:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u26a1 Your site loads faster. Google likes that. So do visitors.<\/li>\n\n\n\n<li>\ud83d\udcbe You save space. (My laptop thanks me every time.)<\/li>\n\n\n\n<li>\ud83d\udce4 Sharing is quicker. Emails don\u2019t bounce back with \u201cfile too big.\u201d<\/li>\n\n\n\n<li>\ud83d\ude00 People don\u2019t click away while waiting.<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>\ud83d\udee0 How Do You Actually Do It?<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">It\u2019s not rocket science. Three steps and you\u2019re done:<\/p>\n\n\n\n<ol start=\"1\" class=\"wp-block-list\">\n<li>\ud83d\udcc2 Upload your JPG. Drag, drop, or click.<\/li>\n\n\n\n<li>\ud83c\udf9a Pick how much you want to shrink it.<\/li>\n\n\n\n<li>\u2b07 Hit download. Boom. Done.<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">No sign-ups. No sneaky watermarks. No \u201cplease upgrade\u201d pop-ups.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>\ud83c\udf1f Why This Tool Isn\u2019t Like the Others<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">I\u2019ve tried some of those shady online compressors. Ads everywhere. Files get sent to who-knows-where. Hard pass.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This one?<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u2705 Free. No \u201csurprise\u201d paywalls. Just compress jpg file.<\/li>\n\n\n\n<li>\ud83d\udd12 Private. Files never leave your browser.<\/li>\n\n\n\n<li>\u26a1 Fast. Upload a whole batch (yep, up to 20).<\/li>\n\n\n\n<li>\ud83c\udfa8 Flexible. Save as JPG, PNG, or even WebP if you\u2019re fancy.<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>\ud83d\udcf8 When Compression Saves the Day<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">You would understand its importance because:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Occasionally uploading product pictures for a store\u2013 like when Shopify rejected me for a massive file!<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Sharing detailed photographs on Instagram.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Are there really folks at work saying \u201cThis is far too big to email\u201d?<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Hoping to boost my website\u2019s loading time, thereby encouraging Google to place me on page 1 rather than page 7!<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Trying to free up space on my vintage iPhone which keeps shouting \u201cStorage full!\u201d<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>\ud83d\udcc8 The SEO Perk Nobody Talks About<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Here\u2019s the thing: slow sites tank your Google rank. Nobody waits around for a page to load. By compressing JPGs, you:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u2705 Improve Core Web Vitals (don\u2019t worry, just \u201csite speed stuff\u201d).<\/li>\n\n\n\n<li>\ud83d\udcca Get better rankings.<\/li>\n\n\n\n<li>\u23f3 Keep people on your site longer.<\/li>\n\n\n\n<li>\ud83d\udcb0 Maybe even make more sales because folks don\u2019t give up.<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>\ud83d\udd12 But Is It Safe?<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">And that was a concern of mine as well.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Several tools automatically transfer your pictures to their servers\u2013 which is awkward if you want to reduce the file sizes of personal images.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This tool is different; nothing gets sent anywhere. It all happens within your web browser.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">No account is needed, there is no data-gathering, and no \u2018cloud\u2019 storage of your files; just fast, efficient processing.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>\ud83d\udca1 Pro Tips I\u2019ve Picked Up<\/strong><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\ud83c\udf9a 80% quality usually looks perfect to me.<\/li>\n\n\n\n<li>\ud83c\udf0d If it\u2019s for the web, WebP files are even smaller.<\/li>\n\n\n\n<li>\ud83d\uddc2 Always keep the original somewhere safe. Trust me, I\u2019ve learned the hard way.<\/li>\n\n\n\n<li>\ud83d\udda5 Shrink before uploading to WordPress or <a href=\"https:\/\/yamuparkoti.com\/\" data-type=\"link\" data-id=\"https:\/\/yamuparkoti.com\/\">Shopify<\/a>\u2014saves headaches later.<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>\ud83d\udc49 Ready to Try?<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Really, don’t analyze it too much. Just upload an image there automatically compress jpg file to see what occurs!<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">At worst, you free up some room\u2013 at best, your website visitors experience it loading at super speeds.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>\u2753 Quick FAQs<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Does compression hurt quality?<\/strong><br>A little, but usually you won\u2019t notice.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Can I compress a bunch of files at once?<\/strong><br>Yep\u2014up to 20 in one go.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Is it safe?<\/strong><br>Safe as it gets. Files stay in your browser.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>JPG or WebP?<\/strong><br>JPG works everywhere. WebP\u2019s smaller but not every site loves it.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Will it help SEO?<\/strong><br>Yes. Faster pages = happier Google.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>\ud83c\udfc1 Final Thoughts<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">And giant images are a problem\u2013 they don’t just slow your site down but take up loads of space. We have all been caught out by them; it’s just one too many times.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">With compression, you:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u26a1 Make your website faster<\/li>\n\n\n\n<li>\ud83d\udcbe Save space<\/li>\n\n\n\n<li>\ud83d\udcf2 Share photos without swearing at your inbox<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">So yeah\u2014give it a go. Shrink those JPGs and thank yourself later.<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-kadence-column kadence-column3028_97f692-5a\"><div class=\"kt-inside-inner-col\"><\/div><\/div>\n\n<\/div><\/div>\n\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":3448,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"_kadence_starter_templates_imported_post":false,"footnotes":""},"class_list":["post-3028","page","type-page","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/yamuparkoti.com\/fr\/wp-json\/wp\/v2\/pages\/3028","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/yamuparkoti.com\/fr\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/yamuparkoti.com\/fr\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/yamuparkoti.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/yamuparkoti.com\/fr\/wp-json\/wp\/v2\/comments?post=3028"}],"version-history":[{"count":2,"href":"https:\/\/yamuparkoti.com\/fr\/wp-json\/wp\/v2\/pages\/3028\/revisions"}],"predecessor-version":[{"id":5345,"href":"https:\/\/yamuparkoti.com\/fr\/wp-json\/wp\/v2\/pages\/3028\/revisions\/5345"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/yamuparkoti.com\/fr\/wp-json\/wp\/v2\/media\/3448"}],"wp:attachment":[{"href":"https:\/\/yamuparkoti.com\/fr\/wp-json\/wp\/v2\/media?parent=3028"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\n\n\n \n \n Image Compressor Pro | WordPress Plugin<\/title>\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jszip\/3.10.1\/jszip.min.js\"><\/script>\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/FileSaver.js\/2.0.5\/FileSaver.min.js\"><\/script>\n <style>\n :root {\n --primary-color: #4a6cf7;\n --primary-light: #e8edff;\n --secondary-color: #10b981;\n --dark-color: #1e293b;\n --light-color: #17171f;\n --gray-color: #64748b;\n --border-radius: 8px;\n --box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);\n --transition: all 0.3s ease;\n }\n\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n body {\n font-family: 'Inter', sans-serif;\n line-height: 1.6;\n color: #f0f0f0;\n background-color: #15151c;\n padding: 20px;\n }\n\n .container {\n max-width: 1200px;\n margin: 0 auto;\n background: #15151c;\n border-radius: var(--border-radius);\n box-shadow: var(--box-shadow);\n overflow: hidden;\n }\n\n header {\n background: var(--dark-color);\n color: white;\n padding: 20px 30px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n }\n\n .logo {\n display: flex;\n align-items: center;\n gap: 10px;\n }\n\n .logo-icon {\n width: 32px;\n height: 32px;\n background: var(--primary-color);\n border-radius: 6px;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .logo-text {\n font-size: 1.5rem;\n font-weight: 700;\n }\n\n .tabs {\n display: flex;\n background: var(--light-color);\n border-bottom: 1px solid rgba(255,255,255,.14);\n }\n\n .tab {\n padding: 15px 25px;\n cursor: pointer;\n font-weight: 500;\n border-bottom: 3px solid transparent;\n transition: var(--transition);\n }\n\n .tab.active {\n color: var(--primary-color);\n border-bottom-color: var(--primary-color);\n }\n\n .tab:hover:not(.active) {\n background: #15151c;\n }\n\n .tab-content {\n display: none;\n padding: 30px;\n }\n\n .tab-content.active {\n display: block;\n }\n\n .upload-area {\n border: 2px dashed rgba(255,255,255,.14);\n border-radius: var(--border-radius);\n padding: 40px 20px;\n text-align: center;\n margin-bottom: 30px;\n transition: var(--transition);\n background: #15151c;\n }\n\n .upload-area.highlight {\n border-color: var(--primary-color);\n background: var(--primary-light);\n }\n\n .upload-icon {\n font-size: 48px;\n color: var(--gray-color);\n margin-bottom: 15px;\n }\n\n .upload-text {\n margin-bottom: 20px;\n color: var(--gray-color);\n }\n\n .upload-btn {\n background: var(--primary-color);\n color: white;\n border: none;\n padding: 12px 24px;\n border-radius: var(--border-radius);\n font-weight: 500;\n cursor: pointer;\n transition: var(--transition);\n display: inline-block;\n }\n\n .upload-btn:hover {\n background: #3a5ce5;\n transform: translateY(-2px);\n }\n\n .compression-controls {\n background: var(--light-color);\n padding: 20px;\n border-radius: var(--border-radius);\n margin-bottom: 30px;\n }\n\n .control-group {\n margin-bottom: 15px;\n }\n\n .control-label {\n display: flex;\n justify-content: space-between;\n margin-bottom: 8px;\n }\n\n .quality-value {\n font-weight: 600;\n color: var(--primary-color);\n }\n\n .slider {\n width: 100%;\n height: 6px;\n -webkit-appearance: none;\n background: #15151c;\n border-radius: 3px;\n outline: none;\n }\n\n .slider::-webkit-slider-thumb {\n -webkit-appearance: none;\n width: 18px;\n height: 18px;\n border-radius: 50%;\n background: var(--primary-color);\n cursor: pointer;\n }\n\n .queue-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 20px;\n }\n\n .queue-title {\n font-size: 1.2rem;\n font-weight: 600;\n }\n\n .queue-actions {\n display: flex;\n gap: 10px;\n }\n\n .action-btn {\n padding: 8px 16px;\n border-radius: var(--border-radius);\n font-weight: 500;\n cursor: pointer;\n transition: var(--transition);\n border: 1px solid rgba(255,255,255,.14);\n background: #15151c;\n }\n\n .action-btn.primary {\n background: var(--primary-color);\n color: white;\n border-color: var(--primary-color);\n }\n\n .action-btn.danger {\n background: #ef4444;\n color: white;\n border-color: #ef4444;\n }\n\n .action-btn:hover {\n transform: translateY(-2px);\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);\n }\n\n .image-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));\n gap: 20px;\n }\n\n .image-card {\n border: 1px solid rgba(255,255,255,.14);\n border-radius: var(--border-radius);\n overflow: hidden;\n background: #15151c;\n transition: var(--transition);\n }\n\n .image-card:hover {\n transform: translateY(-5px);\n box-shadow: var(--box-shadow);\n }\n\n .image-preview {\n height: 180px;\n overflow: hidden;\n display: flex;\n align-items: center;\n justify-content: center;\n background: #15151c;\n }\n\n .image-preview img {\n max-width: 100%;\n max-height: 100%;\n object-fit: contain;\n }\n\n .image-info {\n padding: 15px;\n }\n\n .image-name {\n font-weight: 600;\n margin-bottom: 10px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n .image-stats {\n display: flex;\n justify-content: space-between;\n margin-bottom: 15px;\n font-size: 0.9rem;\n }\n\n .original-size {\n color: var(--gray-color);\n }\n\n .compressed-size {\n color: var(--secondary-color);\n font-weight: 600;\n }\n\n .compression-ratio {\n color: var(--primary-color);\n font-weight: 600;\n }\n\n .image-actions {\n display: flex;\n gap: 8px;\n }\n\n .image-btn {\n flex: 1;\n padding: 8px;\n border-radius: var(--border-radius);\n font-size: 0.85rem;\n text-align: center;\n cursor: pointer;\n transition: var(--transition);\n border: 1px solid rgba(255,255,255,.14);\n background: #15151c;\n }\n\n .image-btn.primary {\n background: var(--primary-color);\n color: white;\n border-color: var(--primary-color);\n }\n\n .image-btn:hover {\n transform: translateY(-2px);\n }\n\n .exif-table {\n width: 100%;\n border-collapse: collapse;\n margin-top: 20px;\n }\n\n .exif-table th, .exif-table td {\n padding: 12px 15px;\n text-align: left;\n border-bottom: 1px solid rgba(255,255,255,.14);\n }\n\n .exif-table th {\n background: #15151c;\n font-weight: 600;\n }\n\n .progress-bar {\n height: 6px;\n background: #15151c;\n border-radius: 3px;\n margin-top: 10px;\n overflow: hidden;\n }\n\n .progress-fill {\n height: 100%;\n background: var(--secondary-color);\n width: 0%;\n transition: width 0.3s ease;\n }\n\n .empty-state {\n text-align: center;\n padding: 40px 20px;\n color: var(--gray-color);\n }\n\n .empty-icon {\n font-size: 48px;\n margin-bottom: 15px;\n opacity: 0.5;\n }\n\n .notification {\n position: fixed;\n top: 20px;\n right: 20px;\n padding: 15px 20px;\n border-radius: var(--border-radius);\n background: #15151c;\n box-shadow: var(--box-shadow);\n display: flex;\n align-items: center;\n gap: 10px;\n transform: translateX(150%);\n transition: transform 0.3s ease;\n z-index: 1000;\n }\n\n .notification.show {\n transform: translateX(0);\n }\n\n .notification.success {\n border-left: 4px solid var(--secondary-color);\n }\n\n .notification.error {\n border-left: 4px solid #ef4444;\n }\n\n .notification-icon {\n font-size: 20px;\n }\n\n .notification.success .notification-icon {\n color: var(--secondary-color);\n }\n\n .notification.error .notification-icon {\n color: #ef4444;\n }\n\n @media (max-width: 768px) {\n .tabs {\n flex-wrap: wrap;\n }\n \n .tab {\n flex: 1;\n min-width: 120px;\n text-align: center;\n }\n \n .image-grid {\n grid-template-columns: 1fr;\n }\n \n .queue-header {\n flex-direction: column;\n gap: 15px;\n align-items: flex-start;\n }\n \n .queue-actions {\n width: 100%;\n justify-content: space-between;\n }\n \n .action-btn {\n flex: 1;\n text-align: center;\n }\n }\n\n @media (max-width: 480px) {\n body {\n padding: 10px;\n }\n \n header {\n padding: 15px 20px;\n }\n \n .tab-content {\n padding: 20px 15px;\n }\n \n .upload-area {\n padding: 30px 15px;\n }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"container\">\n <header>\n <div class=\"logo\">\n <div class=\"logo-icon\">\ud83d\udcf7<\/div>\n <div class=\"logo-text\">Image Compressor Pro<\/div>\n <\/div>\n <div class=\"version\">v2.1.0<\/div>\n <\/header>\n \n <div class=\"tabs\">\n <div class=\"tab active\" data-tab=\"compressor\">Image Compressor<\/div>\n <div class=\"tab\" data-tab=\"exif\">EXIF Viewer<\/div>\n <\/div>\n \n <div class=\"tab-content active\" id=\"compressor\">\n <div class=\"upload-area\" id=\"uploadArea\">\n <div class=\"upload-icon\">\ud83d\udcc1<\/div>\n <h2 class=\"upload-text\">Drag & Drop your images here<\/h2>\n <p class=\"upload-subtext\">Supports JPEG, PNG, and WebP (Max 20 files)<\/p>\n <input type=\"file\" id=\"fileInput\" multiple accept=\".jpg,.jpeg,.png,.webp\" style=\"display: none;\">\n <button class=\"upload-btn\" id=\"uploadBtn\">Select Files<\/button>\n <\/div>\n \n <div class=\"compression-controls\">\n <div class=\"control-group\">\n <div class=\"control-label\">\n <span>Compression Quality<\/span>\n <span class=\"quality-value\" id=\"qualityValue\">80%<\/span>\n <\/div>\n <input type=\"range\" min=\"0\" max=\"100\" value=\"80\" class=\"slider\" id=\"qualitySlider\">\n <\/div>\n \n <div class=\"control-group\">\n <div class=\"control-label\">\n <span>Output Format<\/span>\n <\/div>\n <select id=\"formatSelect\" class=\"slider\" style=\"width: 100%; padding: 8px; border-radius: var(--border-radius); border: 1px solid rgba(255,255,255,.14);\">\n <option value=\"original\">Keep Original Format<\/option>\n <option value=\"jpeg\">JPEG<\/option>\n <option value=\"png\">PNG<\/option>\n <option value=\"webp\">WebP<\/option>\n <\/select>\n <\/div>\n <\/div>\n \n <div class=\"queue-section\">\n <div class=\"queue-header\">\n <h3 class=\"queue-title\">Compression Queue (<span id=\"fileCount\">0<\/span> files)<\/h3>\n <div class=\"queue-actions\">\n <button class=\"action-btn primary\" id=\"downloadAllBtn\">Download All as ZIP<\/button>\n <button class=\"action-btn danger\" id=\"clearQueueBtn\">Clear Queue<\/button>\n <\/div>\n <\/div>\n \n <div class=\"image-grid\" id=\"imageGrid\">\n <div class=\"empty-state\" id=\"emptyState\">\n <div class=\"empty-icon\">\ud83d\udcf7<\/div>\n <p>No images uploaded yet. Drag and drop or click the button above to get started.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"tab-content\" id=\"exif\">\n <div class=\"upload-area\">\n <div class=\"upload-icon\">\ud83d\udd0d<\/div>\n <h2 class=\"upload-text\">Select an image to view EXIF data<\/h2>\n <p class=\"upload-subtext\">EXIF data will be displayed for supported image formats<\/p>\n <input type=\"file\" id=\"exifFileInput\" accept=\".jpg,.jpeg,.png,.tiff\" style=\"display: none;\">\n <button class=\"upload-btn\" id=\"exifUploadBtn\">Select Image<\/button>\n <\/div>\n \n <div id=\"exifData\" style=\"display: none;\">\n <h3>EXIF Metadata<\/h3>\n <table class=\"exif-table\">\n <thead>\n <tr>\n <th>Property<\/th>\n <th>Value<\/th>\n <\/tr>\n <\/thead>\n <tbody id=\"exifTableBody\">\n \n <\/tbody>\n <\/table>\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"notification\" id=\"notification\">\n <div class=\"notification-icon\">\u2713<\/div>\n <div class=\"notification-text\">Operation completed successfully!<\/div>\n <\/div>\n\n <script>\n \/\/ DOM Elements\n const uploadArea = document.getElementById('uploadArea');\n const fileInput = document.getElementById('fileInput');\n const uploadBtn = document.getElementById('uploadBtn');\n const qualitySlider = document.getElementById('qualitySlider');\n const qualityValue = document.getElementById('qualityValue');\n const formatSelect = document.getElementById('formatSelect');\n const imageGrid = document.getElementById('imageGrid');\n const emptyState = document.getElementById('emptyState');\n const fileCount = document.getElementById('fileCount');\n const downloadAllBtn = document.getElementById('downloadAllBtn');\n const clearQueueBtn = document.getElementById('clearQueueBtn');\n const tabs = document.querySelectorAll('.tab');\n const tabContents = document.querySelectorAll('.tab-content');\n const exifFileInput = document.getElementById('exifFileInput');\n const exifUploadBtn = document.getElementById('exifUploadBtn');\n const exifData = document.getElementById('exifData');\n const exifTableBody = document.getElementById('exifTableBody');\n const notification = document.getElementById('notification');\n\n \/\/ State\n let files = [];\n let compressedFiles = [];\n let compressionQuality = 80;\n\n \/\/ Event Listeners\n uploadBtn.addEventListener('click', () => fileInput.click());\n fileInput.addEventListener('change', handleFileSelect);\n qualitySlider.addEventListener('input', updateQuality);\n downloadAllBtn.addEventListener('click', downloadAllAsZip);\n clearQueueBtn.addEventListener('click', clearQueue);\n exifUploadBtn.addEventListener('click', () => exifFileInput.click());\n exifFileInput.addEventListener('change', handleExifFileSelect);\n formatSelect.addEventListener('change', handleFormatChange);\n\n \/\/ Drag and Drop\n ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {\n uploadArea.addEventListener(eventName, preventDefaults, false);\n });\n\n function preventDefaults(e) {\n e.preventDefault();\n e.stopPropagation();\n }\n\n ['dragenter', 'dragover'].forEach(eventName => {\n uploadArea.addEventListener(eventName, highlight, false);\n });\n\n ['dragleave', 'drop'].forEach(eventName => {\n uploadArea.addEventListener(eventName, unhighlight, false);\n });\n\n function highlight() {\n uploadArea.classList.add('highlight');\n }\n\n function unhighlight() {\n uploadArea.classList.remove('highlight');\n }\n\n uploadArea.addEventListener('drop', handleDrop, false);\n\n function handleDrop(e) {\n const dt = e.dataTransfer;\n const droppedFiles = dt.files;\n handleFiles(droppedFiles);\n }\n\n \/\/ Tab switching\n tabs.forEach(tab => {\n tab.addEventListener('click', () => {\n const tabId = tab.getAttribute('data-tab');\n \n tabs.forEach(t => t.classList.remove('active'));\n tabContents.forEach(tc => tc.classList.remove('active'));\n \n tab.classList.add('active');\n document.getElementById(tabId).classList.add('active');\n });\n });\n\n \/\/ Functions\n function handleFileSelect(e) {\n const selectedFiles = e.target.files;\n handleFiles(selectedFiles);\n }\n\n function handleFiles(selectedFiles) {\n if (files.length + selectedFiles.length > 20) {\n showNotification('Maximum 20 files allowed. Please remove some files before adding more.', 'error');\n return;\n }\n\n for (let i = 0; i < selectedFiles.length; i++) {\n const file = selectedFiles[i];\n if (isValidFileType(file)) {\n files.push(file);\n processFile(file);\n } else {\n showNotification(`File \"${file.name}\" is not a supported format.`, 'error');\n }\n }\n\n updateFileCount();\n fileInput.value = ''; \/\/ Reset input to allow selecting same files again\n }\n\n function isValidFileType(file) {\n const validTypes = ['image\/jpeg', 'image\/png', 'image\/webp'];\n return validTypes.includes(file.type);\n }\n\n function processFile(file) {\n \/\/ Hide empty state\n emptyState.style.display = 'none';\n \n \/\/ Create image card\n const card = document.createElement('div');\n card.className = 'image-card';\n card.id = `card-${file.name.replace(\/\\s\/g, '-')}`;\n \n \/\/ Create preview\n const preview = document.createElement('div');\n preview.className = 'image-preview';\n \n const img = document.createElement('img');\n img.src = URL.createObjectURL(file);\n preview.appendChild(img);\n \n \/\/ Create file info\n const info = document.createElement('div');\n info.className = 'image-info';\n \n const name = document.createElement('div');\n name.className = 'image-name';\n name.textContent = file.name;\n \n const stats = document.createElement('div');\n stats.className = 'image-stats';\n \n const originalSize = document.createElement('div');\n originalSize.className = 'original-size';\n originalSize.textContent = `Original: ${formatFileSize(file.size)}`;\n \n const compressedSize = document.createElement('div');\n compressedSize.className = 'compressed-size';\n compressedSize.textContent = 'Compressed: --';\n compressedSize.id = `compressed-${file.name.replace(\/\\s\/g, '-')}`;\n \n const ratio = document.createElement('div');\n ratio.className = 'compression-ratio';\n ratio.textContent = '--% smaller';\n ratio.id = `ratio-${file.name.replace(\/\\s\/g, '-')}`;\n \n stats.appendChild(originalSize);\n stats.appendChild(compressedSize);\n stats.appendChild(ratio);\n \n \/\/ Create actions\n const actions = document.createElement('div');\n actions.className = 'image-actions';\n \n const downloadBtn = document.createElement('button');\n downloadBtn.className = 'image-btn primary';\n downloadBtn.textContent = 'Download';\n downloadBtn.addEventListener('click', () => downloadFile(file));\n \n const removeBtn = document.createElement('button');\n removeBtn.className = 'image-btn';\n removeBtn.textContent = 'Remove';\n removeBtn.addEventListener('click', () => removeFile(file, card));\n \n actions.appendChild(downloadBtn);\n actions.appendChild(removeBtn);\n \n \/\/ Add progress bar\n const progressBar = document.createElement('div');\n progressBar.className = 'progress-bar';\n const progressFill = document.createElement('div');\n progressFill.className = 'progress-fill';\n progressFill.id = `progress-${file.name.replace(\/\\s\/g, '-')}`;\n progressBar.appendChild(progressFill);\n \n \/\/ Assemble card\n info.appendChild(name);\n info.appendChild(stats);\n info.appendChild(progressBar);\n info.appendChild(actions);\n \n card.appendChild(preview);\n card.appendChild(info);\n \n imageGrid.appendChild(card);\n \n \/\/ Compress the file\n compressFile(file, compressionQuality);\n }\n\n function compressFile(file, quality) {\n const progressFill = document.getElementById(`progress-${file.name.replace(\/\\s\/g, '-')}`);\n \n \/\/ For images, use Canvas API for compression\n const reader = new FileReader();\n \n reader.onload = function(e) {\n const img = new Image();\n img.src = e.target.result;\n \n img.onload = function() {\n const canvas = document.createElement('canvas');\n const ctx = canvas.getContext('2d');\n \n \/\/ Calculate new dimensions if needed (maintain aspect ratio)\n let width = img.width;\n let height = img.height;\n const maxDimension = 2000; \/\/ Max width\/height\n \n if (width > maxDimension || height > maxDimension) {\n if (width > height) {\n height = Math.round((height * maxDimension) \/ width);\n width = maxDimension;\n } else {\n width = Math.round((width * maxDimension) \/ height);\n height = maxDimension;\n }\n }\n \n canvas.width = width;\n canvas.height = height;\n \n \/\/ Draw image on canvas\n ctx.drawImage(img, 0, 0, width, height);\n \n \/\/ Get the output format\n let outputFormat = 'image\/jpeg';\n if (formatSelect.value === 'png') {\n outputFormat = 'image\/png';\n } else if (formatSelect.value === 'webp') {\n outputFormat = 'image\/webp';\n } else if (formatSelect.value === 'original') {\n \/\/ Keep the original format\n outputFormat = file.type;\n }\n \n \/\/ Convert to blob with quality setting\n canvas.toBlob((blob) => {\n progressFill.style.width = '100%';\n updateFileStats(file, blob.size);\n \n \/\/ Determine file extension based on output format\n let fileExtension = '.jpg';\n if (outputFormat === 'image\/png') fileExtension = '.png';\n if (outputFormat === 'image\/webp') fileExtension = '.webp';\n \n \/\/ Get original filename without extension\n const originalName = file.name.substring(0, file.name.lastIndexOf('.'));\n \n compressedFiles.push({\n original: file,\n compressed: blob,\n name: originalName + fileExtension\n });\n }, outputFormat, quality \/ 100);\n };\n };\n \n reader.readAsDataURL(file);\n \n \/\/ Simulate progress (in a real implementation, this would be based on actual compression progress)\n let progress = 0;\n const progressInterval = setInterval(() => {\n progress += 5;\n progressFill.style.width = `${progress}%`;\n \n if (progress >= 90) {\n clearInterval(progressInterval);\n }\n }, 100);\n }\n\n function updateFileStats(file, compressedSize) {\n const compressedElement = document.getElementById(`compressed-${file.name.replace(\/\\s\/g, '-')}`);\n const ratioElement = document.getElementById(`ratio-${file.name.replace(\/\\s\/g, '-')}`);\n \n compressedElement.textContent = `Compressed: ${formatFileSize(compressedSize)}`;\n \n const ratio = ((file.size - compressedSize) \/ file.size * 100).toFixed(1);\n ratioElement.textContent = `${ratio}% smaller`;\n \n if (parseFloat(ratio) > 0) {\n ratioElement.style.color = 'var(--secondary-color)';\n } else {\n ratioElement.style.color = '#ef4444';\n }\n }\n\n function updateQuality() {\n compressionQuality = qualitySlider.value;\n qualityValue.textContent = `${compressionQuality}%`;\n \n \/\/ Recompress all files with new quality setting\n if (files.length > 0) {\n compressedFiles = [];\n files.forEach(file => {\n const progressFill = document.getElementById(`progress-${file.name.replace(\/\\s\/g, '-')}`);\n progressFill.style.width = '0%';\n compressFile(file, compressionQuality);\n });\n }\n }\n\n function handleFormatChange() {\n \/\/ Recompress all files with new format setting\n if (files.length > 0) {\n compressedFiles = [];\n files.forEach(file => {\n const progressFill = document.getElementById(`progress-${file.name.replace(\/\\s\/g, '-')}`);\n progressFill.style.width = '0%';\n compressFile(file, compressionQuality);\n });\n }\n }\n\n function downloadFile(file) {\n const compressedFile = compressedFiles.find(f => f.original === file);\n \n if (compressedFile) {\n const url = URL.createObjectURL(compressedFile.compressed);\n const a = document.createElement('a');\n a.href = url;\n a.download = compressedFile.name;\n document.body.appendChild(a);\n a.click();\n document.body.removeChild(a);\n URL.revokeObjectURL(url);\n \n showNotification(`Downloaded ${compressedFile.name} successfully!`);\n } else {\n showNotification(`File ${file.name} is not ready yet. Please wait.`, 'error');\n }\n }\n\n function downloadAllAsZip() {\n if (compressedFiles.length === 0) {\n showNotification('No files to download.', 'error');\n return;\n }\n \n const zip = new JSZip();\n let addedFiles = 0;\n \n compressedFiles.forEach(fileObj => {\n zip.file(fileObj.name, fileObj.compressed);\n addedFiles++;\n });\n \n zip.generateAsync({ type: 'blob' })\n .then(blob => {\n saveAs(blob, 'compressed_images.zip');\n showNotification(`Downloaded ${addedFiles} files as ZIP successfully!`);\n })\n .catch(err => {\n console.error('Error creating ZIP:', err);\n showNotification('Error creating ZIP file.', 'error');\n });\n }\n\n function removeFile(file, card) {\n files = files.filter(f => f !== file);\n compressedFiles = compressedFiles.filter(f => f.original !== file);\n card.remove();\n \n if (files.length === 0) {\n emptyState.style.display = 'block';\n }\n \n updateFileCount();\n }\n\n function clearQueue() {\n if (files.length === 0) {\n showNotification('Queue is already empty.', 'error');\n return;\n }\n \n files = [];\n compressedFiles = [];\n imageGrid.innerHTML = '';\n emptyState.style.display = 'block';\n updateFileCount();\n \n showNotification('Queue cleared successfully.');\n }\n\n function updateFileCount() {\n fileCount.textContent = files.length;\n }\n\n function formatFileSize(bytes) {\n if (bytes === 0) return '0 Bytes';\n \n const k = 1024;\n const sizes = ['Bytes', 'KB', 'MB', 'GB'];\n const i = Math.floor(Math.log(bytes) \/ Math.log(k));\n \n return parseFloat((bytes \/ Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];\n }\n\n function showNotification(message, type = 'success') {\n const notificationText = notification.querySelector('.notification-text');\n notificationText.textContent = message;\n \n notification.className = 'notification';\n notification.classList.add(type);\n \n notification.classList.add('show');\n \n setTimeout(() => {\n notification.classList.remove('show');\n }, 3000);\n }\n\n \/\/ EXIF Viewer functionality\n function handleExifFileSelect(e) {\n const file = e.target.files[0];\n \n if (!file) return;\n \n if (!file.type.match(\/image\\\/(jpeg|png|tiff)\/)) {\n showNotification('Please select a JPEG, PNG, or TIFF image for EXIF data.', 'error');\n return;\n }\n \n \/\/ In a real implementation, you would use a library like exif-js to read EXIF data\n \/\/ For this demo, we'll simulate EXIF data\n \n const simulatedExifData = {\n 'Make': 'Canon',\n 'Model': 'EOS 5D Mark IV',\n 'Software': 'Adobe Photoshop CC 2021',\n 'DateTime': '2023:05:15 14:30:22',\n 'ExposureTime': '1\/250',\n 'FNumber': 'f\/5.6',\n 'ISOSpeedRatings': '200',\n 'FocalLength': '50 mm',\n 'LensModel': 'EF50mm f\/1.8 STM',\n 'ImageWidth': '6720',\n 'ImageHeight': '4480',\n 'GPSLatitude': '40.7128\u00b0 N',\n 'GPSLongitude': '74.0060\u00b0 W'\n };\n \n displayExifData(simulatedExifData);\n exifFileInput.value = ''; \/\/ Reset input\n }\n\n function displayExifData(data) {\n exifTableBody.innerHTML = '';\n \n for (const [key, value] of Object.entries(data)) {\n const row = document.createElement('tr');\n \n const keyCell = document.createElement('td');\n keyCell.textContent = key;\n \n const valueCell = document.createElement('td');\n valueCell.textContent = value;\n \n row.appendChild(keyCell);\n row.appendChild(valueCell);\n exifTableBody.appendChild(row);\n }\n \n exifData.style.display = 'block';\n }\n <\/script>\n<\/body>\n<\/html><\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n\n<div class=\"wp-block-kadence-column kadence-column3028_bdd3d6-08\"><div class=\"kt-inside-inner-col\">\n\n<div class=\"wp-block-kadence-column kadence-column3028_fa1306-c8\"><div class=\"kt-inside-inner-col\"><\/div><\/div>\n\n\n\n<div class=\"wp-block-kadence-column kadence-column3028_9922a7-9a\"><div class=\"kt-inside-inner-col\">\n<h2 class=\"wp-block-heading\"><strong>\ud83d\udcc9 Compress JPG File Online \u2013 Free, Fast, and Reliable<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Alright, let\u2019s get honest. Pictures are basically running the internet. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For Shopify, you need compress jpg file any time.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">It doesn’t matter if you’re working with a small business, writing a blog, or just sharing your pet’s picture with family\u2013 everything boils down to photos. And compress JPEG file? Well, they’re absolutely ubiquitous.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">But here’s the thing: those files can be absurdly massive. I recall trying to upload a vacation snap that was 12 MB. Twelve! It felt like my Wi-Fi aged ten years just watching it load.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Large images slow websites down, eat up your phone storage, and sharing them makes you feel like you’re back in the dial-up days. So yes, making them smaller is definitely the way to go.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>\ud83d\udd0e What Does \u201cCompress JPG file\u201d Even Mean?<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Imagine needing more room in your suitcase for a trip while having packed everything! It feels like suddenly realizing compression technology for JPG files is similar\u2013 reducing the file size without negative impacts on image quality.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1200\" height=\"630\" src=\"https:\/\/yamuparkoti.com\/wp-content\/uploads\/2026\/06\/dark-banner-comp-1781272398734.png\" alt=\"Compress JPG File \u2014 yamuparkoti.com\" class=\"wp-image-3448\" srcset=\"https:\/\/yamuparkoti.com\/wp-content\/uploads\/2026\/06\/dark-banner-comp-1781272398734.png 1200w, https:\/\/yamuparkoti.com\/wp-content\/uploads\/2026\/06\/dark-banner-comp-1781272398734-300x158.png 300w, https:\/\/yamuparkoti.com\/wp-content\/uploads\/2026\/06\/dark-banner-comp-1781272398734-1024x538.png 1024w, https:\/\/yamuparkoti.com\/wp-content\/uploads\/2026\/06\/dark-banner-comp-1781272398734-768x403.png 768w, https:\/\/yamuparkoti.com\/wp-content\/uploads\/2026\/06\/dark-banner-comp-1781272398734-18x9.png 18w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">In fact sometimes photos that must be 5 MB can be shrunk down to just 500 KB\u2013 a big difference! Uploading is faster; pages load more quickly. It eliminates that feeling of waiting for the internet \u201cto crawl out of bed.”<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">We can divide methods into two broad types:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">1. Lossy: This takes care of tiniest details\u2014 would it be accurate to say most human eyes don\u2019t see them?<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">2. Lossless: Definitely keeps every single detail intact but still manages some saving on space too!<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Which one is the best? That changes for each case, you know! For me personally with images going online, I almost always go with lossy compression jpg file\u2013 because honestly, I can’t spot any difference.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>\ud83d\ude80 Why Bother Compressing JPGs?<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Still not sold? Here\u2019s why it matters:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u26a1 Your site loads faster. Google likes that. So do visitors.<\/li>\n\n\n\n<li>\ud83d\udcbe You save space. (My laptop thanks me every time.)<\/li>\n\n\n\n<li>\ud83d\udce4 Sharing is quicker. Emails don\u2019t bounce back with \u201cfile too big.\u201d<\/li>\n\n\n\n<li>\ud83d\ude00 People don\u2019t click away while waiting.<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>\ud83d\udee0 How Do You Actually Do It?<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">It\u2019s not rocket science. Three steps and you\u2019re done:<\/p>\n\n\n\n<ol start=\"1\" class=\"wp-block-list\">\n<li>\ud83d\udcc2 Upload your JPG. Drag, drop, or click.<\/li>\n\n\n\n<li>\ud83c\udf9a Pick how much you want to shrink it.<\/li>\n\n\n\n<li>\u2b07 Hit download. Boom. Done.<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">No sign-ups. No sneaky watermarks. No \u201cplease upgrade\u201d pop-ups.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>\ud83c\udf1f Why This Tool Isn\u2019t Like the Others<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">I\u2019ve tried some of those shady online compressors. Ads everywhere. Files get sent to who-knows-where. Hard pass.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This one?<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u2705 Free. No \u201csurprise\u201d paywalls. Just compress jpg file.<\/li>\n\n\n\n<li>\ud83d\udd12 Private. Files never leave your browser.<\/li>\n\n\n\n<li>\u26a1 Fast. Upload a whole batch (yep, up to 20).<\/li>\n\n\n\n<li>\ud83c\udfa8 Flexible. Save as JPG, PNG, or even WebP if you\u2019re fancy.<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>\ud83d\udcf8 When Compression Saves the Day<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">You would understand its importance because:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Occasionally uploading product pictures for a store\u2013 like when Shopify rejected me for a massive file!<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Sharing detailed photographs on Instagram.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Are there really folks at work saying \u201cThis is far too big to email\u201d?<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Hoping to boost my website\u2019s loading time, thereby encouraging Google to place me on page 1 rather than page 7!<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Trying to free up space on my vintage iPhone which keeps shouting \u201cStorage full!\u201d<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>\ud83d\udcc8 The SEO Perk Nobody Talks About<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Here\u2019s the thing: slow sites tank your Google rank. Nobody waits around for a page to load. By compressing JPGs, you:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u2705 Improve Core Web Vitals (don\u2019t worry, just \u201csite speed stuff\u201d).<\/li>\n\n\n\n<li>\ud83d\udcca Get better rankings.<\/li>\n\n\n\n<li>\u23f3 Keep people on your site longer.<\/li>\n\n\n\n<li>\ud83d\udcb0 Maybe even make more sales because folks don\u2019t give up.<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>\ud83d\udd12 But Is It Safe?<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">And that was a concern of mine as well.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Several tools automatically transfer your pictures to their servers\u2013 which is awkward if you want to reduce the file sizes of personal images.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This tool is different; nothing gets sent anywhere. It all happens within your web browser.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">No account is needed, there is no data-gathering, and no \u2018cloud\u2019 storage of your files; just fast, efficient processing.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>\ud83d\udca1 Pro Tips I\u2019ve Picked Up<\/strong><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\ud83c\udf9a 80% quality usually looks perfect to me.<\/li>\n\n\n\n<li>\ud83c\udf0d If it\u2019s for the web, WebP files are even smaller.<\/li>\n\n\n\n<li>\ud83d\uddc2 Always keep the original somewhere safe. Trust me, I\u2019ve learned the hard way.<\/li>\n\n\n\n<li>\ud83d\udda5 Shrink before uploading to WordPress or <a href=\"https:\/\/yamuparkoti.com\/\" data-type=\"link\" data-id=\"https:\/\/yamuparkoti.com\/\">Shopify<\/a>\u2014saves headaches later.<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>\ud83d\udc49 Ready to Try?<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Really, don’t analyze it too much. Just upload an image there automatically compress jpg file to see what occurs!<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">At worst, you free up some room\u2013 at best, your website visitors experience it loading at super speeds.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>\u2753 Quick FAQs<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Does compression hurt quality?<\/strong><br>A little, but usually you won\u2019t notice.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Can I compress a bunch of files at once?<\/strong><br>Yep\u2014up to 20 in one go.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Is it safe?<\/strong><br>Safe as it gets. Files stay in your browser.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>JPG or WebP?<\/strong><br>JPG works everywhere. WebP\u2019s smaller but not every site loves it.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Will it help SEO?<\/strong><br>Yes. Faster pages = happier Google.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>\ud83c\udfc1 Final Thoughts<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">And giant images are a problem\u2013 they don’t just slow your site down but take up loads of space. We have all been caught out by them; it’s just one too many times.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">With compression, you:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u26a1 Make your website faster<\/li>\n\n\n\n<li>\ud83d\udcbe Save space<\/li>\n\n\n\n<li>\ud83d\udcf2 Share photos without swearing at your inbox<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">So yeah\u2014give it a go. Shrink those JPGs and thank yourself later.<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-kadence-column kadence-column3028_97f692-5a\"><div class=\"kt-inside-inner-col\"><\/div><\/div>\n\n<\/div><\/div>\n\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":3448,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"_kadence_starter_templates_imported_post":false,"footnotes":""},"class_list":["post-3028","page","type-page","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/yamuparkoti.com\/fr\/wp-json\/wp\/v2\/pages\/3028","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/yamuparkoti.com\/fr\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/yamuparkoti.com\/fr\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/yamuparkoti.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/yamuparkoti.com\/fr\/wp-json\/wp\/v2\/comments?post=3028"}],"version-history":[{"count":2,"href":"https:\/\/yamuparkoti.com\/fr\/wp-json\/wp\/v2\/pages\/3028\/revisions"}],"predecessor-version":[{"id":5345,"href":"https:\/\/yamuparkoti.com\/fr\/wp-json\/wp\/v2\/pages\/3028\/revisions\/5345"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/yamuparkoti.com\/fr\/wp-json\/wp\/v2\/media\/3448"}],"wp:attachment":[{"href":"https:\/\/yamuparkoti.com\/fr\/wp-json\/wp\/v2\/media?parent=3028"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}