Pixlop.com | Image Optimizer<\/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 \/* RESET & BASE \u2013 isolated inside .pixlop-container to avoid WordPress conflicts *\/\n .pixlop-container * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n }\n .pixlop-container {\n max-width: 1200px;\n margin: 0 auto;\n width: 100%;\n background: transparent;\n }\n .pixlop-container .card {\n background: white;\n border-radius: 12px;\n padding: 25px;\n box-shadow: 0 8px 20px rgba(0,0,0,0.08);\n margin-bottom: 25px;\n }\n .pixlop-container .section-title {\n font-size: 1.4rem;\n margin-bottom: 20px;\n color: #4a6fa5;\n padding-bottom: 12px;\n border-bottom: 2px solid #e9ecef;\n display: flex;\n align-items: center;\n gap: 10px;\n }\n .pixlop-container .form-group {\n margin-bottom: 20px;\n }\n .pixlop-container label {\n display: block;\n margin-bottom: 8px;\n font-weight: 600;\n color: #343a40;\n }\n .pixlop-container select, \n .pixlop-container input[type=\"number\"],\n .pixlop-container input[type=\"text\"] {\n width: 100%;\n padding: 12px;\n border: 2px solid #e9ecef;\n border-radius: 8px;\n font-size: 1rem;\n background: #f8f9fa;\n }\n .pixlop-container .dimension-inputs {\n display: flex;\n gap: 12px;\n margin-top: 12px;\n }\n .pixlop-container .dimension-inputs > div {\n flex: 1;\n }\n .pixlop-container .preserve-aspect {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 10px;\n background: #f8f9fa;\n border-radius: 8px;\n margin-top: 12px;\n }\n .pixlop-container .dpi-settings {\n background: #f8f9fa;\n padding: 12px;\n border-radius: 8px;\n margin-top: 12px;\n border-left: 4px solid #4a6fa5;\n }\n .pixlop-container .option-group {\n background: #f8f9fa;\n padding: 18px;\n border-radius: 10px;\n margin-bottom: 20px;\n }\n .pixlop-container .option-group-title {\n font-size: 1rem;\n margin-bottom: 12px;\n color: #4a6fa5;\n display: flex;\n align-items: center;\n gap: 8px;\n }\n .pixlop-container .btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n padding: 12px 24px;\n background: #4a6fa5;\n color: white;\n border: none;\n border-radius: 8px;\n cursor: pointer;\n font-size: 1rem;\n font-weight: 600;\n transition: all 0.3s ease;\n }\n .pixlop-container .btn:hover {\n background: #6c8fc7;\n transform: translateY(-2px);\n }\n .pixlop-container .btn-success { background: #28a745; }\n .pixlop-container .btn-success:hover { background: #218838; }\n .pixlop-container .btn-info { background: #17a2b8; }\n .pixlop-container .btn-secondary { background: #5d8a82; }\n .pixlop-container .btn-warning { background: #f39c12; }\n .pixlop-container .btn-danger { background: #e74c3c; }\n .pixlop-container .btn-sm { padding: 8px 16px; font-size: 0.9rem; }\n .pixlop-container .preset-buttons {\n display: flex;\n flex-wrap: wrap;\n gap: 10px;\n margin-top: 15px;\n }\n .pixlop-container .image-edit-tools {\n display: flex;\n gap: 10px;\n flex-wrap: wrap;\n margin-top: 15px;\n }\n .pixlop-container .preview-container {\n display: flex;\n flex-wrap: wrap;\n gap: 20px;\n margin-top: 20px;\n }\n .pixlop-container .preview-box {\n flex: 1;\n min-width: 250px;\n text-align: center;\n background: #f8f9fa;\n padding: 18px;\n border-radius: 12px;\n }\n .pixlop-container .image-preview {\n max-width: 100%;\n max-height: 280px;\n border-radius: 8px;\n margin-bottom: 15px;\n background: white;\n padding: 8px;\n object-fit: contain;\n }\n .pixlop-container .image-info {\n background: #e9ecef;\n padding: 10px;\n border-radius: 8px;\n font-size: 0.9rem;\n }\n .pixlop-container .action-buttons {\n display: flex;\n gap: 12px;\n margin-top: 25px;\n flex-wrap: wrap;\n }\n .pixlop-container .compression-info {\n background: #f8f9fa;\n padding: 18px;\n border-radius: 12px;\n margin-top: 20px;\n text-align: center;\n border-left: 4px solid #28a745;\n }\n .pixlop-container .size-reduction {\n font-weight: bold;\n color: #28a745;\n font-size: 1.2rem;\n }\n .pixlop-container .drop-area {\n border: 3px dashed #ced4da;\n border-radius: 8px;\n padding: 35px 20px;\n text-align: center;\n cursor: pointer;\n background: #f8f9fa;\n margin-bottom: 20px;\n }\n .pixlop-container .drop-area:hover {\n border-color: #4a6fa5;\n background: rgba(74,111,165,0.05);\n }\n .pixlop-container .selected-files-container {\n margin-top: 15px;\n max-height: 250px;\n overflow-y: auto;\n border: 1px solid #ced4da;\n border-radius: 8px;\n padding: 10px;\n background: #f8f9fa;\n }\n .pixlop-container .file-item {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 8px;\n background: white;\n border-radius: 8px;\n margin-bottom: 8px;\n flex-wrap: wrap;\n gap: 8px;\n }\n .pixlop-container .file-info {\n display: flex;\n align-items: center;\n gap: 12px;\n overflow: hidden;\n flex: 1;\n }\n .pixlop-container .file-thumb {\n width: 60px;\n height: 60px;\n object-fit: cover;\n border-radius: 6px;\n }\n .pixlop-container .file-status {\n font-size: 0.8rem;\n padding: 4px 8px;\n border-radius: 4px;\n background: #e9ecef;\n }\n .pixlop-container .file-status.success {\n background: #28a745;\n color: white;\n }\n .pixlop-container .file-status.error {\n background: #e74c3c;\n color: white;\n }\n .pixlop-container .format-info {\n font-size: 0.85rem;\n color: #6c757d;\n margin-top: 6px;\n padding: 6px 10px;\n background: #f8f9fa;\n border-radius: 6px;\n }\n .pixlop-container .privacy-notice {\n background: #f8f9fa;\n padding: 12px;\n border-radius: 8px;\n margin-top: 15px;\n border-left: 4px solid #28a745;\n display: flex;\n gap: 10px;\n font-size: 0.85rem;\n }\n .pixlop-container .loading {\n display: none;\n text-align: center;\n margin: 12px 0;\n }\n .pixlop-container .loading-spinner {\n border: 4px solid rgba(74,111,165,0.2);\n border-top: 4px solid #4a6fa5;\n width: 35px;\n height: 35px;\n border-radius: 50%;\n animation: spin 1s linear infinite;\n margin: 0 auto 12px;\n }\n @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }\n .pixlop-container progress {\n width: 100%;\n height: 8px;\n margin-top: 12px;\n }\n .pixlop-container .message {\n padding: 12px;\n margin-top: 12px;\n border-radius: 8px;\n display: none;\n align-items: center;\n gap: 8px;\n }\n .pixlop-container .error-message {\n color: #e74c3c;\n background: rgba(231,76,60,0.1);\n border-left: 4px solid #e74c3c;\n }\n .pixlop-container .success-message {\n color: #28a745;\n background: rgba(40,167,69,0.1);\n border-left: 4px solid #28a745;\n }\n .pixlop-container .warning-message {\n color: #f39c12;\n background: rgba(243,156,18,0.1);\n border-left: 4px solid #f39c12;\n }\n @media (max-width: 768px) {\n .pixlop-container .dimension-inputs { flex-direction: column; }\n .pixlop-container .btn { width: 100%; justify-content: center; }\n .pixlop-container .preview-container { flex-direction: column; }\n }\n <\/style>\n<\/head>\n<body>\n<div class=\"pixlop-container\">\n \n <div class=\"card\" style=\"text-align:center;\">\n <h1 style=\"color:#4a6fa5;\"><i class=\"fas fa-compress-alt\"><\/i> Pixlop.com<\/h1>\n <p style=\"color:#6c757d;\">Compress and resize your images online without losing quality. Support for multiple output formats, batch processing, and editing tools.<\/p>\n <\/div>\n\n <div style=\"display: flex; flex-wrap: wrap; gap: 25px;\">\n \n <div style=\"flex: 1; min-width: 300px;\">\n <div class=\"card\">\n <h2 class=\"section-title\"><i class=\"fas fa-upload\"><\/i> Upload Image<\/h2>\n <div class=\"drop-area\" id=\"dropArea\">\n <i class=\"fas fa-cloud-upload-alt\"><\/i>\n <p>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 style=\"margin-top: 10px;\">\n <input type=\"checkbox\" id=\"batchMode\" checked> <label for=\"batchMode\">Enable batch processing (up to 50 images) <span style=\"background:#4a6fa5; color:white; padding:2px 8px; border-radius:20px;\">BULK<\/span><\/label>\n <\/div>\n <\/div>\n \n <div class=\"selected-files-container\" id=\"selectedFilesContainer\" style=\"display: none;\">\n <h3>Selected Files (<span id=\"selectedCount\">0<\/span>)<\/h3>\n <div id=\"selectedFilesList\"><\/div>\n <\/div>\n <div class=\"error-message message\" id=\"uploadError\" style=\"display: none;\"><i class=\"fas fa-exclamation-circle\"><\/i> <span><\/span><\/div>\n <div class=\"warning-message message\" id=\"uploadWarning\" style=\"display: none;\"><i class=\"fas fa-exclamation-triangle\"><\/i> <span><\/span><\/div>\n\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\"><strong>JPEG<\/strong>: Best for photographs, smaller file size<\/div>\n <\/div>\n <div class=\"form-group\">\n <label>Quick Presets<\/label>\n <div class=\"preset-buttons\">\n <button class=\"btn btn-sm btn-info\" data-preset=\"web\">Web Optimized<\/button>\n <button class=\"btn btn-sm btn-info\" data-preset=\"print\">Print Quality<\/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 <div class=\"privacy-notice\"><i class=\"fas fa-shield-alt\"><\/i><div>Your images are processed entirely in your browser. We respect your privacy.<\/div><\/div>\n <\/div>\n <\/div>\n\n \n <div style=\"flex: 1; min-width: 300px;\">\n <div class=\"card\">\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\">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 <div class=\"form-group\" id=\"percentageInput\">\n <label for=\"resizeValue\">Scale Percentage (%)<\/label>\n <input type=\"number\" id=\"resizeValue\" value=\"50\" min=\"1\" max=\"100\">\n <\/div>\n <div class=\"dimension-inputs\" id=\"pixelInputs\" style=\"display: none;\">\n <div><label for=\"pixelWidth\">Width (px)<\/label><input type=\"number\" id=\"pixelWidth\" placeholder=\"Width\"><\/div>\n <div><label for=\"pixelHeight\">Height (px)<\/label><input type=\"number\" id=\"pixelHeight\" placeholder=\"Height\"><\/div>\n <\/div>\n <div class=\"dimension-inputs\" id=\"cmInputs\" style=\"display: none;\">\n <div><label for=\"cmWidth\">Width (cm)<\/label><input type=\"number\" id=\"cmWidth\" step=\"0.1\" placeholder=\"Width\"><\/div>\n <div><label for=\"cmHeight\">Height (cm)<\/label><input type=\"number\" id=\"cmHeight\" step=\"0.1\" placeholder=\"Height\"><\/div>\n <\/div>\n <div class=\"dimension-inputs\" id=\"inchInputs\" style=\"display: none;\">\n <div><label for=\"inchWidth\">Width (in)<\/label><input type=\"number\" id=\"inchWidth\" step=\"0.1\" placeholder=\"Width\"><\/div>\n <div><label for=\"inchHeight\">Height (in)<\/label><input type=\"number\" id=\"inchHeight\" step=\"0.1\" placeholder=\"Height\"><\/div>\n <\/div>\n <div class=\"preserve-aspect\" id=\"aspectRatioContainer\" style=\"display: none;\">\n <input type=\"checkbox\" id=\"preserveAspect\" checked> <label>Preserve Aspect Ratio<\/label>\n <\/div>\n <div class=\"dpi-settings\" id=\"dpiContainer\" style=\"display: none;\">\n <label for=\"dpiValue\">DPI (Dots Per Inch)<\/label>\n <input type=\"number\" id=\"dpiValue\" value=\"96\" min=\"72\" max=\"600\">\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\">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 <span>Lower Size<\/span>\n <span id=\"qualityValue\">80%<\/span>\n <span>Higher Quality<\/span>\n <\/div>\n <\/div>\n <div class=\"form-group\">\n <label for=\"exifHandling\">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>\n <\/div>\n \n <div class=\"option-group\">\n <div class=\"option-group-title\"><i class=\"fas fa-edit\"><\/i> Image Editing<\/div>\n <div class=\"image-edit-tools\">\n <button class=\"btn btn-sm btn-secondary\" id=\"rotateLeftBtn\"><i class=\"fas fa-undo\"><\/i> Rotate Left<\/button>\n <button class=\"btn btn-sm btn-secondary\" id=\"rotateRightBtn\"><i class=\"fas fa-redo\"><\/i> Rotate Right<\/button>\n <button class=\"btn btn-sm btn-secondary\" id=\"flipHorizontalBtn\"><i class=\"fas fa-arrows-alt-h\"><\/i> Flip H<\/button>\n <button class=\"btn btn-sm btn-secondary\" id=\"flipVerticalBtn\"><i class=\"fas fa-arrows-alt-v\"><\/i> Flip V<\/button>\n <\/div>\n <\/div>\n <div class=\"loading\" id=\"compressionLoading\"><div class=\"loading-spinner\"><\/div><p>Processing… <span id=\"progressStep\"><\/span><\/p><progress id=\"compressionProgress\" value=\"0\" max=\"100\"><\/progress><\/div>\n <div class=\"loading\" id=\"batchLoading\" style=\"display: none;\"><div class=\"loading-spinner\"><\/div><p>Batch processing <span id=\"batchProgressCurrent\">0<\/span>\/<span id=\"batchProgressTotal\">0<\/span><\/p><progress id=\"batchProgress\" value=\"0\" max=\"100\"><\/progress><\/div>\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 message\" id=\"compressionSuccess\" style=\"display: none;\"><i class=\"fas fa-check-circle\"><\/i> <span><\/span><\/div>\n <div class=\"warning-message message\" id=\"batchWarning\" style=\"display: none;\"><i class=\"fas fa-exclamation-triangle\"><\/i> <span><\/span><\/div>\n <\/div>\n <\/div>\n\n \n <div style=\"flex: 2; min-width: 300px;\">\n <div class=\"card\">\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>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\">\n <div class=\"image-info\"><div>Size: <span id=\"originalSize\">0 KB<\/span><\/div><div>Dimensions: <span id=\"originalDimensions\">0 x 0<\/span><\/div><div>Type: <span id=\"originalType\">–<\/span><\/div><\/div>\n <\/div>\n <div class=\"preview-box\">\n <h3>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\">\n <div class=\"image-info\"><div>Size: <span id=\"compressedSize\">0 KB<\/span><\/div><div>Dimensions: <span id=\"compressedDimensions\">0 x 0<\/span><\/div><div>Type: <span id=\"compressedType\">–<\/span><\/div><\/div>\n <\/div>\n <\/div>\n <div class=\"compression-info\"><i class=\"fas fa-chart-line\"><\/i> Size Reduction: <span id=\"sizeReduction\" class=\"size-reduction\">0%<\/span><\/div>\n <div class=\"exif-data\" id=\"exifContainer\" style=\"display: none; background:#f8f9fa; padding:15px; border-radius:8px; margin-top:15px;\"><h4>EXIF Data<\/h4><table id=\"exifTable\"><\/table><\/div>\n <div class=\"action-buttons\">\n <button class=\"btn\" id=\"downloadBtn\" disabled><i class=\"fas fa-download\"><\/i> Download<\/button>\n <button class=\"btn btn-warning\" id=\"newImageBtn\"><i class=\"fas fa-plus-circle\"><\/i> New Image<\/button>\n <button class=\"btn btn-danger\" id=\"resetBtn\"><i class=\"fas fa-redo\"><\/i> Reset All<\/button>\n <\/div>\n <div class=\"history-panel\" id=\"historyPanel\" style=\"display: none; margin-top:20px;\"><h4>Recent Compressions<\/h4><div id=\"historyList\"><\/div><\/div>\n <\/div>\n <\/div>\n <\/div>\n <footer style=\"text-align:center; padding:20px; color:#6c757d;\">\u00a9 <span id=\"currentYear\"><\/span> Pixlop.com | All rights reserved<\/footer>\n<\/div>\n\n<script>\n \/\/ Full compression engine (no dark mode, no crop, layout fixed)\n (function() {\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 pixelWidth = document.getElementById('pixelWidth');\n const pixelHeight = document.getElementById('pixelHeight');\n const cmWidth = document.getElementById('cmWidth');\n const cmHeight = document.getElementById('cmHeight');\n const inchWidth = document.getElementById('inchWidth');\n const inchHeight = document.getElementById('inchHeight');\n const preserveAspect = document.getElementById('preserveAspect');\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 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 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 presetBtns = document.querySelectorAll('[data-preset]');\n const rotateLeft = document.getElementById('rotateLeftBtn');\n const rotateRight = document.getElementById('rotateRightBtn');\n const flipH = document.getElementById('flipHorizontalBtn');\n const flipV = document.getElementById('flipVerticalBtn');\n const exifContainer = document.getElementById('exifContainer');\n const exifTable = document.getElementById('exifTable');\n\n let originalImage = null;\n let compressedImageData = null;\n let originalImageData = { width:0, height:0, size:0, type:'', file:null };\n let currentRotation = 0;\n let batchFiles = [];\n let batchCompressedResults = [];\n\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 function showMessage(el, msg) { if(el) { let s = el.querySelector('span'); if(s) s.textContent=msg; el.style.display='flex'; } }\n function hideMessage(el) { if(el) el.style.display='none'; }\n function getSafeMimeType(fmt) {\n const mime = { 'jpeg':'image\/jpeg','jpg':'image\/jpeg','png':'image\/png','webp':'image\/webp','bmp':'image\/png','tiff':'image\/png' };\n return mime[fmt.toLowerCase()] || 'image\/png';\n }\n\n function compressImageFromElement(img, settings, origFilename) {\n return new Promise((resolve, reject) => {\n let newW, newH;\n const type = settings.resizeType;\n if(type === 'percentage') {\n const r = parseInt(settings.resizeValue)\/100;\n newW = Math.round(img.width * r);\n newH = Math.round(img.height * r);\n } else if(type === 'pixel') {\n newW = parseInt(settings.pixelWidth) || img.width;\n newH = parseInt(settings.pixelHeight) || img.height;\n if(settings.preserveAspect) {\n const ratio = img.width\/img.height;\n if(newW && !newH) newH = Math.round(newW\/ratio);\n else if(!newW && newH) newW = Math.round(newH*ratio);\n else if(newW && newH) {\n const target = newW\/newH;\n if(ratio > target) newH = Math.round(newW\/ratio);\n else newW = Math.round(newH*ratio);\n }\n }\n } else if(type === 'cm' || type === 'inches') {\n const dpi = parseInt(settings.dpiValue) || 96;\n let wInch=0, hInch=0;\n if(type === 'cm') {\n wInch = (parseFloat(settings.cmWidth)||0)\/2.54;\n hInch = (parseFloat(settings.cmHeight)||0)\/2.54;\n } else {\n wInch = parseFloat(settings.inchWidth)||0;\n hInch = parseFloat(settings.inchHeight)||0;\n }\n newW = Math.round(wInch * dpi);\n newH = Math.round(hInch * dpi);\n if(settings.preserveAspect && newW && newH) {\n const ratio = img.width\/img.height;\n const target = newW\/newH;\n if(ratio > target) newH = Math.round(newW\/ratio);\n else newW = Math.round(newH*ratio);\n }\n }\n newW = Math.min(newW || img.width, 10000);\n newH = Math.min(newH || img.height, 10000);\n if(newW<=0) newW=img.width; if(newH<=0) newH=img.height;\n const canvas = document.createElement('canvas');\n canvas.width = newW; canvas.height = newH;\n const ctx = canvas.getContext('2d');\n ctx.drawImage(img, 0, 0, newW, newH);\n const mime = getSafeMimeType(settings.outputFormat);\n const qualityVal = parseInt(settings.quality)\/100;\n canvas.toBlob(blob => {\n if(!blob) reject(new Error('Compression failed'));\n else resolve({ blob, filename: origFilename, width:newW, height:newH, size:blob.size, type:settings.outputFormat });\n }, mime, qualityVal);\n });\n }\n\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 = () => compressImageFromElement(img, settings, file.name).then(resolve).catch(reject);\n img.onerror = () => reject(new Error('Load failed'));\n img.src = e.target.result;\n };\n reader.onerror = () => reject(new Error('Read failed'));\n reader.readAsDataURL(file);\n });\n }\n\n function updateSelectedFilesUI(files, statuses = {}) {\n const container = document.getElementById('selectedFilesContainer');\n const listDiv = document.getElementById('selectedFilesList');\n const countSpan = document.getElementById('selectedCount');\n if(!files.length) { container.style.display = 'none'; return; }\n container.style.display = 'block';\n countSpan.textContent = files.length;\n listDiv.innerHTML = '';\n files.forEach((file, idx) => {\n const div = document.createElement('div');\n div.className = 'file-item';\n div.innerHTML = `\n <div class=\"file-info\">\n <img decoding=\"async\" class=\"file-thumb\" id=\"thumb-${idx}\" src=\"\" alt=\"thumb\">\n <span class=\"file-name\" title=\"${file.name}\">${file.name}<\/span>\n <\/div>\n <div class=\"file-status\" id=\"status-${idx}\">${statuses[idx] || 'Pending'}<\/div>\n `;\n listDiv.appendChild(div);\n const reader = new FileReader();\n reader.onload = ev => { const thumb = document.getElementById(`thumb-${idx}`); if(thumb) thumb.src = ev.target.result; };\n reader.readAsDataURL(file);\n });\n }\n function setFileStatus(index, text, isSuccess=false, isError=false) {\n const el = document.getElementById(`status-${index}`);\n if(el) {\n el.textContent = text;\n el.classList.remove('success','error');\n if(isSuccess) el.classList.add('success');\n if(isError) el.classList.add('error');\n }\n }\n\n function processSingleFile(file) {\n if(!file.type.match('image.*')) { showMessage(uploadError, 'Not an image'); return false; }\n if(file.size > 20*1024*1024) { showMessage(uploadError, 'Max 20MB'); return false; }\n hideMessage(uploadError); hideMessage(uploadWarning);\n updateSelectedFilesUI([file], {0:'Loading...'});\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 originalImageData = { width:img.width, height:img.height, size:file.size, type:file.type.split('\/')[1].toUpperCase(), file:file };\n originalDimensions.textContent = `${img.width} x ${img.height}`;\n originalSize.textContent = formatFileSize(file.size);\n originalType.textContent = originalImageData.type;\n if(resizeType.value === 'pixel') { pixelWidth.value = img.width; pixelHeight.value = img.height; }\n compressBtn.disabled = false;\n exifContainer.style.display = 'block';\n exifTable.innerHTML = `<tr><td>Make<\/td><td>Camera Manufacturer<\/td><\/tr><tr><td>Model<\/td><td>Camera Model<\/td><\/tr><tr><td>Date<\/td><td>${new Date(file.lastModified).toLocaleString()}<\/td><\/tr><tr><td>Resolution<\/td><td>${img.width} x ${img.height}<\/td><\/tr><tr><td>File Size<\/td><td>${formatFileSize(file.size)}<\/td><\/tr>`;\n setFileStatus(0, 'Ready', true);\n currentRotation = 0;\n };\n img.onerror = () => showMessage(uploadError, 'Invalid image');\n img.src = e.target.result;\n };\n reader.readAsDataURL(file);\n return true;\n }\n\n function processBatchFiles(filesArray) {\n const limited = filesArray.slice(0,50);\n batchFiles = limited;\n updateSelectedFilesUI(limited);\n if(limited.length < filesArray.length) showMessage(uploadWarning, 'Only first 50 images');\n batchCompressBtn.style.display = 'block';\n compressBtn.style.display = 'none';\n downloadZipBtn.style.display = 'none';\n downloadBtn.style.display = 'none';\n batchCompressedResults = [];\n }\n\n function handleFileSelect() {\n const files = Array.from(fileInput.files);\n if(!files.length) return;\n if(batchMode.checked) processBatchFiles(files);\n else processSingleFile(files[0]);\n }\n\n browseBtn.addEventListener('click', () => fileInput.click());\n fileInput.addEventListener('change', handleFileSelect);\n dropArea.addEventListener('dragover', e => { e.preventDefault(); dropArea.classList.add('active'); });\n dropArea.addEventListener('dragleave', e => { e.preventDefault(); dropArea.classList.remove('active'); });\n dropArea.addEventListener('drop', e => { e.preventDefault(); dropArea.classList.remove('active'); if(e.dataTransfer.files.length) { fileInput.files = e.dataTransfer.files; handleFileSelect(); } });\n\n function handleResizeTypeChange() {\n const type = resizeType.value;\n document.getElementById('percentageInput').style.display = 'none';\n document.getElementById('pixelInputs').style.display = 'none';\n document.getElementById('cmInputs').style.display = 'none';\n document.getElementById('inchInputs').style.display = 'none';\n document.getElementById('aspectRatioContainer').style.display = 'none';\n document.getElementById('dpiContainer').style.display = 'none';\n if(type === 'percentage') document.getElementById('percentageInput').style.display = 'block';\n else if(type === 'pixel') { document.getElementById('pixelInputs').style.display = 'flex'; document.getElementById('aspectRatioContainer').style.display = 'flex'; }\n else if(type === 'cm' || type === 'inches') { \n if(type === 'cm') document.getElementById('cmInputs').style.display = 'flex';\n else document.getElementById('inchInputs').style.display = 'flex';\n document.getElementById('aspectRatioContainer').style.display = 'flex';\n document.getElementById('dpiContainer').style.display = 'block';\n }\n }\n resizeType.addEventListener('change', handleResizeTypeChange);\n quality.addEventListener('input', () => { qualityValue.textContent = quality.value+'%'; });\n outputFormat.addEventListener('change', () => { formatInfo.innerHTML = {jpeg:'JPEG best for photos',png:'PNG lossless',webp:'Modern format'}[outputFormat.value] || ''; });\n\n presetBtns.forEach(btn => btn.addEventListener('click', (e) => {\n const p = e.target.dataset.preset;\n if(p === 'web') { resizeType.value='pixel'; handleResizeTypeChange(); dpiValue.value='72'; quality.value='75'; quality.dispatchEvent(new Event('input')); }\n else if(p === 'print') { resizeType.value='inches'; handleResizeTypeChange(); dpiValue.value='300'; quality.value='95'; quality.dispatchEvent(new Event('input')); }\n else if(p === 'social') { resizeType.value='pixel'; handleResizeTypeChange(); pixelWidth.value='1080'; preserveAspect.checked=true; quality.value='85'; quality.dispatchEvent(new Event('input')); }\n else if(p === 'email') { resizeType.value='percentage'; handleResizeTypeChange(); resizeValue.value='50'; quality.value='70'; quality.dispatchEvent(new Event('input')); }\n }));\n\n function applyRotationFlip() {\n if(!originalImage) return;\n const canvas = document.createElement('canvas');\n let w = originalImage.width, h = originalImage.height;\n if(Math.abs(currentRotation) % 180 === 90) { canvas.width = h; canvas.height = w; } else { canvas.width = w; canvas.height = h; }\n const ctx = canvas.getContext('2d');\n ctx.translate(canvas.width\/2, canvas.height\/2);\n ctx.rotate(currentRotation * Math.PI\/180);\n ctx.drawImage(originalImage, -w\/2, -h\/2);\n const img = new Image();\n img.onload = () => { originalImage = img; originalDimensions.textContent = `${img.width} x ${img.height}`; originalPreview.src = img.src; };\n img.src = canvas.toDataURL();\n }\n rotateLeft.addEventListener('click', () => { if(!originalImage) return; currentRotation -= 90; applyRotationFlip(); });\n rotateRight.addEventListener('click', () => { if(!originalImage) return; currentRotation += 90; applyRotationFlip(); });\n flipH.addEventListener('click', () => { if(!originalImage) return; const canvas=document.createElement('canvas'); canvas.width=originalImage.width; canvas.height=originalImage.height; const ctx=canvas.getContext('2d'); ctx.translate(canvas.width,0); ctx.scale(-1,1); ctx.drawImage(originalImage,0,0); const img=new Image(); img.onload=()=>{ originalImage=img; originalPreview.src=img.src; }; img.src=canvas.toDataURL(); });\n flipV.addEventListener('click', () => { if(!originalImage) return; const canvas=document.createElement('canvas'); canvas.width=originalImage.width; canvas.height=originalImage.height; const ctx=canvas.getContext('2d'); ctx.translate(0,canvas.height); ctx.scale(1,-1); ctx.drawImage(originalImage,0,0); const img=new Image(); img.onload=()=>{ originalImage=img; originalPreview.src=img.src; }; img.src=canvas.toDataURL(); });\n\n async function compressSingle() {\n if(!originalImage) { showMessage(uploadError, 'No image'); return; }\n compressionLoading.style.display = 'block';\n const settings = {\n resizeType: resizeType.value, resizeValue: resizeValue.value, pixelWidth: pixelWidth.value, pixelHeight: pixelHeight.value,\n cmWidth: cmWidth.value, cmHeight: cmHeight.value, inchWidth: inchWidth.value, inchHeight: inchHeight.value,\n preserveAspect: preserveAspect.checked, dpiValue: dpiValue.value, outputFormat: outputFormat.value, quality: quality.value\n };\n try {\n const result = await compressImageFromElement(originalImage, settings, 'image');\n compressedImageData = result;\n compressedPreview.src = URL.createObjectURL(result.blob);\n compressedDimensions.textContent = `${result.width} x ${result.height}`;\n compressedSize.textContent = formatFileSize(result.size);\n compressedType.textContent = result.type.toUpperCase();\n const reduction = Math.round((1 - result.size \/ originalImageData.size) * 100);\n sizeReduction.textContent = `${reduction}%`;\n downloadBtn.disabled = false;\n showMessage(compressionSuccess, `Compressed! Reduced by ${reduction}%`);\n compressionLoading.style.display = 'none';\n if(batchFiles.length===0 && document.getElementById('status-0')) setFileStatus(0, 'Compressed', true);\n } catch(e) { showMessage(uploadError, e.message); compressionLoading.style.display = 'none'; }\n }\n compressBtn.addEventListener('click', compressSingle);\n downloadBtn.addEventListener('click', () => { if(compressedImageData) { const a=document.createElement('a'); a.href=URL.createObjectURL(compressedImageData.blob); a.download=`compressed.${compressedImageData.type}`; a.click(); URL.revokeObjectURL(a.href); } });\n\n async function compressBatch() {\n if(!batchFiles.length) { showMessage(batchWarning, 'No images'); return; }\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 const settings = {\n resizeType: resizeType.value, resizeValue: resizeValue.value, pixelWidth: pixelWidth.value, pixelHeight: pixelHeight.value,\n cmWidth: cmWidth.value, cmHeight: cmHeight.value, inchWidth: inchWidth.value, inchHeight: inchHeight.value,\n preserveAspect: preserveAspect.checked, dpiValue: dpiValue.value, outputFormat: outputFormat.value, quality: quality.value\n };\n batchCompressedResults = [];\n for(let i=0; i<batchFiles.length; i++) {\n setFileStatus(i, 'Processing');\n try {\n const res = await compressImageFile(batchFiles[i], settings);\n batchCompressedResults.push(res);\n setFileStatus(i, 'Done', true);\n } catch(e) { setFileStatus(i, 'Error', false, true); }\n batchProgressCurrent.textContent = i+1;\n batchProgress.value = ((i+1)\/batchFiles.length)*100;\n }\n batchLoading.style.display = 'none';\n batchCompressBtn.disabled = false;\n if(batchCompressedResults.length) {\n downloadZipBtn.style.display = 'block';\n showMessage(compressionSuccess, `Compressed ${batchCompressedResults.length}\/${batchFiles.length} images`);\n } else showMessage(batchWarning, 'No images compressed');\n }\n batchCompressBtn.addEventListener('click', compressBatch);\n downloadZipBtn.addEventListener('click', () => {\n if(!batchCompressedResults.length) 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_${Date.now()}.zip`;\n a.click();\n URL.revokeObjectURL(a.href);\n });\n });\n\n function resetAll() {\n fileInput.value = '';\n originalImage = null;\n compressedImageData = null;\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 = originalPreview.src;\n originalSize.textContent = '0 KB'; originalDimensions.textContent = '0 x 0'; originalType.textContent = '-';\n compressedSize.textContent = '0 KB'; compressedDimensions.textContent = '0 x 0'; compressedType.textContent = '-';\n sizeReduction.textContent = '0%'; compressBtn.disabled = true; downloadBtn.disabled = true;\n batchFiles = []; batchCompressedResults = [];\n updateSelectedFilesUI([]);\n batchCompressBtn.style.display = 'none'; downloadZipBtn.style.display = 'none';\n compressBtn.style.display = 'block'; downloadBtn.style.display = 'inline-flex';\n exifContainer.style.display = 'none';\n }\n newImageBtn.addEventListener('click', resetAll);\n resetBtn.addEventListener('click', resetAll);\n\n batchMode.addEventListener('change', () => {\n if(batchMode.checked) {\n fileInput.setAttribute('multiple', 'multiple');\n compressBtn.style.display = 'none';\n downloadBtn.style.display = 'none';\n if(batchFiles.length) batchCompressBtn.style.display = 'block';\n else batchCompressBtn.style.display = 'none';\n downloadZipBtn.style.display = 'none';\n } else {\n fileInput.removeAttribute('multiple');\n batchCompressBtn.style.display = 'none';\n compressBtn.style.display = 'block';\n downloadBtn.style.display = 'inline-flex';\n if(batchFiles.length && batchFiles[0]) processSingleFile(batchFiles[0]);\n else resetAll();\n }\n });\n\n handleResizeTypeChange();\n quality.dispatchEvent(new Event('input'));\n outputFormat.dispatchEvent(new Event('change'));\n document.getElementById('currentYear').textContent = new Date().getFullYear();\n resetAll();\n })();\n<\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Pixlop.com | Image Optimizer Pixlop.com Compress and resize your images online without losing quality. Support for multiple output formats, batch processing, and editing tools. Upload Image Drag & Drop your […]<\/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-11","page","type-page","status-publish","hentry"],"yoast_head":"\n<title>-<\/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=11\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"-\" \/>\n<meta property=\"og:description\" content=\"Pixlop.com | Image Optimizer Pixlop.com Compress and resize your images online without losing quality. Support for multiple output formats, batch processing, and editing tools. Upload Image Drag & Drop your […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/pixlop.com\/?page_id=11\" \/>\n<meta property=\"article:modified_time\" content=\"2026-04-04T13:05:28+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/pixlop.com\\\/?page_id=11\",\"url\":\"https:\\\/\\\/pixlop.com\\\/?page_id=11\",\"name\":\"-\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/pixlop.com\\\/#website\"},\"datePublished\":\"2026-04-04T09:54:45+00:00\",\"dateModified\":\"2026-04-04T13:05:28+00:00\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/pixlop.com\\\/?page_id=11\"]}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/pixlop.com\\\/#website\",\"url\":\"https:\\\/\\\/pixlop.com\\\/\",\"name\":\"\",\"description\":\"\",\"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\"}]}<\/script>\n","yoast_head_json":{"title":"-","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=11","og_locale":"en_US","og_type":"article","og_title":"-","og_description":"Pixlop.com | Image Optimizer Pixlop.com Compress and resize your images online without losing quality. Support for multiple output formats, batch processing, and editing tools. Upload Image Drag & Drop your […]","og_url":"https:\/\/pixlop.com\/?page_id=11","article_modified_time":"2026-04-04T13:05:28+00:00","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/pixlop.com\/?page_id=11","url":"https:\/\/pixlop.com\/?page_id=11","name":"-","isPartOf":{"@id":"https:\/\/pixlop.com\/#website"},"datePublished":"2026-04-04T09:54:45+00:00","dateModified":"2026-04-04T13:05:28+00:00","inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/pixlop.com\/?page_id=11"]}]},{"@type":"WebSite","@id":"https:\/\/pixlop.com\/#website","url":"https:\/\/pixlop.com\/","name":"","description":"","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"}]}},"_links":{"self":[{"href":"https:\/\/pixlop.com\/index.php?rest_route=\/wp\/v2\/pages\/11","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=11"}],"version-history":[{"count":1,"href":"https:\/\/pixlop.com\/index.php?rest_route=\/wp\/v2\/pages\/11\/revisions"}],"predecessor-version":[{"id":13,"href":"https:\/\/pixlop.com\/index.php?rest_route=\/wp\/v2\/pages\/11\/revisions\/13"}],"wp:attachment":[{"href":"https:\/\/pixlop.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=11"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":11,"date":"2026-04-04T09:54:45","date_gmt":"2026-04-04T09:54:45","guid":{"rendered":"https:\/\/pixlop.com\/?page_id=11"},"modified":"2026-04-04T13:05:28","modified_gmt":"2026-04-04T13:05:28","slug":"11-2","status":"publish","type":"page","link":"https:\/\/pixlop.com\/?page_id=11","title":{"rendered":""},"content":{"rendered":"\n\n\n\n \n \n Pixlop.com | Image Optimizer<\/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 \/* RESET & BASE \u2013 isolated inside .pixlop-container to avoid WordPress conflicts *\/\n .pixlop-container * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n }\n .pixlop-container {\n max-width: 1200px;\n margin: 0 auto;\n width: 100%;\n background: transparent;\n }\n .pixlop-container .card {\n background: white;\n border-radius: 12px;\n padding: 25px;\n box-shadow: 0 8px 20px rgba(0,0,0,0.08);\n margin-bottom: 25px;\n }\n .pixlop-container .section-title {\n font-size: 1.4rem;\n margin-bottom: 20px;\n color: #4a6fa5;\n padding-bottom: 12px;\n border-bottom: 2px solid #e9ecef;\n display: flex;\n align-items: center;\n gap: 10px;\n }\n .pixlop-container .form-group {\n margin-bottom: 20px;\n }\n .pixlop-container label {\n display: block;\n margin-bottom: 8px;\n font-weight: 600;\n color: #343a40;\n }\n .pixlop-container select, \n .pixlop-container input[type=\"number\"],\n .pixlop-container input[type=\"text\"] {\n width: 100%;\n padding: 12px;\n border: 2px solid #e9ecef;\n border-radius: 8px;\n font-size: 1rem;\n background: #f8f9fa;\n }\n .pixlop-container .dimension-inputs {\n display: flex;\n gap: 12px;\n margin-top: 12px;\n }\n .pixlop-container .dimension-inputs > div {\n flex: 1;\n }\n .pixlop-container .preserve-aspect {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 10px;\n background: #f8f9fa;\n border-radius: 8px;\n margin-top: 12px;\n }\n .pixlop-container .dpi-settings {\n background: #f8f9fa;\n padding: 12px;\n border-radius: 8px;\n margin-top: 12px;\n border-left: 4px solid #4a6fa5;\n }\n .pixlop-container .option-group {\n background: #f8f9fa;\n padding: 18px;\n border-radius: 10px;\n margin-bottom: 20px;\n }\n .pixlop-container .option-group-title {\n font-size: 1rem;\n margin-bottom: 12px;\n color: #4a6fa5;\n display: flex;\n align-items: center;\n gap: 8px;\n }\n .pixlop-container .btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n padding: 12px 24px;\n background: #4a6fa5;\n color: white;\n border: none;\n border-radius: 8px;\n cursor: pointer;\n font-size: 1rem;\n font-weight: 600;\n transition: all 0.3s ease;\n }\n .pixlop-container .btn:hover {\n background: #6c8fc7;\n transform: translateY(-2px);\n }\n .pixlop-container .btn-success { background: #28a745; }\n .pixlop-container .btn-success:hover { background: #218838; }\n .pixlop-container .btn-info { background: #17a2b8; }\n .pixlop-container .btn-secondary { background: #5d8a82; }\n .pixlop-container .btn-warning { background: #f39c12; }\n .pixlop-container .btn-danger { background: #e74c3c; }\n .pixlop-container .btn-sm { padding: 8px 16px; font-size: 0.9rem; }\n .pixlop-container .preset-buttons {\n display: flex;\n flex-wrap: wrap;\n gap: 10px;\n margin-top: 15px;\n }\n .pixlop-container .image-edit-tools {\n display: flex;\n gap: 10px;\n flex-wrap: wrap;\n margin-top: 15px;\n }\n .pixlop-container .preview-container {\n display: flex;\n flex-wrap: wrap;\n gap: 20px;\n margin-top: 20px;\n }\n .pixlop-container .preview-box {\n flex: 1;\n min-width: 250px;\n text-align: center;\n background: #f8f9fa;\n padding: 18px;\n border-radius: 12px;\n }\n .pixlop-container .image-preview {\n max-width: 100%;\n max-height: 280px;\n border-radius: 8px;\n margin-bottom: 15px;\n background: white;\n padding: 8px;\n object-fit: contain;\n }\n .pixlop-container .image-info {\n background: #e9ecef;\n padding: 10px;\n border-radius: 8px;\n font-size: 0.9rem;\n }\n .pixlop-container .action-buttons {\n display: flex;\n gap: 12px;\n margin-top: 25px;\n flex-wrap: wrap;\n }\n .pixlop-container .compression-info {\n background: #f8f9fa;\n padding: 18px;\n border-radius: 12px;\n margin-top: 20px;\n text-align: center;\n border-left: 4px solid #28a745;\n }\n .pixlop-container .size-reduction {\n font-weight: bold;\n color: #28a745;\n font-size: 1.2rem;\n }\n .pixlop-container .drop-area {\n border: 3px dashed #ced4da;\n border-radius: 8px;\n padding: 35px 20px;\n text-align: center;\n cursor: pointer;\n background: #f8f9fa;\n margin-bottom: 20px;\n }\n .pixlop-container .drop-area:hover {\n border-color: #4a6fa5;\n background: rgba(74,111,165,0.05);\n }\n .pixlop-container .selected-files-container {\n margin-top: 15px;\n max-height: 250px;\n overflow-y: auto;\n border: 1px solid #ced4da;\n border-radius: 8px;\n padding: 10px;\n background: #f8f9fa;\n }\n .pixlop-container .file-item {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 8px;\n background: white;\n border-radius: 8px;\n margin-bottom: 8px;\n flex-wrap: wrap;\n gap: 8px;\n }\n .pixlop-container .file-info {\n display: flex;\n align-items: center;\n gap: 12px;\n overflow: hidden;\n flex: 1;\n }\n .pixlop-container .file-thumb {\n width: 60px;\n height: 60px;\n object-fit: cover;\n border-radius: 6px;\n }\n .pixlop-container .file-status {\n font-size: 0.8rem;\n padding: 4px 8px;\n border-radius: 4px;\n background: #e9ecef;\n }\n .pixlop-container .file-status.success {\n background: #28a745;\n color: white;\n }\n .pixlop-container .file-status.error {\n background: #e74c3c;\n color: white;\n }\n .pixlop-container .format-info {\n font-size: 0.85rem;\n color: #6c757d;\n margin-top: 6px;\n padding: 6px 10px;\n background: #f8f9fa;\n border-radius: 6px;\n }\n .pixlop-container .privacy-notice {\n background: #f8f9fa;\n padding: 12px;\n border-radius: 8px;\n margin-top: 15px;\n border-left: 4px solid #28a745;\n display: flex;\n gap: 10px;\n font-size: 0.85rem;\n }\n .pixlop-container .loading {\n display: none;\n text-align: center;\n margin: 12px 0;\n }\n .pixlop-container .loading-spinner {\n border: 4px solid rgba(74,111,165,0.2);\n border-top: 4px solid #4a6fa5;\n width: 35px;\n height: 35px;\n border-radius: 50%;\n animation: spin 1s linear infinite;\n margin: 0 auto 12px;\n }\n @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }\n .pixlop-container progress {\n width: 100%;\n height: 8px;\n margin-top: 12px;\n }\n .pixlop-container .message {\n padding: 12px;\n margin-top: 12px;\n border-radius: 8px;\n display: none;\n align-items: center;\n gap: 8px;\n }\n .pixlop-container .error-message {\n color: #e74c3c;\n background: rgba(231,76,60,0.1);\n border-left: 4px solid #e74c3c;\n }\n .pixlop-container .success-message {\n color: #28a745;\n background: rgba(40,167,69,0.1);\n border-left: 4px solid #28a745;\n }\n .pixlop-container .warning-message {\n color: #f39c12;\n background: rgba(243,156,18,0.1);\n border-left: 4px solid #f39c12;\n }\n @media (max-width: 768px) {\n .pixlop-container .dimension-inputs { flex-direction: column; }\n .pixlop-container .btn { width: 100%; justify-content: center; }\n .pixlop-container .preview-container { flex-direction: column; }\n }\n <\/style>\n<\/head>\n<body>\n<div class=\"pixlop-container\">\n \n <div class=\"card\" style=\"text-align:center;\">\n <h1 style=\"color:#4a6fa5;\"><i class=\"fas fa-compress-alt\"><\/i> Pixlop.com<\/h1>\n <p style=\"color:#6c757d;\">Compress and resize your images online without losing quality. Support for multiple output formats, batch processing, and editing tools.<\/p>\n <\/div>\n\n <div style=\"display: flex; flex-wrap: wrap; gap: 25px;\">\n \n <div style=\"flex: 1; min-width: 300px;\">\n <div class=\"card\">\n <h2 class=\"section-title\"><i class=\"fas fa-upload\"><\/i> Upload Image<\/h2>\n <div class=\"drop-area\" id=\"dropArea\">\n <i class=\"fas fa-cloud-upload-alt\"><\/i>\n <p>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 style=\"margin-top: 10px;\">\n <input type=\"checkbox\" id=\"batchMode\" checked> <label for=\"batchMode\">Enable batch processing (up to 50 images) <span style=\"background:#4a6fa5; color:white; padding:2px 8px; border-radius:20px;\">BULK<\/span><\/label>\n <\/div>\n <\/div>\n \n <div class=\"selected-files-container\" id=\"selectedFilesContainer\" style=\"display: none;\">\n <h3>Selected Files (<span id=\"selectedCount\">0<\/span>)<\/h3>\n <div id=\"selectedFilesList\"><\/div>\n <\/div>\n <div class=\"error-message message\" id=\"uploadError\" style=\"display: none;\"><i class=\"fas fa-exclamation-circle\"><\/i> <span><\/span><\/div>\n <div class=\"warning-message message\" id=\"uploadWarning\" style=\"display: none;\"><i class=\"fas fa-exclamation-triangle\"><\/i> <span><\/span><\/div>\n\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\"><strong>JPEG<\/strong>: Best for photographs, smaller file size<\/div>\n <\/div>\n <div class=\"form-group\">\n <label>Quick Presets<\/label>\n <div class=\"preset-buttons\">\n <button class=\"btn btn-sm btn-info\" data-preset=\"web\">Web Optimized<\/button>\n <button class=\"btn btn-sm btn-info\" data-preset=\"print\">Print Quality<\/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 <div class=\"privacy-notice\"><i class=\"fas fa-shield-alt\"><\/i><div>Your images are processed entirely in your browser. We respect your privacy.<\/div><\/div>\n <\/div>\n <\/div>\n\n \n <div style=\"flex: 1; min-width: 300px;\">\n <div class=\"card\">\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\">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 <div class=\"form-group\" id=\"percentageInput\">\n <label for=\"resizeValue\">Scale Percentage (%)<\/label>\n <input type=\"number\" id=\"resizeValue\" value=\"50\" min=\"1\" max=\"100\">\n <\/div>\n <div class=\"dimension-inputs\" id=\"pixelInputs\" style=\"display: none;\">\n <div><label for=\"pixelWidth\">Width (px)<\/label><input type=\"number\" id=\"pixelWidth\" placeholder=\"Width\"><\/div>\n <div><label for=\"pixelHeight\">Height (px)<\/label><input type=\"number\" id=\"pixelHeight\" placeholder=\"Height\"><\/div>\n <\/div>\n <div class=\"dimension-inputs\" id=\"cmInputs\" style=\"display: none;\">\n <div><label for=\"cmWidth\">Width (cm)<\/label><input type=\"number\" id=\"cmWidth\" step=\"0.1\" placeholder=\"Width\"><\/div>\n <div><label for=\"cmHeight\">Height (cm)<\/label><input type=\"number\" id=\"cmHeight\" step=\"0.1\" placeholder=\"Height\"><\/div>\n <\/div>\n <div class=\"dimension-inputs\" id=\"inchInputs\" style=\"display: none;\">\n <div><label for=\"inchWidth\">Width (in)<\/label><input type=\"number\" id=\"inchWidth\" step=\"0.1\" placeholder=\"Width\"><\/div>\n <div><label for=\"inchHeight\">Height (in)<\/label><input type=\"number\" id=\"inchHeight\" step=\"0.1\" placeholder=\"Height\"><\/div>\n <\/div>\n <div class=\"preserve-aspect\" id=\"aspectRatioContainer\" style=\"display: none;\">\n <input type=\"checkbox\" id=\"preserveAspect\" checked> <label>Preserve Aspect Ratio<\/label>\n <\/div>\n <div class=\"dpi-settings\" id=\"dpiContainer\" style=\"display: none;\">\n <label for=\"dpiValue\">DPI (Dots Per Inch)<\/label>\n <input type=\"number\" id=\"dpiValue\" value=\"96\" min=\"72\" max=\"600\">\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\">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 <span>Lower Size<\/span>\n <span id=\"qualityValue\">80%<\/span>\n <span>Higher Quality<\/span>\n <\/div>\n <\/div>\n <div class=\"form-group\">\n <label for=\"exifHandling\">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>\n <\/div>\n \n <div class=\"option-group\">\n <div class=\"option-group-title\"><i class=\"fas fa-edit\"><\/i> Image Editing<\/div>\n <div class=\"image-edit-tools\">\n <button class=\"btn btn-sm btn-secondary\" id=\"rotateLeftBtn\"><i class=\"fas fa-undo\"><\/i> Rotate Left<\/button>\n <button class=\"btn btn-sm btn-secondary\" id=\"rotateRightBtn\"><i class=\"fas fa-redo\"><\/i> Rotate Right<\/button>\n <button class=\"btn btn-sm btn-secondary\" id=\"flipHorizontalBtn\"><i class=\"fas fa-arrows-alt-h\"><\/i> Flip H<\/button>\n <button class=\"btn btn-sm btn-secondary\" id=\"flipVerticalBtn\"><i class=\"fas fa-arrows-alt-v\"><\/i> Flip V<\/button>\n <\/div>\n <\/div>\n <div class=\"loading\" id=\"compressionLoading\"><div class=\"loading-spinner\"><\/div><p>Processing… <span id=\"progressStep\"><\/span><\/p><progress id=\"compressionProgress\" value=\"0\" max=\"100\"><\/progress><\/div>\n <div class=\"loading\" id=\"batchLoading\" style=\"display: none;\"><div class=\"loading-spinner\"><\/div><p>Batch processing <span id=\"batchProgressCurrent\">0<\/span>\/<span id=\"batchProgressTotal\">0<\/span><\/p><progress id=\"batchProgress\" value=\"0\" max=\"100\"><\/progress><\/div>\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 message\" id=\"compressionSuccess\" style=\"display: none;\"><i class=\"fas fa-check-circle\"><\/i> <span><\/span><\/div>\n <div class=\"warning-message message\" id=\"batchWarning\" style=\"display: none;\"><i class=\"fas fa-exclamation-triangle\"><\/i> <span><\/span><\/div>\n <\/div>\n <\/div>\n\n \n <div style=\"flex: 2; min-width: 300px;\">\n <div class=\"card\">\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>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\">\n <div class=\"image-info\"><div>Size: <span id=\"originalSize\">0 KB<\/span><\/div><div>Dimensions: <span id=\"originalDimensions\">0 x 0<\/span><\/div><div>Type: <span id=\"originalType\">–<\/span><\/div><\/div>\n <\/div>\n <div class=\"preview-box\">\n <h3>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\">\n <div class=\"image-info\"><div>Size: <span id=\"compressedSize\">0 KB<\/span><\/div><div>Dimensions: <span id=\"compressedDimensions\">0 x 0<\/span><\/div><div>Type: <span id=\"compressedType\">–<\/span><\/div><\/div>\n <\/div>\n <\/div>\n <div class=\"compression-info\"><i class=\"fas fa-chart-line\"><\/i> Size Reduction: <span id=\"sizeReduction\" class=\"size-reduction\">0%<\/span><\/div>\n <div class=\"exif-data\" id=\"exifContainer\" style=\"display: none; background:#f8f9fa; padding:15px; border-radius:8px; margin-top:15px;\"><h4>EXIF Data<\/h4><table id=\"exifTable\"><\/table><\/div>\n <div class=\"action-buttons\">\n <button class=\"btn\" id=\"downloadBtn\" disabled><i class=\"fas fa-download\"><\/i> Download<\/button>\n <button class=\"btn btn-warning\" id=\"newImageBtn\"><i class=\"fas fa-plus-circle\"><\/i> New Image<\/button>\n <button class=\"btn btn-danger\" id=\"resetBtn\"><i class=\"fas fa-redo\"><\/i> Reset All<\/button>\n <\/div>\n <div class=\"history-panel\" id=\"historyPanel\" style=\"display: none; margin-top:20px;\"><h4>Recent Compressions<\/h4><div id=\"historyList\"><\/div><\/div>\n <\/div>\n <\/div>\n <\/div>\n <footer style=\"text-align:center; padding:20px; color:#6c757d;\">\u00a9 <span id=\"currentYear\"><\/span> Pixlop.com | All rights reserved<\/footer>\n<\/div>\n\n<script>\n \/\/ Full compression engine (no dark mode, no crop, layout fixed)\n (function() {\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 pixelWidth = document.getElementById('pixelWidth');\n const pixelHeight = document.getElementById('pixelHeight');\n const cmWidth = document.getElementById('cmWidth');\n const cmHeight = document.getElementById('cmHeight');\n const inchWidth = document.getElementById('inchWidth');\n const inchHeight = document.getElementById('inchHeight');\n const preserveAspect = document.getElementById('preserveAspect');\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 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 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 presetBtns = document.querySelectorAll('[data-preset]');\n const rotateLeft = document.getElementById('rotateLeftBtn');\n const rotateRight = document.getElementById('rotateRightBtn');\n const flipH = document.getElementById('flipHorizontalBtn');\n const flipV = document.getElementById('flipVerticalBtn');\n const exifContainer = document.getElementById('exifContainer');\n const exifTable = document.getElementById('exifTable');\n\n let originalImage = null;\n let compressedImageData = null;\n let originalImageData = { width:0, height:0, size:0, type:'', file:null };\n let currentRotation = 0;\n let batchFiles = [];\n let batchCompressedResults = [];\n\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 function showMessage(el, msg) { if(el) { let s = el.querySelector('span'); if(s) s.textContent=msg; el.style.display='flex'; } }\n function hideMessage(el) { if(el) el.style.display='none'; }\n function getSafeMimeType(fmt) {\n const mime = { 'jpeg':'image\/jpeg','jpg':'image\/jpeg','png':'image\/png','webp':'image\/webp','bmp':'image\/png','tiff':'image\/png' };\n return mime[fmt.toLowerCase()] || 'image\/png';\n }\n\n function compressImageFromElement(img, settings, origFilename) {\n return new Promise((resolve, reject) => {\n let newW, newH;\n const type = settings.resizeType;\n if(type === 'percentage') {\n const r = parseInt(settings.resizeValue)\/100;\n newW = Math.round(img.width * r);\n newH = Math.round(img.height * r);\n } else if(type === 'pixel') {\n newW = parseInt(settings.pixelWidth) || img.width;\n newH = parseInt(settings.pixelHeight) || img.height;\n if(settings.preserveAspect) {\n const ratio = img.width\/img.height;\n if(newW && !newH) newH = Math.round(newW\/ratio);\n else if(!newW && newH) newW = Math.round(newH*ratio);\n else if(newW && newH) {\n const target = newW\/newH;\n if(ratio > target) newH = Math.round(newW\/ratio);\n else newW = Math.round(newH*ratio);\n }\n }\n } else if(type === 'cm' || type === 'inches') {\n const dpi = parseInt(settings.dpiValue) || 96;\n let wInch=0, hInch=0;\n if(type === 'cm') {\n wInch = (parseFloat(settings.cmWidth)||0)\/2.54;\n hInch = (parseFloat(settings.cmHeight)||0)\/2.54;\n } else {\n wInch = parseFloat(settings.inchWidth)||0;\n hInch = parseFloat(settings.inchHeight)||0;\n }\n newW = Math.round(wInch * dpi);\n newH = Math.round(hInch * dpi);\n if(settings.preserveAspect && newW && newH) {\n const ratio = img.width\/img.height;\n const target = newW\/newH;\n if(ratio > target) newH = Math.round(newW\/ratio);\n else newW = Math.round(newH*ratio);\n }\n }\n newW = Math.min(newW || img.width, 10000);\n newH = Math.min(newH || img.height, 10000);\n if(newW<=0) newW=img.width; if(newH<=0) newH=img.height;\n const canvas = document.createElement('canvas');\n canvas.width = newW; canvas.height = newH;\n const ctx = canvas.getContext('2d');\n ctx.drawImage(img, 0, 0, newW, newH);\n const mime = getSafeMimeType(settings.outputFormat);\n const qualityVal = parseInt(settings.quality)\/100;\n canvas.toBlob(blob => {\n if(!blob) reject(new Error('Compression failed'));\n else resolve({ blob, filename: origFilename, width:newW, height:newH, size:blob.size, type:settings.outputFormat });\n }, mime, qualityVal);\n });\n }\n\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 = () => compressImageFromElement(img, settings, file.name).then(resolve).catch(reject);\n img.onerror = () => reject(new Error('Load failed'));\n img.src = e.target.result;\n };\n reader.onerror = () => reject(new Error('Read failed'));\n reader.readAsDataURL(file);\n });\n }\n\n function updateSelectedFilesUI(files, statuses = {}) {\n const container = document.getElementById('selectedFilesContainer');\n const listDiv = document.getElementById('selectedFilesList');\n const countSpan = document.getElementById('selectedCount');\n if(!files.length) { container.style.display = 'none'; return; }\n container.style.display = 'block';\n countSpan.textContent = files.length;\n listDiv.innerHTML = '';\n files.forEach((file, idx) => {\n const div = document.createElement('div');\n div.className = 'file-item';\n div.innerHTML = `\n <div class=\"file-info\">\n <img decoding=\"async\" class=\"file-thumb\" id=\"thumb-${idx}\" src=\"\" alt=\"thumb\">\n <span class=\"file-name\" title=\"${file.name}\">${file.name}<\/span>\n <\/div>\n <div class=\"file-status\" id=\"status-${idx}\">${statuses[idx] || 'Pending'}<\/div>\n `;\n listDiv.appendChild(div);\n const reader = new FileReader();\n reader.onload = ev => { const thumb = document.getElementById(`thumb-${idx}`); if(thumb) thumb.src = ev.target.result; };\n reader.readAsDataURL(file);\n });\n }\n function setFileStatus(index, text, isSuccess=false, isError=false) {\n const el = document.getElementById(`status-${index}`);\n if(el) {\n el.textContent = text;\n el.classList.remove('success','error');\n if(isSuccess) el.classList.add('success');\n if(isError) el.classList.add('error');\n }\n }\n\n function processSingleFile(file) {\n if(!file.type.match('image.*')) { showMessage(uploadError, 'Not an image'); return false; }\n if(file.size > 20*1024*1024) { showMessage(uploadError, 'Max 20MB'); return false; }\n hideMessage(uploadError); hideMessage(uploadWarning);\n updateSelectedFilesUI([file], {0:'Loading...'});\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 originalImageData = { width:img.width, height:img.height, size:file.size, type:file.type.split('\/')[1].toUpperCase(), file:file };\n originalDimensions.textContent = `${img.width} x ${img.height}`;\n originalSize.textContent = formatFileSize(file.size);\n originalType.textContent = originalImageData.type;\n if(resizeType.value === 'pixel') { pixelWidth.value = img.width; pixelHeight.value = img.height; }\n compressBtn.disabled = false;\n exifContainer.style.display = 'block';\n exifTable.innerHTML = `<tr><td>Make<\/td><td>Camera Manufacturer<\/td><\/tr><tr><td>Model<\/td><td>Camera Model<\/td><\/tr><tr><td>Date<\/td><td>${new Date(file.lastModified).toLocaleString()}<\/td><\/tr><tr><td>Resolution<\/td><td>${img.width} x ${img.height}<\/td><\/tr><tr><td>File Size<\/td><td>${formatFileSize(file.size)}<\/td><\/tr>`;\n setFileStatus(0, 'Ready', true);\n currentRotation = 0;\n };\n img.onerror = () => showMessage(uploadError, 'Invalid image');\n img.src = e.target.result;\n };\n reader.readAsDataURL(file);\n return true;\n }\n\n function processBatchFiles(filesArray) {\n const limited = filesArray.slice(0,50);\n batchFiles = limited;\n updateSelectedFilesUI(limited);\n if(limited.length < filesArray.length) showMessage(uploadWarning, 'Only first 50 images');\n batchCompressBtn.style.display = 'block';\n compressBtn.style.display = 'none';\n downloadZipBtn.style.display = 'none';\n downloadBtn.style.display = 'none';\n batchCompressedResults = [];\n }\n\n function handleFileSelect() {\n const files = Array.from(fileInput.files);\n if(!files.length) return;\n if(batchMode.checked) processBatchFiles(files);\n else processSingleFile(files[0]);\n }\n\n browseBtn.addEventListener('click', () => fileInput.click());\n fileInput.addEventListener('change', handleFileSelect);\n dropArea.addEventListener('dragover', e => { e.preventDefault(); dropArea.classList.add('active'); });\n dropArea.addEventListener('dragleave', e => { e.preventDefault(); dropArea.classList.remove('active'); });\n dropArea.addEventListener('drop', e => { e.preventDefault(); dropArea.classList.remove('active'); if(e.dataTransfer.files.length) { fileInput.files = e.dataTransfer.files; handleFileSelect(); } });\n\n function handleResizeTypeChange() {\n const type = resizeType.value;\n document.getElementById('percentageInput').style.display = 'none';\n document.getElementById('pixelInputs').style.display = 'none';\n document.getElementById('cmInputs').style.display = 'none';\n document.getElementById('inchInputs').style.display = 'none';\n document.getElementById('aspectRatioContainer').style.display = 'none';\n document.getElementById('dpiContainer').style.display = 'none';\n if(type === 'percentage') document.getElementById('percentageInput').style.display = 'block';\n else if(type === 'pixel') { document.getElementById('pixelInputs').style.display = 'flex'; document.getElementById('aspectRatioContainer').style.display = 'flex'; }\n else if(type === 'cm' || type === 'inches') { \n if(type === 'cm') document.getElementById('cmInputs').style.display = 'flex';\n else document.getElementById('inchInputs').style.display = 'flex';\n document.getElementById('aspectRatioContainer').style.display = 'flex';\n document.getElementById('dpiContainer').style.display = 'block';\n }\n }\n resizeType.addEventListener('change', handleResizeTypeChange);\n quality.addEventListener('input', () => { qualityValue.textContent = quality.value+'%'; });\n outputFormat.addEventListener('change', () => { formatInfo.innerHTML = {jpeg:'JPEG best for photos',png:'PNG lossless',webp:'Modern format'}[outputFormat.value] || ''; });\n\n presetBtns.forEach(btn => btn.addEventListener('click', (e) => {\n const p = e.target.dataset.preset;\n if(p === 'web') { resizeType.value='pixel'; handleResizeTypeChange(); dpiValue.value='72'; quality.value='75'; quality.dispatchEvent(new Event('input')); }\n else if(p === 'print') { resizeType.value='inches'; handleResizeTypeChange(); dpiValue.value='300'; quality.value='95'; quality.dispatchEvent(new Event('input')); }\n else if(p === 'social') { resizeType.value='pixel'; handleResizeTypeChange(); pixelWidth.value='1080'; preserveAspect.checked=true; quality.value='85'; quality.dispatchEvent(new Event('input')); }\n else if(p === 'email') { resizeType.value='percentage'; handleResizeTypeChange(); resizeValue.value='50'; quality.value='70'; quality.dispatchEvent(new Event('input')); }\n }));\n\n function applyRotationFlip() {\n if(!originalImage) return;\n const canvas = document.createElement('canvas');\n let w = originalImage.width, h = originalImage.height;\n if(Math.abs(currentRotation) % 180 === 90) { canvas.width = h; canvas.height = w; } else { canvas.width = w; canvas.height = h; }\n const ctx = canvas.getContext('2d');\n ctx.translate(canvas.width\/2, canvas.height\/2);\n ctx.rotate(currentRotation * Math.PI\/180);\n ctx.drawImage(originalImage, -w\/2, -h\/2);\n const img = new Image();\n img.onload = () => { originalImage = img; originalDimensions.textContent = `${img.width} x ${img.height}`; originalPreview.src = img.src; };\n img.src = canvas.toDataURL();\n }\n rotateLeft.addEventListener('click', () => { if(!originalImage) return; currentRotation -= 90; applyRotationFlip(); });\n rotateRight.addEventListener('click', () => { if(!originalImage) return; currentRotation += 90; applyRotationFlip(); });\n flipH.addEventListener('click', () => { if(!originalImage) return; const canvas=document.createElement('canvas'); canvas.width=originalImage.width; canvas.height=originalImage.height; const ctx=canvas.getContext('2d'); ctx.translate(canvas.width,0); ctx.scale(-1,1); ctx.drawImage(originalImage,0,0); const img=new Image(); img.onload=()=>{ originalImage=img; originalPreview.src=img.src; }; img.src=canvas.toDataURL(); });\n flipV.addEventListener('click', () => { if(!originalImage) return; const canvas=document.createElement('canvas'); canvas.width=originalImage.width; canvas.height=originalImage.height; const ctx=canvas.getContext('2d'); ctx.translate(0,canvas.height); ctx.scale(1,-1); ctx.drawImage(originalImage,0,0); const img=new Image(); img.onload=()=>{ originalImage=img; originalPreview.src=img.src; }; img.src=canvas.toDataURL(); });\n\n async function compressSingle() {\n if(!originalImage) { showMessage(uploadError, 'No image'); return; }\n compressionLoading.style.display = 'block';\n const settings = {\n resizeType: resizeType.value, resizeValue: resizeValue.value, pixelWidth: pixelWidth.value, pixelHeight: pixelHeight.value,\n cmWidth: cmWidth.value, cmHeight: cmHeight.value, inchWidth: inchWidth.value, inchHeight: inchHeight.value,\n preserveAspect: preserveAspect.checked, dpiValue: dpiValue.value, outputFormat: outputFormat.value, quality: quality.value\n };\n try {\n const result = await compressImageFromElement(originalImage, settings, 'image');\n compressedImageData = result;\n compressedPreview.src = URL.createObjectURL(result.blob);\n compressedDimensions.textContent = `${result.width} x ${result.height}`;\n compressedSize.textContent = formatFileSize(result.size);\n compressedType.textContent = result.type.toUpperCase();\n const reduction = Math.round((1 - result.size \/ originalImageData.size) * 100);\n sizeReduction.textContent = `${reduction}%`;\n downloadBtn.disabled = false;\n showMessage(compressionSuccess, `Compressed! Reduced by ${reduction}%`);\n compressionLoading.style.display = 'none';\n if(batchFiles.length===0 && document.getElementById('status-0')) setFileStatus(0, 'Compressed', true);\n } catch(e) { showMessage(uploadError, e.message); compressionLoading.style.display = 'none'; }\n }\n compressBtn.addEventListener('click', compressSingle);\n downloadBtn.addEventListener('click', () => { if(compressedImageData) { const a=document.createElement('a'); a.href=URL.createObjectURL(compressedImageData.blob); a.download=`compressed.${compressedImageData.type}`; a.click(); URL.revokeObjectURL(a.href); } });\n\n async function compressBatch() {\n if(!batchFiles.length) { showMessage(batchWarning, 'No images'); return; }\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 const settings = {\n resizeType: resizeType.value, resizeValue: resizeValue.value, pixelWidth: pixelWidth.value, pixelHeight: pixelHeight.value,\n cmWidth: cmWidth.value, cmHeight: cmHeight.value, inchWidth: inchWidth.value, inchHeight: inchHeight.value,\n preserveAspect: preserveAspect.checked, dpiValue: dpiValue.value, outputFormat: outputFormat.value, quality: quality.value\n };\n batchCompressedResults = [];\n for(let i=0; i<batchFiles.length; i++) {\n setFileStatus(i, 'Processing');\n try {\n const res = await compressImageFile(batchFiles[i], settings);\n batchCompressedResults.push(res);\n setFileStatus(i, 'Done', true);\n } catch(e) { setFileStatus(i, 'Error', false, true); }\n batchProgressCurrent.textContent = i+1;\n batchProgress.value = ((i+1)\/batchFiles.length)*100;\n }\n batchLoading.style.display = 'none';\n batchCompressBtn.disabled = false;\n if(batchCompressedResults.length) {\n downloadZipBtn.style.display = 'block';\n showMessage(compressionSuccess, `Compressed ${batchCompressedResults.length}\/${batchFiles.length} images`);\n } else showMessage(batchWarning, 'No images compressed');\n }\n batchCompressBtn.addEventListener('click', compressBatch);\n downloadZipBtn.addEventListener('click', () => {\n if(!batchCompressedResults.length) 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_${Date.now()}.zip`;\n a.click();\n URL.revokeObjectURL(a.href);\n });\n });\n\n function resetAll() {\n fileInput.value = '';\n originalImage = null;\n compressedImageData = null;\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 = originalPreview.src;\n originalSize.textContent = '0 KB'; originalDimensions.textContent = '0 x 0'; originalType.textContent = '-';\n compressedSize.textContent = '0 KB'; compressedDimensions.textContent = '0 x 0'; compressedType.textContent = '-';\n sizeReduction.textContent = '0%'; compressBtn.disabled = true; downloadBtn.disabled = true;\n batchFiles = []; batchCompressedResults = [];\n updateSelectedFilesUI([]);\n batchCompressBtn.style.display = 'none'; downloadZipBtn.style.display = 'none';\n compressBtn.style.display = 'block'; downloadBtn.style.display = 'inline-flex';\n exifContainer.style.display = 'none';\n }\n newImageBtn.addEventListener('click', resetAll);\n resetBtn.addEventListener('click', resetAll);\n\n batchMode.addEventListener('change', () => {\n if(batchMode.checked) {\n fileInput.setAttribute('multiple', 'multiple');\n compressBtn.style.display = 'none';\n downloadBtn.style.display = 'none';\n if(batchFiles.length) batchCompressBtn.style.display = 'block';\n else batchCompressBtn.style.display = 'none';\n downloadZipBtn.style.display = 'none';\n } else {\n fileInput.removeAttribute('multiple');\n batchCompressBtn.style.display = 'none';\n compressBtn.style.display = 'block';\n downloadBtn.style.display = 'inline-flex';\n if(batchFiles.length && batchFiles[0]) processSingleFile(batchFiles[0]);\n else resetAll();\n }\n });\n\n handleResizeTypeChange();\n quality.dispatchEvent(new Event('input'));\n outputFormat.dispatchEvent(new Event('change'));\n document.getElementById('currentYear').textContent = new Date().getFullYear();\n resetAll();\n })();\n<\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Pixlop.com | Image Optimizer Pixlop.com Compress and resize your images online without losing quality. Support for multiple output formats, batch processing, and editing tools. Upload Image Drag & Drop your […]<\/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-11","page","type-page","status-publish","hentry"],"yoast_head":"\n<title>-<\/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=11\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"-\" \/>\n<meta property=\"og:description\" content=\"Pixlop.com | Image Optimizer Pixlop.com Compress and resize your images online without losing quality. Support for multiple output formats, batch processing, and editing tools. Upload Image Drag & Drop your […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/pixlop.com\/?page_id=11\" \/>\n<meta property=\"article:modified_time\" content=\"2026-04-04T13:05:28+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/pixlop.com\\\/?page_id=11\",\"url\":\"https:\\\/\\\/pixlop.com\\\/?page_id=11\",\"name\":\"-\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/pixlop.com\\\/#website\"},\"datePublished\":\"2026-04-04T09:54:45+00:00\",\"dateModified\":\"2026-04-04T13:05:28+00:00\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/pixlop.com\\\/?page_id=11\"]}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/pixlop.com\\\/#website\",\"url\":\"https:\\\/\\\/pixlop.com\\\/\",\"name\":\"\",\"description\":\"\",\"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\"}]}<\/script>\n","yoast_head_json":{"title":"-","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=11","og_locale":"en_US","og_type":"article","og_title":"-","og_description":"Pixlop.com | Image Optimizer Pixlop.com Compress and resize your images online without losing quality. Support for multiple output formats, batch processing, and editing tools. Upload Image Drag & Drop your […]","og_url":"https:\/\/pixlop.com\/?page_id=11","article_modified_time":"2026-04-04T13:05:28+00:00","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/pixlop.com\/?page_id=11","url":"https:\/\/pixlop.com\/?page_id=11","name":"-","isPartOf":{"@id":"https:\/\/pixlop.com\/#website"},"datePublished":"2026-04-04T09:54:45+00:00","dateModified":"2026-04-04T13:05:28+00:00","inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/pixlop.com\/?page_id=11"]}]},{"@type":"WebSite","@id":"https:\/\/pixlop.com\/#website","url":"https:\/\/pixlop.com\/","name":"","description":"","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"}]}},"_links":{"self":[{"href":"https:\/\/pixlop.com\/index.php?rest_route=\/wp\/v2\/pages\/11","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=11"}],"version-history":[{"count":1,"href":"https:\/\/pixlop.com\/index.php?rest_route=\/wp\/v2\/pages\/11\/revisions"}],"predecessor-version":[{"id":13,"href":"https:\/\/pixlop.com\/index.php?rest_route=\/wp\/v2\/pages\/11\/revisions\/13"}],"wp:attachment":[{"href":"https:\/\/pixlop.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=11"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}