{"id":34,"date":"2026-04-04T14:01:37","date_gmt":"2026-04-04T14:01:37","guid":{"rendered":"https:\/\/pixlop.com\/?page_id=34"},"modified":"2026-04-04T14:01:37","modified_gmt":"2026-04-04T14:01:37","slug":"image-resizer","status":"publish","type":"page","link":"https:\/\/pixlop.com\/?page_id=34","title":{"rendered":"IMAGE RESIZER"},"content":{"rendered":"\n\n\n\n \n \n Pixlop.com<\/title>\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jszip\/3.10.1\/jszip.min.js\"><\/script>\n <style>\n :root {\n --primary: #4a6fa5;\n --primary-light: #6c8fc7;\n --secondary: #5d8a82;\n --secondary-light: #7faca2;\n --accent: #a56f4a;\n --light: #f8f9fa;\n --light-gray: #e9ecef;\n --medium-gray: #ced4da;\n --dark-gray: #6c757d;\n --dark: #343a40;\n --danger: #e74c3c;\n --warning: #f39c12;\n --success: #28a745;\n --info: #17a2b8;\n --border-radius: 12px;\n --card-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);\n --transition: all 0.3s ease;\n }\n \n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n }\n \n body {\n background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);\n color: var(--dark);\n min-height: 100vh;\n padding: 15px;\n line-height: 1.6;\n display: flex;\n flex-direction: column;\n }\n \n .container {\n max-width: 1200px;\n margin: 0 auto;\n width: 100%;\n flex: 1;\n display: flex;\n flex-direction: column;\n }\n \n header {\n text-align: center;\n margin-bottom: 25px;\n padding: 25px 20px;\n background: white;\n border-radius: var(--border-radius);\n box-shadow: var(--card-shadow);\n position: relative;\n }\n \n header h1 {\n font-size: 2.5rem;\n margin-bottom: 12px;\n color: var(--primary);\n font-weight: 700;\n }\n \n header p {\n font-size: 1.1rem;\n color: var(--dark-gray);\n max-width: 800px;\n margin: 0 auto;\n line-height: 1.6;\n }\n \n .main-content {\n display: flex;\n flex-wrap: wrap;\n gap: 25px;\n margin-bottom: 25px;\n flex: 1;\n }\n \n .card {\n background: white;\n border-radius: var(--border-radius);\n padding: 25px;\n box-shadow: var(--card-shadow);\n transition: var(--transition);\n }\n \n .card:hover {\n transform: translateY(-5px);\n box-shadow: 0 12px 25px rgba(0, 0, 0, 0.1);\n }\n \n .upload-section {\n flex: 1;\n min-width: 300px;\n }\n \n .options-section {\n flex: 1;\n min-width: 300px;\n }\n \n .preview-section {\n flex: 2;\n min-width: 300px;\n display: flex;\n flex-direction: column;\n }\n \n .section-title {\n font-size: 1.4rem;\n margin-bottom: 20px;\n color: var(--primary);\n padding-bottom: 12px;\n border-bottom: 2px solid var(--light-gray);\n display: flex;\n align-items: center;\n gap: 10px;\n }\n \n .section-title i {\n font-size: 1.2rem;\n }\n \n .drop-area {\n border: 3px dashed var(--medium-gray);\n border-radius: 8px;\n padding: 35px 20px;\n text-align: center;\n cursor: pointer;\n transition: var(--transition);\n margin-bottom: 20px;\n background-color: var(--light);\n position: relative;\n }\n \n .drop-area:hover, .drop-area.active {\n border-color: var(--primary);\n background-color: rgba(74, 111, 165, 0.05);\n }\n \n .drop-area i {\n font-size: 3rem;\n color: var(--primary-light);\n margin-bottom: 15px;\n display: block;\n }\n \n .drop-area p {\n margin: 10px 0;\n color: var(--dark-gray);\n }\n \n .batch-upload {\n display: flex;\n align-items: center;\n justify-content: center;\n margin-top: 10px;\n gap: 8px;\n }\n \n .btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n padding: 12px 24px;\n background: var(--primary);\n color: white;\n border: none;\n border-radius: 8px;\n cursor: pointer;\n font-size: 1rem;\n font-weight: 600;\n transition: var(--transition);\n text-align: center;\n }\n \n .btn:hover {\n background: var(--primary-light);\n transform: translateY(-2px);\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);\n }\n \n .btn-secondary {\n background: var(--secondary);\n }\n \n .btn-secondary:hover {\n background: var(--secondary-light);\n }\n \n .btn-danger {\n background: var(--danger);\n }\n \n .btn-danger:hover {\n background: #c0392b;\n }\n \n .btn-warning {\n background: var(--warning);\n }\n \n .btn-warning:hover {\n background: #e67e22;\n }\n \n .btn-success {\n background: var(--success);\n }\n \n .btn-success:hover {\n background: #218838;\n }\n \n .btn-info {\n background: var(--info);\n }\n \n .btn-info:hover {\n background: #138496;\n }\n \n .btn i {\n font-size: 1.1rem;\n }\n \n .btn-sm {\n padding: 8px 16px;\n font-size: 0.9rem;\n }\n \n .form-group {\n margin-bottom: 20px;\n }\n \n .form-group label {\n display: block;\n margin-bottom: 8px;\n font-weight: 600;\n color: var(--dark);\n display: flex;\n align-items: center;\n gap: 8px;\n }\n \n .form-group label i {\n color: var(--primary);\n font-size: 1rem;\n }\n \n select, input {\n width: 100%;\n padding: 12px;\n border: 2px solid var(--light-gray);\n border-radius: 8px;\n font-size: 1rem;\n transition: var(--transition);\n background-color: var(--light);\n }\n \n select:focus, input:focus {\n border-color: var(--primary);\n outline: none;\n box-shadow: 0 0 0 3px rgba(74, 111, 165, 0.2);\n }\n \n .preview-container {\n display: flex;\n flex-wrap: wrap;\n gap: 20px;\n margin-top: 20px;\n }\n \n .preview-box {\n flex: 1;\n min-width: 250px;\n text-align: center;\n background: var(--light);\n padding: 18px;\n border-radius: var(--border-radius);\n }\n \n .preview-title {\n font-size: 1.1rem;\n margin-bottom: 12px;\n color: var(--dark);\n font-weight: 600;\n }\n \n .image-preview {\n max-width: 100%;\n max-height: 280px;\n border-radius: 8px;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n margin-bottom: 15px;\n background: white;\n padding: 8px;\n }\n \n .image-info {\n background: var(--light-gray);\n padding: 10px;\n border-radius: 8px;\n font-size: 0.9rem;\n display: flex;\n flex-direction: column;\n gap: 5px;\n }\n \n .image-info span {\n font-weight: 600;\n color: var(--primary);\n }\n \n .action-buttons {\n display: flex;\n gap: 12px;\n margin-top: 25px;\n flex-wrap: wrap;\n }\n \n footer {\n text-align: center;\n padding: 20px;\n color: var(--dark-gray);\n font-size: 0.9rem;\n background: white;\n border-radius: var(--border-radius);\n box-shadow: var(--card-shadow);\n margin-top: auto;\n }\n \n .compression-info {\n background: var(--light);\n padding: 18px;\n border-radius: var(--border-radius);\n margin-top: 20px;\n text-align: center;\n border-left: 4px solid var(--success);\n }\n \n .size-reduction {\n font-weight: bold;\n color: var(--success);\n font-size: 1.2rem;\n }\n \n .dimension-inputs {\n display: flex;\n gap: 12px;\n margin-top: 12px;\n }\n \n .dimension-inputs > div {\n flex: 1;\n }\n \n .preserve-aspect {\n display: flex;\n align-items: center;\n margin-top: 12px;\n gap: 8px;\n padding: 10px;\n background: var(--light);\n border-radius: 8px;\n }\n\n .message {\n padding: 12px;\n margin-top: 12px;\n border-radius: 8px;\n display: none;\n font-weight: 500;\n display: flex;\n align-items: center;\n gap: 8px;\n }\n\n .error-message {\n color: var(--danger);\n background-color: rgba(231, 76, 60, 0.1);\n border-left: 4px solid var(--danger);\n }\n\n .warning-message {\n color: var(--warning);\n background-color: rgba(243, 156, 18, 0.1);\n border-left: 4px solid var(--warning);\n }\n\n .success-message {\n color: var(--success);\n background-color: rgba(40, 167, 69, 0.1);\n border-left: 4px solid var(--success);\n }\n\n .info-message {\n color: var(--info);\n background-color: rgba(23, 162, 184, 0.1);\n border-left: 4px solid var(--info);\n }\n\n .loading {\n display: none;\n text-align: center;\n margin: 12px 0;\n }\n\n .loading-spinner {\n border: 4px solid rgba(74, 111, 165, 0.2);\n border-radius: 50%;\n border-top: 4px solid var(--primary);\n width: 35px;\n height: 35px;\n animation: spin 1s linear infinite;\n margin: 0 auto 12px;\n }\n\n @keyframes spin {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n }\n\n .sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n }\n \n .dpi-settings {\n background-color: var(--light);\n padding: 12px;\n border-radius: 8px;\n margin-top: 12px;\n border-left: 4px solid var(--primary);\n }\n \n .format-info {\n font-size: 0.85rem;\n color: var(--dark-gray);\n margin-top: 6px;\n padding: 6px 10px;\n background: var(--light);\n border-radius: 6px;\n }\n \n .max-dimension-warning {\n display: none;\n color: var(--warning);\n font-size: 0.8rem;\n margin-top: 6px;\n }\n \n .privacy-notice {\n background-color: var(--light);\n padding: 12px;\n border-radius: 8px;\n margin-top: 15px;\n border-left: 4px solid var(--success);\n font-size: 0.85rem;\n display: flex;\n align-items: flex-start;\n gap: 10px;\n }\n \n .privacy-notice i {\n color: var(--success);\n font-size: 1.1rem;\n }\n \n progress {\n width: 100%;\n height: 8px;\n margin-top: 12px;\n border-radius: 4px;\n overflow: hidden;\n }\n \n progress::-webkit-progress-bar {\n background-color: var(--light-gray);\n border-radius: 4px;\n }\n \n progress::-webkit-progress-value {\n background-color: var(--primary);\n border-radius: 4px;\n }\n \n progress::-moz-progress-bar {\n background-color: var(--primary);\n border-radius: 4px;\n }\n \n .option-group {\n background: var(--light);\n padding: 18px;\n border-radius: 10px;\n margin-bottom: 20px;\n }\n \n .option-group-title {\n font-size: 1rem;\n margin-bottom: 12px;\n color: var(--primary);\n display: flex;\n align-items: center;\n gap: 8px;\n }\n \n .preset-buttons {\n display: flex;\n flex-wrap: wrap;\n gap: 10px;\n margin-top: 15px;\n }\n \n .file-list-container {\n margin-top: 15px;\n max-height: 250px;\n overflow-y: auto;\n border: 1px solid var(--light-gray);\n border-radius: 8px;\n padding: 10px;\n }\n \n .file-item {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 8px;\n background: var(--light);\n border-radius: 8px;\n margin-bottom: 8px;\n font-size: 0.9rem;\n }\n \n .file-info {\n display: flex;\n align-items: center;\n gap: 12px;\n overflow: hidden;\n }\n \n .file-thumb {\n width: 60px;\n height: 60px;\n object-fit: cover;\n border-radius: 6px;\n background: #ddd;\n }\n \n .file-name {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n max-width: 180px;\n }\n \n .file-status {\n font-size: 0.8rem;\n padding: 4px 8px;\n border-radius: 4px;\n background: var(--light-gray);\n }\n \n .file-status.success {\n background: var(--success);\n color: white;\n }\n \n .file-status.error {\n background: var(--danger);\n color: white;\n }\n \n .exif-data {\n margin-top: 15px;\n padding: 15px;\n background: var(--light);\n border-radius: 8px;\n font-size: 0.85rem;\n max-height: 150px;\n overflow-y: auto;\n }\n \n .exif-data h4 {\n margin-bottom: 10px;\n color: var(--primary);\n }\n \n .exif-data table {\n width: 100%;\n }\n \n .exif-data td {\n padding: 4px 0;\n }\n \n .exif-data td:first-child {\n font-weight: 600;\n color: var(--dark);\n width: 40%;\n }\n \n .history-panel {\n margin-top: 20px;\n padding: 15px;\n background: var(--light);\n border-radius: 8px;\n max-height: 200px;\n overflow-y: auto;\n }\n \n .history-item {\n display: flex;\n justify-content: space-between;\n padding: 8px 0;\n border-bottom: 1px solid var(--light-gray);\n cursor: pointer;\n }\n \n .history-item:hover {\n background: var(--light-gray);\n }\n \n .history-item:last-child {\n border-bottom: none;\n }\n \n .history-info {\n display: flex;\n gap: 10px;\n align-items: center;\n }\n \n .history-thumb {\n width: 30px;\n height: 30px;\n object-fit: cover;\n border-radius: 4px;\n }\n \n @media (max-width: 992px) {\n .main-content {\n flex-direction: column;\n }\n \n .preview-container {\n flex-direction: column;\n }\n }\n \n @media (max-width: 768px) {\n body {\n padding: 10px;\n }\n \n header {\n padding: 20px 15px;\n margin-bottom: 20px;\n }\n \n header h1 {\n font-size: 2rem;\n }\n \n header p {\n font-size: 1rem;\n }\n \n .card {\n padding: 20px;\n }\n \n .action-buttons {\n flex-direction: column;\n }\n \n .dimension-inputs {\n flex-direction: column;\n gap: 10px;\n }\n \n .btn {\n width: 100%;\n justify-content: center;\n }\n \n .drop-area {\n padding: 25px 15px;\n }\n \n .drop-area i {\n font-size: 2.5rem;\n }\n \n .file-thumb {\n width: 50px;\n height: 50px;\n }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"container\">\n <header>\n <h1><i class=\"fas fa-compress-alt\"><\/i> Pixlop.com<\/h1>\n <p>Compress and resize your images online without losing quality. Support for multiple output formats, batch processing, and advanced editing options.<\/p>\n <\/header>\n \n <div class=\"main-content\">\n <div class=\"card upload-section\">\n <h2 class=\"section-title\"><i class=\"fas fa-upload\"><\/i> Upload Image<\/h2>\n <div class=\"drop-area\" id=\"dropArea\" aria-labelledby=\"dropAreaLabel\">\n <i class=\"fas fa-cloud-upload-alt\"><\/i>\n <p id=\"dropAreaLabel\">Drag & Drop your image here<\/p>\n <p>OR<\/p>\n <input type=\"file\" id=\"fileInput\" accept=\"image\/*\" hidden multiple>\n <button class=\"btn\" id=\"browseBtn\"><i class=\"fas fa-folder-open\"><\/i> Browse Files<\/button>\n <div class=\"batch-upload\">\n <input type=\"checkbox\" id=\"batchMode\" checked>\n <label for=\"batchMode\">Enable batch processing (up to 50 images) <span style=\"background:var(--primary); color:white; padding:2px 8px; border-radius:20px; font-size:0.8rem;\">BULK<\/span><\/label>\n <\/div>\n <\/div>\n \n <!-- Container for batch files (multiple) -->\n <div class=\"file-list-container\" id=\"batchFilesContainer\" style=\"display: none;\">\n <h3>Selected Files (<span id=\"batchCount\">0<\/span>)<\/h3>\n <div id=\"batchFilesList\"><\/div>\n <\/div>\n \n <!-- Container for single file -->\n <div class=\"file-list-container\" id=\"singleFileContainer\" style=\"display: none;\">\n <h3>Selected File<\/h3>\n <div id=\"singleFileInfo\"><\/div>\n <\/div>\n \n <div class=\"error-message\" id=\"uploadError\" style=\"display: none;\"><i class=\"fas fa-exclamation-circle\"><\/i> <span><\/span><\/div>\n <div class=\"warning-message\" id=\"uploadWarning\" style=\"display: none;\"><i class=\"fas fa-exclamation-triangle\"><\/i> <span><\/span><\/div>\n \n <div class=\"option-group\">\n <div class=\"option-group-title\"><i class=\"fas fa-cog\"><\/i> Output Settings<\/div>\n <div class=\"form-group\">\n <label for=\"outputFormat\"><i class=\"fas fa-file-image\"><\/i> Output Format<\/label>\n <select id=\"outputFormat\">\n <option value=\"jpeg\">JPEG<\/option>\n <option value=\"png\">PNG<\/option>\n <option value=\"webp\">WEBP<\/option>\n <option value=\"bmp\">BMP<\/option>\n <option value=\"tiff\">TIFF<\/option>\n <\/select>\n <div class=\"format-info\" id=\"formatInfo\">\n <strong>JPEG<\/strong>: Best for photographs, smaller file size\n <\/div>\n <\/div>\n \n <div class=\"form-group\">\n <label for=\"preset\"><i class=\"fas fa-sliders-h\"><\/i> Quick Presets<\/label>\n <div class=\"preset-buttons\">\n <button class=\"btn btn-sm btn-info\" data-preset=\"web\">Web Optimized (72 DPI)<\/button>\n <button class=\"btn btn-sm btn-info\" data-preset=\"print\">Print Quality (300 DPI)<\/button>\n <button class=\"btn btn-sm btn-info\" data-preset=\"social\">Social Media<\/button>\n <button class=\"btn btn-sm btn-info\" data-preset=\"email\">Email Attachment<\/button>\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"privacy-notice\">\n <i class=\"fas fa-shield-alt\"><\/i>\n <div>Your images are processed entirely in your browser and never uploaded to any server. We respect your privacy.<\/div>\n <\/div>\n <\/div>\n \n <div class=\"card options-section\">\n <h2 class=\"section-title\"><i class=\"fas fa-sliders-h\"><\/i> Compression Options<\/h2>\n \n <div class=\"option-group\">\n <div class=\"option-group-title\"><i class=\"fas fa-expand-alt\"><\/i> Resize Settings<\/div>\n <div class=\"form-group\">\n <label for=\"resizeType\"><i class=\"fas fa-ruler\"><\/i> Resize By<\/label>\n <select id=\"resizeType\">\n <option value=\"percentage\">Percentage<\/option>\n <option value=\"pixel\">Pixels<\/option>\n <option value=\"cm\">Centimeters<\/option>\n <option value=\"inches\">Inches<\/option>\n <\/select>\n <\/div>\n \n <div class=\"form-group\" id=\"percentageInput\">\n <label for=\"resizeValue\"><i class=\"fas fa-percentage\"><\/i> Scale Percentage (%)<\/label>\n <input type=\"number\" id=\"resizeValue\" value=\"50\" min=\"1\" max=\"100\">\n <\/div>\n \n <div class=\"form-group dimension-inputs\" id=\"pixelInputs\" style=\"display: none;\">\n <div>\n <label for=\"pixelWidth\"><i class=\"fas fa-arrows-alt-h\"><\/i> Width (px)<\/label>\n <input type=\"number\" id=\"pixelWidth\" min=\"1\" max=\"10000\" placeholder=\"Width\">\n <div class=\"max-dimension-warning\" id=\"pixelWidthWarning\">Maximum dimension is 10000px<\/div>\n <\/div>\n <div>\n <label for=\"pixelHeight\"><i class=\"fas fa-arrows-alt-v\"><\/i> Height (px)<\/label>\n <input type=\"number\" id=\"pixelHeight\" min=\"1\" max=\"10000\" placeholder=\"Height\">\n <div class=\"max-dimension-warning\" id=\"pixelHeightWarning\">Maximum dimension is 10000px<\/div>\n <\/div>\n <\/div>\n \n <div class=\"form-group dimension-inputs\" id=\"cmInputs\" style=\"display: none;\">\n <div>\n <label for=\"cmWidth\"><i class=\"fas fa-arrows-alt-h\"><\/i> Width (cm)<\/label>\n <input type=\"number\" id=\"cmWidth\" min=\"0.1\" step=\"0.1\" max=\"200\" placeholder=\"Width\">\n <div class=\"max-dimension-warning\" id=\"cmWidthWarning\">Maximum dimension is 200cm<\/div>\n <\/div>\n <div>\n <label for=\"cmHeight\"><i class=\"fas fa-arrows-alt-v\"><\/i> Height (cm)<\/label>\n <input type=\"number\" id=\"cmHeight\" min=\"0.1\" step=\"0.1\" max=\"200\" placeholder=\"Height\">\n <div class=\"max-dimension-warning\" id=\"cmHeightWarning\">Maximum dimension is 200cm<\/div>\n <\/div>\n <\/div>\n \n <div class=\"form-group dimension-inputs\" id=\"inchInputs\" style=\"display: none;\">\n <div>\n <label for=\"inchWidth\"><i class=\"fas fa-arrows-alt-h\"><\/i> Width (inches)<\/label>\n <input type=\"number\" id=\"inchWidth\" min=\"0.1\" step=\"0.1\" max=\"80\" placeholder=\"Width\">\n <div class=\"max-dimension-warning\" id=\"inchWidthWarning\">Maximum dimension is 80 inches<\/div>\n <\/div>\n <div>\n <label for=\"inchHeight\"><i class=\"fas fa-arrows-alt-v\"><\/i> Height (inches)<\/label>\n <input type=\"number\" id=\"inchHeight\" min=\"0.1\" step=\"0.1\" max=\"80\" placeholder=\"Height\">\n <div class=\"max-dimension-warning\" id=\"inchHeightWarning\">Maximum dimension is 80 inches<\/div>\n <\/div>\n <\/div>\n \n <div class=\"preserve-aspect\" id=\"aspectRatioContainer\" style=\"display: none;\">\n <input type=\"checkbox\" id=\"preserveAspect\" checked>\n <label for=\"preserveAspect\">Preserve Aspect Ratio<\/label>\n <\/div>\n \n <div class=\"dpi-settings\" id=\"dpiContainer\" style=\"display: none;\">\n <label for=\"dpiValue\"><i class=\"fas fa-tachometer-alt\"><\/i> DPI (Dots Per Inch)<\/label>\n <input type=\"number\" id=\"dpiValue\" value=\"96\" min=\"72\" max=\"600\">\n <div class=\"format-info\">Used for cm\/inches to pixels conversion. 96 DPI is standard for web.<\/div>\n <\/div>\n <\/div>\n \n <div class=\"option-group\">\n <div class=\"option-group-title\"><i class=\"fas fa-file-export\"><\/i> Output Quality<\/div>\n <div class=\"form-group\">\n <label for=\"quality\"><i class=\"fas fa-battery-three-quarters\"><\/i> Quality Level (0-100)<\/label>\n <input type=\"range\" id=\"quality\" min=\"0\" max=\"100\" value=\"80\">\n <div style=\"display: flex; justify-content: space-between; margin-top: 8px;\">\n <small>Lower Size<\/small>\n <span id=\"qualityValue\">80%<\/span>\n <small>Higher Quality<\/small>\n <\/div>\n <\/div>\n \n <div class=\"form-group\">\n <label for=\"exifHandling\"><i class=\"fas fa-camera\"><\/i> EXIF Data Handling<\/label>\n <select id=\"exifHandling\">\n <option value=\"keep\">Keep EXIF Data<\/option>\n <option value=\"remove\">Remove EXIF Data<\/option>\n <\/select>\n <div class=\"format-info\">EXIF data contains camera information and may affect privacy.<\/div>\n <\/div>\n <\/div>\n \n <div class=\"loading\" id=\"compressionLoading\">\n <div class=\"loading-spinner\"><\/div>\n <p>Processing image… <span id=\"progressStep\">Initializing<\/span><\/p>\n <progress id=\"compressionProgress\" value=\"0\" max=\"100\"><\/progress>\n <\/div>\n \n <div class=\"loading\" id=\"batchLoading\" style=\"display: none;\">\n <div class=\"loading-spinner\"><\/div>\n <p>Batch processing <span id=\"batchProgressCurrent\">0<\/span>\/<span id=\"batchProgressTotal\">0<\/span> images…<\/p>\n <progress id=\"batchProgress\" value=\"0\" max=\"100\"><\/progress>\n <\/div>\n \n <button class=\"btn btn-success\" id=\"compressBtn\" disabled><i class=\"fas fa-compress-arrows-alt\"><\/i> Compress Image<\/button>\n <button class=\"btn btn-info\" id=\"batchCompressBtn\" style=\"display: none;\"><i class=\"fas fa-tasks\"><\/i> Compress All (ZIP)<\/button>\n <button class=\"btn btn-success\" id=\"downloadZipBtn\" style=\"display: none;\"><i class=\"fas fa-file-archive\"><\/i> Download All as ZIP<\/button>\n <div class=\"success-message\" id=\"compressionSuccess\" style=\"display: none;\"><i class=\"fas fa-check-circle\"><\/i> <span><\/span><\/div>\n <div class=\"warning-message\" id=\"batchWarning\" style=\"display: none;\"><i class=\"fas fa-exclamation-triangle\"><\/i> <span><\/span><\/div>\n <\/div>\n \n <div class=\"card preview-section\">\n <h2 class=\"section-title\"><i class=\"fas fa-eye\"><\/i> Preview<\/h2>\n <div class=\"preview-container\">\n <div class=\"preview-box\">\n <h3 class=\"preview-title\">Original Image<\/h3>\n <img decoding=\"async\" id=\"originalPreview\" class=\"image-preview\" src=\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='400' height='200' viewBox='0 0 400 200'%3E%3Crect width='400' height='200' fill='%23f8f9fa'\/%3E%3Cpath d='M150 100 L200 70 L250 100 L300 50' stroke='%234a6fa5' stroke-width='4' fill='none'\/%3E%3Ccircle cx='150' cy='100' r='10' fill='%235d8a82'\/%3E%3Ccircle cx='200' cy='70' r='10' fill='%235d8a82'\/%3E%3Ccircle cx='250' cy='100' r='10' fill='%235d8a82'\/%3E%3Ccircle cx='300' cy='50' r='10' fill='%235d8a82'\/%3E%3C\/svg%3E\" alt=\"Original Preview\">\n <div class=\"image-info\">\n <div>Size: <span id=\"originalSize\">0 KB<\/span><\/div>\n <div>Dimensions: <span id=\"originalDimensions\">0 x 0<\/span><\/div>\n <div>Type: <span id=\"originalType\">–<\/span><\/div>\n <\/div>\n <\/div>\n \n <div class=\"preview-box\">\n <h3 class=\"preview-title\">Compressed Image<\/h3>\n <img decoding=\"async\" id=\"compressedPreview\" class=\"image-preview\" src=\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='400' height='200' viewBox='0 0 400 200'%3E%3Crect width='400' height='200' fill='%23f8f9fa'\/%3E%3Cpath d='M150 100 L200 70 L250 100 L300 50' stroke='%234a6fa5' stroke-width='4' fill='none'\/%3E%3Ccircle cx='150' cy='100' r='10' fill='%235d8a82'\/%3E%3Ccircle cx='200' cy='70' r='10' fill='%235d8a82'\/%3E%3Ccircle cx='250' cy='100' r='10' fill='%235d8a82'\/%3E%3Ccircle cx='300' cy='50' r='10' fill='%235d8a82'\/%3E%3C\/svg%3E\" alt=\"Compressed Preview\">\n <div class=\"image-info\">\n <div>Size: <span id=\"compressedSize\">0 KB<\/span><\/div>\n <div>Dimensions: <span id=\"compressedDimensions\">0 x 0<\/span><\/div>\n <div>Type: <span id=\"compressedType\">–<\/span><\/div>\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"compression-info\">\n <i class=\"fas fa-chart-line\"><\/i> Size Reduction: <span id=\"sizeReduction\" class=\"size-reduction\">0%<\/span>\n <\/div>\n \n <div class=\"exif-data\" id=\"exifContainer\" style=\"display: none;\">\n <h4>EXIF Data<\/h4>\n <table id=\"exifTable\">\n <!-- EXIF data will be populated here -->\n <\/table>\n <\/div>\n \n <div class=\"action-buttons\">\n <button class=\"btn\" id=\"downloadBtn\" disabled><i class=\"fas fa-download\"><\/i> Download Compressed Image<\/button>\n <button class=\"btn btn-warning\" id=\"newImageBtn\"><i class=\"fas fa-plus-circle\"><\/i> Process New Image<\/button>\n <button class=\"btn btn-danger\" id=\"resetBtn\"><i class=\"fas fa-redo\"><\/i> Reset All<\/button>\n <\/div>\n \n <div class=\"history-panel\" id=\"historyPanel\" style=\"display: none;\">\n <h4>Recent Compressions<\/h4>\n <div id=\"historyList\"><\/div>\n <\/div>\n <\/div>\n <\/div>\n \n <footer>\n <p>\u00a9 <span id=\"currentYear\"><\/span> Pixlop.com | All rights reserved<\/p>\n <p style=\"margin-top: 10px; font-size: 0.85rem;\">Designed with <i class=\"fas fa-heart\" style=\"color: #e74c3c;\"><\/i> for easy image compression<\/p>\n <\/footer>\n <\/div>\n\n <script>\n \/\/ Set current year in footer\n document.getElementById('currentYear').textContent = new Date().getFullYear();\n \n \/\/ DOM Elements\n const fileInput = document.getElementById('fileInput');\n const browseBtn = document.getElementById('browseBtn');\n const dropArea = document.getElementById('dropArea');\n const uploadError = document.getElementById('uploadError');\n const uploadWarning = document.getElementById('uploadWarning');\n const outputFormat = document.getElementById('outputFormat');\n const formatInfo = document.getElementById('formatInfo');\n const resizeType = document.getElementById('resizeType');\n const resizeValue = document.getElementById('resizeValue');\n const pixelInputs = document.getElementById('pixelInputs');\n const pixelWidth = document.getElementById('pixelWidth');\n const pixelHeight = document.getElementById('pixelHeight');\n const cmInputs = document.getElementById('cmInputs');\n const cmWidth = document.getElementById('cmWidth');\n const cmHeight = document.getElementById('cmHeight');\n const inchInputs = document.getElementById('inchInputs');\n const inchWidth = document.getElementById('inchWidth');\n const inchHeight = document.getElementById('inchHeight');\n const aspectRatioContainer = document.getElementById('aspectRatioContainer');\n const preserveAspect = document.getElementById('preserveAspect');\n const dpiContainer = document.getElementById('dpiContainer');\n const dpiValue = document.getElementById('dpiValue');\n const quality = document.getElementById('quality');\n const qualityValue = document.getElementById('qualityValue');\n const compressionLoading = document.getElementById('compressionLoading');\n const progressStep = document.getElementById('progressStep');\n const compressionProgress = document.getElementById('compressionProgress');\n const compressBtn = document.getElementById('compressBtn');\n const compressionSuccess = document.getElementById('compressionSuccess');\n const originalPreview = document.getElementById('originalPreview');\n const originalSize = document.getElementById('originalSize');\n const originalDimensions = document.getElementById('originalDimensions');\n const originalType = document.getElementById('originalType');\n const compressedPreview = document.getElementById('compressedPreview');\n const compressedSize = document.getElementById('compressedSize');\n const compressedDimensions = document.getElementById('compressedDimensions');\n const compressedType = document.getElementById('compressedType');\n const sizeReduction = document.getElementById('sizeReduction');\n const downloadBtn = document.getElementById('downloadBtn');\n const newImageBtn = document.getElementById('newImageBtn');\n const resetBtn = document.getElementById('resetBtn');\n const batchMode = document.getElementById('batchMode');\n const batchFilesContainer = document.getElementById('batchFilesContainer');\n const batchFilesList = document.getElementById('batchFilesList');\n const batchCount = document.getElementById('batchCount');\n const batchCompressBtn = document.getElementById('batchCompressBtn');\n const downloadZipBtn = document.getElementById('downloadZipBtn');\n const batchLoading = document.getElementById('batchLoading');\n const batchProgressCurrent = document.getElementById('batchProgressCurrent');\n const batchProgressTotal = document.getElementById('batchProgressTotal');\n const batchProgress = document.getElementById('batchProgress');\n const batchWarning = document.getElementById('batchWarning');\n const singleFileContainer = document.getElementById('singleFileContainer');\n const singleFileInfo = document.getElementById('singleFileInfo');\n const presetButtons = document.querySelectorAll('[data-preset]');\n const exifHandling = document.getElementById('exifHandling');\n const exifContainer = document.getElementById('exifContainer');\n const exifTable = document.getElementById('exifTable');\n const historyPanel = document.getElementById('historyPanel');\n const historyList = document.getElementById('historyList');\n\n \/\/ State variables\n let originalImage = null;\n let compressedImageData = null;\n let originalImageData = {\n width: 0,\n height: 0,\n size: 0,\n type: '',\n file: null\n };\n let batchFiles = [];\n let batchCompressedResults = [];\n let compressionHistory = [];\n\n \/\/ Helper: get safe mime type\n function getSafeMimeType(requestedFormat) {\n const format = requestedFormat.toLowerCase();\n const mimeMap = {\n 'jpeg': 'image\/jpeg',\n 'jpg': 'image\/jpeg',\n 'png': 'image\/png',\n 'webp': 'image\/webp',\n 'bmp': 'image\/bmp',\n 'tiff': 'image\/tiff'\n };\n let mime = mimeMap[format] || 'image\/png';\n if (format === 'bmp' || format === 'tiff') {\n console.warn(`Format ${format} may not be supported. Falling back to PNG.`);\n return 'image\/png';\n }\n return mime;\n }\n\n \/\/ Core compression from HTMLImageElement\n function compressImageFromElement(img, settings, originalFilename = 'image') {\n return new Promise((resolve, reject) => {\n let newWidth, newHeight;\n const type = settings.resizeType;\n \n if (type === 'percentage') {\n const ratio = parseInt(settings.resizeValue) \/ 100;\n newWidth = Math.round(img.width * ratio);\n newHeight = Math.round(img.height * ratio);\n } else if (type === 'pixel') {\n newWidth = parseInt(settings.pixelWidth) || img.width;\n newHeight = parseInt(settings.pixelHeight) || img.height;\n \n if (settings.preserveAspect) {\n const ratio = img.width \/ img.height;\n if (newWidth && !newHeight) {\n newHeight = Math.round(newWidth \/ ratio);\n } else if (!newWidth && newHeight) {\n newWidth = Math.round(newHeight * ratio);\n } else if (newWidth && newHeight) {\n const targetRatio = newWidth \/ newHeight;\n if (ratio > targetRatio) {\n newHeight = Math.round(newWidth \/ ratio);\n } else {\n newWidth = Math.round(newHeight * ratio);\n }\n }\n }\n } else if (type === 'cm' || type === 'inches') {\n const dpi = parseInt(settings.dpiValue) || 96;\n let widthInInches, heightInInches;\n \n if (type === 'cm') {\n widthInInches = (parseFloat(settings.cmWidth) || 0) \/ 2.54;\n heightInInches = (parseFloat(settings.cmHeight) || 0) \/ 2.54;\n } else {\n widthInInches = parseFloat(settings.inchWidth) || 0;\n heightInInches = parseFloat(settings.inchHeight) || 0;\n }\n \n newWidth = Math.round(widthInInches * dpi);\n newHeight = Math.round(heightInInches * dpi);\n \n if (settings.preserveAspect && newWidth && newHeight) {\n const ratio = img.width \/ img.height;\n const targetRatio = newWidth \/ newHeight;\n if (ratio > targetRatio) {\n newHeight = Math.round(newWidth \/ ratio);\n } else {\n newWidth = Math.round(newHeight * ratio);\n }\n }\n }\n \n newWidth = Math.min(newWidth || img.width, 10000);\n newHeight = Math.min(newHeight || img.height, 10000);\n if (newWidth <= 0) newWidth = img.width;\n if (newHeight <= 0) newHeight = img.height;\n \n const canvas = document.createElement('canvas');\n canvas.width = newWidth;\n canvas.height = newHeight;\n const ctx = canvas.getContext('2d');\n ctx.drawImage(img, 0, 0, newWidth, newHeight);\n \n const mimeType = getSafeMimeType(settings.outputFormat);\n const qualityLevel = parseInt(settings.quality) \/ 100;\n \n canvas.toBlob((blob) => {\n if (!blob) {\n reject(new Error('Compression failed: could not create blob'));\n return;\n }\n resolve({\n blob,\n filename: originalFilename,\n width: newWidth,\n height: newHeight,\n size: blob.size,\n type: settings.outputFormat\n });\n }, mimeType, qualityLevel);\n });\n }\n\n \/\/ Compression from File object\n function compressImageFile(file, settings) {\n return new Promise((resolve, reject) => {\n const reader = new FileReader();\n reader.onload = (e) => {\n const img = new Image();\n img.onload = () => {\n compressImageFromElement(img, settings, file.name)\n .then(resolve)\n .catch(reject);\n };\n img.onerror = () => reject(new Error('Failed to load image: ' + file.name));\n img.src = e.target.result;\n };\n reader.onerror = () => reject(new Error('Failed to read file: ' + file.name));\n reader.readAsDataURL(file);\n });\n }\n\n \/\/ Event Listeners\n browseBtn.addEventListener('click', () => fileInput.click());\n fileInput.addEventListener('change', handleFileSelect);\n dropArea.addEventListener('dragover', handleDragOver);\n dropArea.addEventListener('dragleave', handleDragLeave);\n dropArea.addEventListener('drop', handleDrop);\n outputFormat.addEventListener('change', updateFormatInfo);\n resizeType.addEventListener('change', handleResizeTypeChange);\n quality.addEventListener('input', updateQualityValue);\n compressBtn.addEventListener('click', compressSingle);\n downloadBtn.addEventListener('click', downloadSingle);\n newImageBtn.addEventListener('click', resetImage);\n resetBtn.addEventListener('click', resetAll);\n batchMode.addEventListener('change', toggleBatchMode);\n batchCompressBtn.addEventListener('click', compressBatch);\n downloadZipBtn.addEventListener('click', downloadZip);\n presetButtons.forEach(btn => btn.addEventListener('click', applyPreset));\n\n pixelWidth.addEventListener('input', () => handleDimensionChange('pixel'));\n pixelHeight.addEventListener('input', () => handleDimensionChange('pixel'));\n cmWidth.addEventListener('input', () => handleDimensionChange('cm'));\n cmHeight.addEventListener('input', () => handleDimensionChange('cm'));\n inchWidth.addEventListener('input', () => handleDimensionChange('inches'));\n inchHeight.addEventListener('input', () => handleDimensionChange('inches'));\n\n \/\/ Initialize\n updateFormatInfo();\n updateQualityValue();\n handleResizeTypeChange();\n loadHistory();\n\n \/\/ Set batch mode ON by default and call toggle\n batchMode.checked = true;\n toggleBatchMode();\n\n \/\/ UI Functions\n function handleDragOver(e) {\n e.preventDefault();\n dropArea.classList.add('active');\n }\n\n function handleDragLeave(e) {\n e.preventDefault();\n dropArea.classList.remove('active');\n }\n\n function handleDrop(e) {\n e.preventDefault();\n dropArea.classList.remove('active');\n if (e.dataTransfer.files.length) {\n fileInput.files = e.dataTransfer.files;\n handleFileSelect();\n }\n }\n\n function handleFileSelect() {\n const files = fileInput.files;\n if (!files.length) return;\n \n if (batchMode.checked) {\n processBatchFiles(Array.from(files).slice(0, 50));\n if (files.length > 50) {\n showMessage(uploadWarning, 'Only the first 50 images will be processed.');\n }\n singleFileContainer.style.display = 'none';\n } else {\n processSingleFile(files[0]);\n batchFilesContainer.style.display = 'none';\n batchCompressBtn.style.display = 'none';\n compressBtn.style.display = 'block';\n downloadZipBtn.style.display = 'none';\n }\n }\n\n function processSingleFile(file) {\n if (!file.type.match('image.*')) {\n showMessage(uploadError, 'Please select an image file (JPEG, PNG, etc.)');\n return;\n }\n if (file.size > 20 * 1024 * 1024) {\n showMessage(uploadError, 'Image size should be less than 20MB');\n return;\n }\n hideMessage(uploadError);\n hideMessage(uploadWarning);\n \n const reader = new FileReader();\n reader.onload = (e) => {\n const img = new Image();\n img.onload = () => {\n originalImage = img;\n originalPreview.src = e.target.result;\n \n originalImageData.width = img.width;\n originalImageData.height = img.height;\n originalImageData.size = file.size;\n originalImageData.type = file.type.split('\/')[1].toUpperCase();\n originalImageData.file = file;\n \n originalDimensions.textContent = `${img.width} x ${img.height}`;\n originalSize.textContent = formatFileSize(file.size);\n originalType.textContent = originalImageData.type;\n \n if (resizeType.value === 'pixel') {\n pixelWidth.value = img.width;\n pixelHeight.value = img.height;\n }\n \n compressBtn.disabled = false;\n extractEXIFData(file);\n \n \/\/ Show selected file info in single mode container\n singleFileContainer.style.display = 'block';\n singleFileInfo.innerHTML = `\n <div class=\"file-item\">\n <div class=\"file-info\">\n <img decoding=\"async\" src=\"${e.target.result}\" class=\"file-thumb\" alt=\"${file.name}\">\n <span class=\"file-name\" title=\"${file.name}\">${file.name}<\/span>\n <\/div>\n <div class=\"file-status\">Ready<\/div>\n <\/div>\n `;\n };\n img.onerror = () => showMessage(uploadError, 'Failed to load the image.');\n img.src = e.target.result;\n };\n reader.readAsDataURL(file);\n }\n\n function processBatchFiles(files) {\n batchFiles = files;\n batchFilesList.innerHTML = '';\n batchCount.textContent = files.length;\n \n files.forEach((file, index) => {\n const reader = new FileReader();\n reader.onload = (e) => {\n const fileItem = document.createElement('div');\n fileItem.className = 'file-item';\n fileItem.dataset.index = index;\n fileItem.innerHTML = `\n <div class=\"file-info\">\n <img decoding=\"async\" src=\"${e.target.result}\" class=\"file-thumb\" alt=\"${file.name}\">\n <span class=\"file-name\" title=\"${file.name}\">${file.name}<\/span>\n <\/div>\n <div class=\"file-status\" id=\"batch-status-${index}\">Pending<\/div>\n `;\n batchFilesList.appendChild(fileItem);\n };\n reader.readAsDataURL(file);\n });\n \n if (batchFiles.length > 0) {\n batchFilesContainer.style.display = 'block';\n batchCompressBtn.style.display = 'block';\n compressBtn.style.display = 'none';\n downloadZipBtn.style.display = 'none';\n singleFileContainer.style.display = 'none';\n } else {\n batchFilesContainer.style.display = 'none';\n batchCompressBtn.style.display = 'none';\n compressBtn.style.display = 'block';\n }\n }\n\n function toggleBatchMode() {\n if (batchMode.checked) {\n batchFilesContainer.style.display = batchFiles.length ? 'block' : 'none';\n fileInput.setAttribute('multiple', 'multiple');\n resetImage();\n downloadBtn.style.display = 'none';\n downloadZipBtn.style.display = 'none';\n singleFileContainer.style.display = 'none';\n if (batchFiles.length) {\n batchCompressBtn.style.display = 'block';\n compressBtn.style.display = 'none';\n } else {\n batchCompressBtn.style.display = 'none';\n compressBtn.style.display = 'block';\n }\n } else {\n batchFilesContainer.style.display = 'none';\n fileInput.removeAttribute('multiple');\n batchCompressBtn.style.display = 'none';\n compressBtn.style.display = 'block';\n downloadZipBtn.style.display = 'none';\n downloadBtn.style.display = 'inline-flex';\n resetImage();\n batchFiles = [];\n batchCompressedResults = [];\n }\n }\n\n function handleResizeTypeChange() {\n const type = resizeType.value;\n document.getElementById('percentageInput').style.display = 'none';\n pixelInputs.style.display = 'none';\n cmInputs.style.display = 'none';\n inchInputs.style.display = 'none';\n aspectRatioContainer.style.display = 'none';\n dpiContainer.style.display = 'none';\n \n if (type === 'percentage') {\n document.getElementById('percentageInput').style.display = 'block';\n } else if (type === 'pixel') {\n pixelInputs.style.display = 'flex';\n aspectRatioContainer.style.display = 'flex';\n } else if (type === 'cm' || type === 'inches') {\n if (type === 'cm') cmInputs.style.display = 'flex';\n else inchInputs.style.display = 'flex';\n aspectRatioContainer.style.display = 'flex';\n dpiContainer.style.display = 'block';\n }\n }\n\n function handleDimensionChange(type) {\n if (!preserveAspect.checked || !originalImage) return;\n const ratio = originalImage.width \/ originalImage.height;\n let widthInput, heightInput;\n \n if (type === 'pixel') {\n widthInput = pixelWidth;\n heightInput = pixelHeight;\n } else if (type === 'cm') {\n widthInput = cmWidth;\n heightInput = cmHeight;\n } else {\n widthInput = inchWidth;\n heightInput = inchHeight;\n }\n \n const active = document.activeElement;\n if (active === widthInput && widthInput.value) {\n if (type === 'pixel') {\n heightInput.value = Math.round(widthInput.value \/ ratio);\n } else {\n heightInput.value = (widthInput.value \/ ratio).toFixed(1);\n }\n } else if (active === heightInput && heightInput.value) {\n if (type === 'pixel') {\n widthInput.value = Math.round(heightInput.value * ratio);\n } else {\n widthInput.value = (heightInput.value * ratio).toFixed(1);\n }\n }\n }\n\n function updateFormatInfo() {\n const format = outputFormat.value;\n const infoMap = {\n 'jpeg': '<strong>JPEG<\/strong>: Best for photographs, smaller file size',\n 'png': '<strong>PNG<\/strong>: Lossless format, supports transparency',\n 'webp': '<strong>WEBP<\/strong>: Modern format, excellent compression',\n 'bmp': '<strong>BMP<\/strong>: Uncompressed format, large file size (may fallback to PNG)',\n 'tiff': '<strong>TIFF<\/strong>: High quality, suitable for printing (may fallback to PNG)'\n };\n formatInfo.innerHTML = infoMap[format] || '';\n }\n\n function updateQualityValue() {\n qualityValue.textContent = `${quality.value}%`;\n }\n\n function applyPreset(e) {\n const preset = e.target.dataset.preset;\n switch(preset) {\n case 'web':\n resizeType.value = 'pixel';\n handleResizeTypeChange();\n dpiValue.value = '72';\n quality.value = '75';\n updateQualityValue();\n break;\n case 'print':\n resizeType.value = 'inches';\n handleResizeTypeChange();\n dpiValue.value = '300';\n quality.value = '95';\n updateQualityValue();\n break;\n case 'social':\n resizeType.value = 'pixel';\n handleResizeTypeChange();\n pixelWidth.value = '1080';\n preserveAspect.checked = true;\n quality.value = '85';\n updateQualityValue();\n break;\n case 'email':\n resizeType.value = 'percentage';\n handleResizeTypeChange();\n resizeValue.value = '50';\n quality.value = '70';\n updateQualityValue();\n break;\n }\n }\n\n function extractEXIFData(file) {\n exifContainer.style.display = 'none';\n exifTable.innerHTML = '';\n const simulatedEXIF = {\n 'Make': 'Camera Manufacturer',\n 'Model': 'Camera Model',\n 'Date': new Date(file.lastModified).toLocaleString(),\n 'Resolution': `${originalImageData.width} x ${originalImageData.height}`,\n 'File Size': formatFileSize(file.size)\n };\n exifContainer.style.display = 'block';\n for (const key in simulatedEXIF) {\n const row = document.createElement('tr');\n row.innerHTML = `<td>${key}<\/td><td>${simulatedEXIF[key]}<\/td>`;\n exifTable.appendChild(row);\n }\n }\n\n \/\/ Single compression\n async function compressSingle() {\n if (!originalImage) {\n showMessage(uploadError, 'Please upload an image first');\n return;\n }\n \n compressionLoading.style.display = 'block';\n progressStep.textContent = 'Compressing...';\n compressionProgress.value = 30;\n \n const settings = {\n resizeType: resizeType.value,\n resizeValue: resizeValue.value,\n pixelWidth: pixelWidth.value,\n pixelHeight: pixelHeight.value,\n cmWidth: cmWidth.value,\n cmHeight: cmHeight.value,\n inchWidth: inchWidth.value,\n inchHeight: inchHeight.value,\n preserveAspect: preserveAspect.checked,\n dpiValue: dpiValue.value,\n outputFormat: outputFormat.value,\n quality: quality.value\n };\n \n try {\n const result = await compressImageFromElement(originalImage, settings, 'image');\n compressedImageData = result;\n \n const url = URL.createObjectURL(result.blob);\n compressedPreview.src = url;\n compressedDimensions.textContent = `${result.width} x ${result.height}`;\n compressedSize.textContent = formatFileSize(result.size);\n compressedType.textContent = result.type.toUpperCase();\n \n const reduction = Math.round((1 - (result.size \/ originalImageData.size)) * 100);\n sizeReduction.textContent = `${reduction}%`;\n \n downloadBtn.disabled = false;\n showMessage(compressionSuccess, `Image compressed! Size reduced by ${reduction}%`);\n \n compressionLoading.style.display = 'none';\n compressionProgress.value = 100;\n \n addToHistory(originalImageData, result);\n } catch (error) {\n console.error(error);\n showMessage(uploadError, 'Compression failed: ' + error.message);\n compressionLoading.style.display = 'none';\n }\n }\n\n function downloadSingle() {\n if (!compressedImageData) return;\n const a = document.createElement('a');\n a.href = URL.createObjectURL(compressedImageData.blob);\n a.download = `compressed-image.${compressedImageData.type}`;\n document.body.appendChild(a);\n a.click();\n document.body.removeChild(a);\n URL.revokeObjectURL(a.href);\n }\n\n \/\/ Batch compression with concurrency limit (4 at a time)\n async function compressBatch() {\n if (batchFiles.length === 0) {\n showMessage(batchWarning, 'No images to process.');\n return;\n }\n \n batchCompressBtn.disabled = true;\n downloadZipBtn.style.display = 'none';\n batchLoading.style.display = 'block';\n batchProgressTotal.textContent = batchFiles.length;\n batchProgressCurrent.textContent = '0';\n batchProgress.value = 0;\n hideMessage(batchWarning);\n \n const settings = {\n resizeType: resizeType.value,\n resizeValue: resizeValue.value,\n pixelWidth: pixelWidth.value,\n pixelHeight: pixelHeight.value,\n cmWidth: cmWidth.value,\n cmHeight: cmHeight.value,\n inchWidth: inchWidth.value,\n inchHeight: inchHeight.value,\n preserveAspect: preserveAspect.checked,\n dpiValue: dpiValue.value,\n outputFormat: outputFormat.value,\n quality: quality.value\n };\n \n batchCompressedResults = [];\n let successCount = 0;\n \n const files = batchFiles;\n const results = new Array(files.length);\n \n async function runWithConcurrency(tasks, limit) {\n const queue = [];\n for (let i = 0; i < tasks.length; i++) {\n const task = tasks[i];\n const promise = task().then(result => {\n results[i] = result;\n }).catch(error => {\n results[i] = { error };\n });\n queue.push(promise);\n if (queue.length >= limit) {\n await Promise.race(queue);\n while (queue.length && queue[0].status === 'fulfilled') {\n queue.shift();\n }\n }\n }\n await Promise.all(queue);\n }\n \n const tasks = files.map((file, i) => async () => {\n const statusEl = document.getElementById(`batch-status-${i}`);\n if (statusEl) statusEl.textContent = 'Processing';\n \n try {\n const result = await compressImageFile(file, settings);\n batchCompressedResults.push(result);\n if (statusEl) {\n statusEl.textContent = 'Done';\n statusEl.classList.add('success');\n }\n successCount++;\n return result;\n } catch (error) {\n console.error(error);\n if (statusEl) {\n statusEl.textContent = 'Error';\n statusEl.classList.add('error');\n }\n throw error;\n } finally {\n batchProgressCurrent.textContent = i + 1;\n batchProgress.value = ((i + 1) \/ files.length) * 100;\n }\n });\n \n await runWithConcurrency(tasks, 4);\n \n batchLoading.style.display = 'none';\n batchCompressBtn.disabled = false;\n \n if (batchCompressedResults.length > 0) {\n downloadZipBtn.style.display = 'block';\n showMessage(compressionSuccess, `Successfully compressed ${successCount} of ${batchFiles.length} images.`);\n } else {\n showMessage(batchWarning, 'No images could be compressed.');\n }\n }\n\n function downloadZip() {\n if (batchCompressedResults.length === 0) return;\n const zip = new JSZip();\n batchCompressedResults.forEach((item, idx) => {\n const ext = outputFormat.value;\n const base = item.filename.substring(0, item.filename.lastIndexOf('.')) || `image_${idx+1}`;\n zip.file(`${base}_compressed.${ext}`, item.blob);\n });\n zip.generateAsync({ type: 'blob' }).then(content => {\n const a = document.createElement('a');\n a.href = URL.createObjectURL(content);\n a.download = `compressed_images_${Date.now()}.zip`;\n document.body.appendChild(a);\n a.click();\n document.body.removeChild(a);\n URL.revokeObjectURL(a.href);\n });\n }\n\n \/\/ Reset functions\n function resetImage() {\n fileInput.value = '';\n originalPreview.src = 'data:image\/svg+xml,%3Csvg xmlns=\\'http:\/\/www.w3.org\/2000\/svg\\' width=\\'400\\' height=\\'200\\' viewBox=\\'0 0 400 200\\'%3E%3Crect width=\\'400\\' height=\\'200\\' fill=\\'%23f8f9fa\\'\/%3E%3Cpath d=\\'M150 100 L200 70 L250 100 L300 50\\' stroke=\\'%234a6fa5\\' stroke-width=\\'4\\' fill=\\'none\\'\/%3E%3Ccircle cx=\\'150\\' cy=\\'100\\' r=\\'10\\' fill=\\'%235d8a82\\'\/%3E%3Ccircle cx=\\'200\\' cy=\\'70\\' r=\\'10\\' fill=\\'%235d8a82\\'\/%3E%3Ccircle cx=\\'250\\' cy=\\'100\\' r=\\'10\\' fill=\\'%235d8a82\\'\/%3E%3Ccircle cx=\\'300\\' cy=\\'50\\' r=\\'10\\' fill=\\'%235d8a82\\'\/%3E%3C\/svg%3E';\n compressedPreview.src = 'data:image\/svg+xml,%3Csvg xmlns=\\'http:\/\/www.w3.org\/2000\/svg\\' width=\\'400\\' height=\\'200\\' viewBox=\\'0 0 400 200\\'%3E%3Crect width=\\'400\\' height=\\'200\\' fill=\\'%23f8f9fa\\'\/%3E%3Cpath d=\\'M150 100 L200 70 L250 100 L300 50\\' stroke=\\'%234a6fa5\\' stroke-width=\\'4\\' fill=\\'none\\'\/%3E%3Ccircle cx=\\'150\\' cy=\\'100\\' r=\\'10\\' fill=\\'%235d8a82\\'\/%3E%3Ccircle cx=\\'200\\' cy=\\'70\\' r=\\'10\\' fill=\\'%235d8a82\\'\/%3E%3Ccircle cx=\\'250\\' cy=\\'100\\' r=\\'10\\' fill=\\'%235d8a82\\'\/%3E%3Ccircle cx=\\'300\\' cy=\\'50\\' r=\\'10\\' fill=\\'%235d8a82\\'\/%3E%3C\/svg%3E';\n originalSize.textContent = '0 KB';\n originalDimensions.textContent = '0 x 0';\n originalType.textContent = '-';\n compressedSize.textContent = '0 KB';\n compressedDimensions.textContent = '0 x 0';\n compressedType.textContent = '-';\n sizeReduction.textContent = '0%';\n originalImage = null;\n compressedImageData = null;\n compressBtn.disabled = true;\n downloadBtn.disabled = true;\n hideMessage(uploadError);\n hideMessage(uploadWarning);\n hideMessage(compressionSuccess);\n exifContainer.style.display = 'none';\n singleFileContainer.style.display = 'none';\n batchFilesContainer.style.display = 'none';\n batchCompressBtn.style.display = 'none';\n downloadZipBtn.style.display = 'none';\n compressBtn.style.display = 'block';\n batchFiles = [];\n batchCompressedResults = [];\n }\n\n function resetAll() {\n resetImage();\n outputFormat.value = 'jpeg';\n updateFormatInfo();\n resizeType.value = 'percentage';\n handleResizeTypeChange();\n resizeValue.value = '50';\n pixelWidth.value = '';\n pixelHeight.value = '';\n cmWidth.value = '';\n cmHeight.value = '';\n inchWidth.value = '';\n inchHeight.value = '';\n preserveAspect.checked = true;\n dpiValue.value = '96';\n quality.value = '80';\n updateQualityValue();\n batchMode.checked = true;\n toggleBatchMode();\n batchFilesList.innerHTML = '';\n batchFiles = [];\n batchCompressedResults = [];\n downloadZipBtn.style.display = 'none';\n singleFileContainer.style.display = 'none';\n }\n\n function addToHistory(original, compressed) {\n const item = {\n original: { width: original.width, height: original.height, size: original.size },\n compressed: { width: compressed.width, height: compressed.height, size: compressed.size },\n timestamp: Date.now(),\n reduction: Math.round((1 - compressed.size \/ original.size) * 100)\n };\n compressionHistory.unshift(item);\n if (compressionHistory.length > 5) compressionHistory.pop();\n localStorage.setItem('compressionHistory', JSON.stringify(compressionHistory));\n updateHistoryDisplay();\n }\n\n function loadHistory() {\n const saved = localStorage.getItem('compressionHistory');\n if (saved) {\n compressionHistory = JSON.parse(saved);\n updateHistoryDisplay();\n }\n }\n\n function updateHistoryDisplay() {\n if (compressionHistory.length === 0) {\n historyPanel.style.display = 'none';\n return;\n }\n historyPanel.style.display = 'block';\n historyList.innerHTML = '';\n compressionHistory.forEach(item => {\n const div = document.createElement('div');\n div.className = 'history-item';\n div.innerHTML = `\n <div class=\"history-info\">\n <img decoding=\"async\" src=\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Crect width='30' height='30' fill='%23f8f9fa'\/%3E%3Cpath d='M10 15 L15 10 L20 15 L25 5' stroke='%234a6fa5' stroke-width='2' fill='none'\/%3E%3Ccircle cx='10' cy='15' r='2' fill='%235d8a82'\/%3E%3Ccircle cx='15' cy='10' r='2' fill='%235d8a82'\/%3E%3Ccircle cx='20' cy='15' r='2' fill='%235d8a82'\/%3E%3Ccircle cx='25' cy='5' r='2' fill='%235d8a82'\/%3E%3C\/svg%3E\" class=\"history-thumb\">\n <div>\n <div>${item.original.width}x${item.original.height} \u2192 ${item.compressed.width}x${item.compressed.height}<\/div>\n <div style=\"font-size:0.8rem;color:var(--success);\">${item.reduction}% reduction<\/div>\n <\/div>\n <\/div>\n <div style=\"font-size:0.8rem;\">${new Date(item.timestamp).toLocaleTimeString()}<\/div>\n `;\n div.addEventListener('click', () => alert('History item clicked \u2013 would reload settings.'));\n historyList.appendChild(div);\n });\n }\n\n function showMessage(el, msg) {\n el.querySelector('span').textContent = msg;\n el.style.display = 'flex';\n }\n function hideMessage(el) { el.style.display = 'none'; }\n function formatFileSize(bytes) {\n if (bytes < 1024) return bytes + ' bytes';\n if (bytes < 1048576) return (bytes\/1024).toFixed(2) + ' KB';\n return (bytes\/1048576).toFixed(2) + ' MB';\n }\n <\/script>\n<\/body>\n<\/html>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Pixlop.com Pixlop.com Compress and resize your images online without losing quality. Support for multiple output formats, batch processing, and advanced editing options. Upload Image Drag & Drop your image here OR Browse Files Enable batch processing (up to 50 images) BULK Selected Files (0) Selected File Output Settings Output Format JPEGPNGWEBPBMPTIFF JPEG: Best for photographs, […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-34","page","type-page","status-publish","hentry"],"blocksy_meta":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.9 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>IMAGE RESIZER - Pixlop<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/pixlop.com\/?page_id=34\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"IMAGE RESIZER - Pixlop\" \/>\n<meta property=\"og:description\" content=\"Pixlop.com Pixlop.com Compress and resize your images online without losing quality. Support for multiple output formats, batch processing, and advanced editing options. Upload Image Drag & Drop your image here OR Browse Files Enable batch processing (up to 50 images) BULK Selected Files (0) Selected File Output Settings Output Format JPEGPNGWEBPBMPTIFF JPEG: Best for photographs, […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/pixlop.com\/?page_id=34\" \/>\n<meta property=\"og:site_name\" content=\"Pixlop\" \/>\n<meta property=\"og:image\" content=\"https:\/\/pixlop.com\/wp-content\/uploads\/2026\/07\/imresizer-Screenshot_20260701-141330_Chrome_2-removebg-preview-removebg-preview.png\" \/>\n\t<meta property=\"og:image:width\" content=\"666\" \/>\n\t<meta property=\"og:image:height\" content=\"375\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/pixlop.com\\\/?page_id=34\",\"url\":\"https:\\\/\\\/pixlop.com\\\/?page_id=34\",\"name\":\"IMAGE RESIZER - Pixlop\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/pixlop.com\\\/#website\"},\"datePublished\":\"2026-04-04T14:01:37+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/pixlop.com\\\/?page_id=34#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/pixlop.com\\\/?page_id=34\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/pixlop.com\\\/?page_id=34#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/pixlop.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"IMAGE RESIZER\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/pixlop.com\\\/#website\",\"url\":\"https:\\\/\\\/pixlop.com\\\/\",\"name\":\"Pixlop\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/pixlop.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/pixlop.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/pixlop.com\\\/#organization\",\"name\":\"Pixlop\",\"url\":\"https:\\\/\\\/pixlop.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/pixlop.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/pixlop.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/Screenshot_20260701-141330_Chrome_2-removebg-preview.png\",\"contentUrl\":\"https:\\\/\\\/pixlop.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/Screenshot_20260701-141330_Chrome_2-removebg-preview.png\",\"width\":548,\"height\":455,\"caption\":\"Pixlop\"},\"image\":{\"@id\":\"https:\\\/\\\/pixlop.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"IMAGE RESIZER - Pixlop","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/pixlop.com\/?page_id=34","og_locale":"en_US","og_type":"article","og_title":"IMAGE RESIZER - Pixlop","og_description":"Pixlop.com Pixlop.com Compress and resize your images online without losing quality. Support for multiple output formats, batch processing, and advanced editing options. Upload Image Drag & Drop your image here OR Browse Files Enable batch processing (up to 50 images) BULK Selected Files (0) Selected File Output Settings Output Format JPEGPNGWEBPBMPTIFF JPEG: Best for photographs, […]","og_url":"https:\/\/pixlop.com\/?page_id=34","og_site_name":"Pixlop","og_image":[{"width":666,"height":375,"url":"https:\/\/pixlop.com\/wp-content\/uploads\/2026\/07\/imresizer-Screenshot_20260701-141330_Chrome_2-removebg-preview-removebg-preview.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/pixlop.com\/?page_id=34","url":"https:\/\/pixlop.com\/?page_id=34","name":"IMAGE RESIZER - Pixlop","isPartOf":{"@id":"https:\/\/pixlop.com\/#website"},"datePublished":"2026-04-04T14:01:37+00:00","breadcrumb":{"@id":"https:\/\/pixlop.com\/?page_id=34#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/pixlop.com\/?page_id=34"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/pixlop.com\/?page_id=34#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/pixlop.com\/"},{"@type":"ListItem","position":2,"name":"IMAGE RESIZER"}]},{"@type":"WebSite","@id":"https:\/\/pixlop.com\/#website","url":"https:\/\/pixlop.com\/","name":"Pixlop","description":"","publisher":{"@id":"https:\/\/pixlop.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/pixlop.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/pixlop.com\/#organization","name":"Pixlop","url":"https:\/\/pixlop.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/pixlop.com\/#\/schema\/logo\/image\/","url":"https:\/\/pixlop.com\/wp-content\/uploads\/2026\/07\/Screenshot_20260701-141330_Chrome_2-removebg-preview.png","contentUrl":"https:\/\/pixlop.com\/wp-content\/uploads\/2026\/07\/Screenshot_20260701-141330_Chrome_2-removebg-preview.png","width":548,"height":455,"caption":"Pixlop"},"image":{"@id":"https:\/\/pixlop.com\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/pixlop.com\/index.php?rest_route=\/wp\/v2\/pages\/34","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pixlop.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/pixlop.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/pixlop.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pixlop.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=34"}],"version-history":[{"count":0,"href":"https:\/\/pixlop.com\/index.php?rest_route=\/wp\/v2\/pages\/34\/revisions"}],"wp:attachment":[{"href":"https:\/\/pixlop.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=34"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}