{"id":28,"date":"2026-08-31T10:11:02","date_gmt":"2026-08-31T10:11:02","guid":{"rendered":"https:\/\/ankmavenmarketing.in\/tools\/?page_id=28"},"modified":"2026-09-09T12:25:26","modified_gmt":"2026-09-09T12:25:26","slug":"image-compressor","status":"publish","type":"page","link":"https:\/\/ankmavenmarketing.in\/tools\/image-compressor\/","title":{"rendered":"Image Compressor"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"28\" class=\"elementor elementor-28\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1b42069 e-con e-atomic-element e-flexbox-base e-e7afdc6 \" data-id=\"1b42069\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"1b42069\">\n    \t\t<div class=\"elementor-element elementor-element-880329c elementor-widget elementor-widget-shortcode\" data-id=\"880329c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\">    <!-- JSZip Library for Bulk ZIP Download -->\r\n    <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jszip\/3.10.1\/jszip.min.js\"><\/script>\r\n    \r\n    <!-- Ank Maven Marketing Pro Precision Compressor v3.7 (Brand Themed) -->\r\n    <div id=\"ank-ultimate-compressor\">\r\n        <style>\r\n            #ank-ultimate-compressor {\r\n                --ank-dark: #070d19; --ank-navy: #0f172a; --ank-cyan: #22d3ee; --ank-orange: #f97316; \r\n                --ank-border: #1e293b; --ank-card-bg: #0b1329; --ank-text: #f8fafc; --ank-muted: #94a3b8;\r\n                font-family: 'Inter', sans-serif; background: var(--ank-dark); max-width: 1080px; margin: 5px auto;\r\n                border: 1px solid var(--ank-border); color: var(--ank-text); box-sizing: border-box; position: relative;\r\n            }\r\n            #ank-ultimate-compressor * { box-sizing: border-box; }\r\n\r\n            .ank-head { background: var(--ank-navy); padding: 10px 14px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--ank-border); }\r\n            .ank-head h4 { color: #fff; margin: 0; font-size: 11px; letter-spacing: 2px; font-weight: 900; text-transform: uppercase; }\r\n            .ank-head h4 span { color: var(--ank-orange); }\r\n\r\n            \/* --- ULTRA COMPACT FEATURE GUIDE --- *\/\r\n            .ank-guide-box { background: var(--ank-card-bg); border-bottom: 1px solid var(--ank-border); padding: 6px 10px; font-size: 9px; color: var(--ank-muted); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 4px; }\r\n            .ank-guide-box span { font-weight: 800; color: var(--ank-cyan); }\r\n            .ank-guide-tags { display: flex; gap: 6px; flex-wrap: wrap; }\r\n            .ank-guide-tag { background: var(--ank-navy); border: 1px solid var(--ank-border); padding: 2px 6px; border-radius: 3px; font-size: 8px; font-weight: 700; color: var(--ank-cyan); }\r\n\r\n            .ank-opt-row { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--ank-border); background: var(--ank-dark); }\r\n            .ank-opt-row.row-2 { background: var(--ank-card-bg); }\r\n            \r\n            .ank-group { display: flex; flex-direction: column; padding: 8px 10px; border-right: 1px solid var(--ank-border); border-bottom: 1px solid var(--ank-border); height: 80px; justify-content: flex-start; }\r\n            .ank-group:nth-child(4n) { border-right: none; }\r\n            \r\n            .ank-label { font-size: 8px; font-weight: 900; color: var(--ank-orange); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 4px; display: flex; justify-content: space-between; align-items: center; }\r\n\r\n            .ank-ctrl-wrap { border: 1px solid var(--ank-border); height: 38px; width: 100%; border-radius: 4px; display: flex; align-items: center; background: var(--ank-navy); overflow: hidden; }\r\n            .ank-ctrl-box { border: none; height: 100%; width: 100%; padding: 0 8px; font-size: 10px; font-weight: 700; outline: none; background: transparent; color: var(--ank-text); display: flex; align-items: center; }\r\n\r\n            select.ank-ctrl-box { cursor: pointer; -webkit-appearance: none; background-image: url('data:image\/svg+xml;charset=US-ASCII,<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"%2322d3ee\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M6 9l6 6 6-6\"\/><\/svg>'); background-repeat: no-repeat; background-position: right 8px center; }\r\n            select.ank-ctrl-box option { background: var(--ank-navy); color: var(--ank-text); }\r\n\r\n            .mode-ui { width: 100%; height: 100%; display: flex; align-items: center; }\r\n            .ank-target-val { flex: 1; border-right: 1px solid var(--ank-border) !important; height: 100%; }\r\n            .ank-unit-sel { width: 45px !important; background: var(--ank-card-bg) !important; font-size: 9px; }\r\n\r\n            .ank-slider-inner { display: flex; align-items: center; gap: 6px; width: 100%; padding: 0 8px; }\r\n            .ank-slider { cursor: pointer; accent-color: var(--ank-cyan); flex: 1; margin: 0; }\r\n            .q-text { font-size: 10px; font-weight: 900; min-width: 25px; text-align: right; color: var(--ank-cyan); }\r\n\r\n            .ank-toggle-wrap { display: flex; align-items: center; justify-content: space-between; height: 100%; padding: 0 8px; font-size: 9px; font-weight: 800; cursor: pointer; width: 100%; color: var(--ank-text); }\r\n            .ank-toggle-wrap input { cursor: pointer; width: 14px; height: 14px; accent-color: var(--ank-cyan); }\r\n\r\n            .ank-view { display: grid; grid-template-columns: 1fr 1fr; height: 240px; background: var(--ank-border); gap: 1px; position: relative; }\r\n            .pnl { background: #040810; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; background-image: radial-gradient(#1e293b 0.8px, transparent 0.8px); background-size: 12px 12px; }\r\n            .pnl::after { content: attr(data-label); position: absolute; top: 8px; left: 8px; background: var(--ank-cyan); color: var(--ank-dark); font-size: 7px; padding: 3px 8px; font-weight: 900; z-index: 10; border-radius: 2px; }\r\n            .ank-view img { max-width: 90%; max-height: 90%; object-fit: contain; z-index: 5; }\r\n\r\n            .size-badge { position: absolute; bottom: 8px; right: 8px; background: var(--ank-navy); color: var(--ank-cyan); font-size: 9px; padding: 3px 7px; font-weight: bold; z-index: 10; border-radius: 3px; border: 1px solid var(--ank-border); }\r\n            .meta-badge { position: absolute; bottom: 8px; left: 8px; background: rgba(7, 13, 25, 0.9); color: var(--ank-orange); font-size: 7px; padding: 3px 6px; font-weight: bold; z-index: 10; border-radius: 3px; }\r\n            \r\n            .btn-single-dl { position: absolute; top: 8px; right: 8px; background: var(--ank-cyan); color: var(--ank-dark); border: none; font-size: 8px; font-weight: 900; padding: 4px 10px; cursor: pointer; border-radius: 3px; z-index: 20; display: none; text-transform: uppercase; }\r\n            .btn-single-dl:hover { opacity: 0.9; }\r\n\r\n            .ank-thumbs { display: none; gap: 8px; padding: 8px 10px; background: var(--ank-card-bg); border-top: 1px solid var(--ank-border); overflow-x: auto; max-height: 115px; }\r\n            .t-card { display: flex; flex-direction: column; gap: 2px; min-width: 60px; align-items: center; }\r\n            .t-box { width: 50px; height: 50px; border: 2px solid var(--ank-border); cursor: pointer; border-radius: 4px; overflow: hidden; background: var(--ank-navy); position: relative; }\r\n            .t-box.active { border-color: var(--ank-cyan); background: #0f2238; }\r\n            .t-box img { width: 100%; height: 100%; object-fit: cover; }\r\n            .t-check-label { font-size: 8px; font-weight: 700; color: var(--ank-muted); display: flex; align-items: center; gap: 2px; cursor: pointer; }\r\n            .t-check-label input { accent-color: var(--ank-cyan); }\r\n\r\n            .ank-foot { padding: 8px 12px; display: flex; justify-content: space-between; align-items: center; background: var(--ank-navy); border-top: 1px solid var(--ank-border); }\r\n            .btn-main { background: var(--ank-orange); color: white; border: none; padding: 0 18px; height: 35px; font-size: 10px; font-weight: 900; cursor: pointer; text-transform: uppercase; border-radius: 4px; transition: 0.2s; }\r\n            .btn-main:hover { opacity: 0.9; }\r\n            .btn-zip { background: var(--ank-cyan) !important; color: var(--ank-dark) !important; display: none; }\r\n            .btn-reset { background: var(--ank-card-bg); color: var(--ank-text); border: 1px solid var(--ank-border); }\r\n\r\n            .ank-credit { text-align: center; padding-bottom: 6px; font-size: 8px; font-weight: 700; color: var(--ank-muted); background: var(--ank-dark); }\r\n            .ank-credit a { color: var(--ank-cyan); text-decoration: none; border-bottom: 1px solid transparent; transition: 0.2s; }\r\n            .ank-credit a:hover { border-bottom-color: var(--ank-cyan); }\r\n\r\n            @media (max-width: 900px) { \r\n                .ank-opt-row { grid-template-columns: 1fr 1fr; } \r\n                .ank-group { border-right: 1px solid var(--ank-border) !important; }\r\n                .ank-group:nth-child(2n) { border-right: none !important; }\r\n                .ank-view { grid-template-columns: 1fr; height: 420px; } \r\n            }\r\n        <\/style>\r\n\r\n        <div class=\"ank-head\">\r\n            <h4>ANK MAVEN <span>MARKETING<\/span> \u2014 PRO PRECISION COMPRESSOR v3.7<\/h4>\r\n            <div id=\"sys-tag\" style=\"color:var(--ank-cyan); font-size:9px; font-weight:900;\">\u25cf READY<\/div>\r\n        <\/div>\r\n\r\n        <!-- ULTRA COMPACT CAPABILITIES BAR -->\r\n        <div class=\"ank-guide-box\">\r\n            <span>\u26a1 Quick Tool Features:<\/span>\r\n            <div class=\"ank-guide-tags\">\r\n                <div class=\"ank-guide-tag\">Dual Mode (% \/ KB)<\/div>\r\n                <div class=\"ank-guide-tag\">Precise Selection Control<\/div>\r\n                <div class=\"ank-guide-tag\">Single & ZIP Download<\/div>\r\n                <div class=\"ank-guide-tag\">Strict Size Guard<\/div>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <!-- ROW 1: CORE CONTROLS -->\r\n        <div class=\"ank-opt-row\">\r\n            <div class=\"ank-group\">\r\n                <span class=\"ank-label\">1. Method<\/span>\r\n                <div class=\"ank-ctrl-wrap\"><select id=\"ank-mode\" class=\"ank-ctrl-box\" onchange=\"switchMode()\"><option value=\"quality\">Quality (%)<\/option><option value=\"target\">Target Size<\/option><\/select><\/div>\r\n            <\/div>\r\n            <div class=\"ank-group\">\r\n                <span class=\"ank-label\">2. Value<\/span>\r\n                <div class=\"ank-ctrl-wrap\">\r\n                    <div id=\"ui-quality\" class=\"mode-ui ank-slider-inner\"><input type=\"range\" id=\"ank-q-slider\" class=\"ank-slider\" min=\"5\" max=\"100\" value=\"80\" oninput=\"document.getElementById('q-val').innerText=this.value+'%'\"><span id=\"q-val\" class=\"q-text\">80%<\/span><\/div>\r\n                    <div id=\"ui-target\" class=\"mode-ui\" style=\"display:none;\"><input type=\"number\" id=\"ank-target-val\" class=\"ank-ctrl-box ank-target-val\" placeholder=\"Value\"><select id=\"ank-target-unit\" class=\"ank-ctrl-box ank-unit-sel\"><option value=\"KB\">KB<\/option><option value=\"MB\">MB<\/option><\/select><\/div>\r\n                <\/div>\r\n            <\/div>\r\n            <div class=\"ank-group\">\r\n                <span class=\"ank-label\">3. Format<\/span>\r\n                <div class=\"ank-ctrl-wrap\">\r\n                    <select id=\"ank-format\" class=\"ank-ctrl-box\">\r\n                        <option value=\"jpeg\">JPG Image<\/option>\r\n                        <option value=\"webp\">WebP Format<\/option>\r\n                        <option value=\"png\">PNG Format<\/option>\r\n                        <option value=\"avif\">AVIF (Ultra)<\/option>\r\n                        <option value=\"ico\">ICO (Favicon)<\/option>\r\n                        <option value=\"bmp\">BMP Format<\/option>\r\n                    <\/select>\r\n                <\/div>\r\n            <\/div>\r\n            <div class=\"ank-group\">\r\n                <span class=\"ank-label\">4. Status<\/span>\r\n                <div class=\"ank-ctrl-wrap\"><div id=\"info-box\" class=\"ank-ctrl-box\" style=\"background:var(--ank-card-bg); color:var(--ank-muted); font-size:9px;\">UPLOAD IMAGES<\/div><\/div>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <!-- ROW 2: ADVANCED PRECISION OPTIONS -->\r\n        <div class=\"ank-opt-row row-2\">\r\n            <div class=\"ank-group\">\r\n                <span class=\"ank-label\">5. Resize Scale<\/span>\r\n                <div class=\"ank-ctrl-wrap\"><select id=\"ank-resize\" class=\"ank-ctrl-box\"><option value=\"100\">Original (100%)<\/option><option value=\"75\">Scale 75%<\/option><option value=\"50\">Scale 50% (HD)<\/option><option value=\"25\">Scale 25% (Thumb)<\/option><\/select><\/div>\r\n            <\/div>\r\n            <div class=\"ank-group\">\r\n                <span class=\"ank-label\">6. Max Width (px)<\/span>\r\n                <div class=\"ank-ctrl-wrap\"><input type=\"number\" id=\"ank-max-w\" class=\"ank-ctrl-box\" placeholder=\"Optional (e.g. 1920)\"><\/div>\r\n            <\/div>\r\n            <div class=\"ank-group\">\r\n                <span class=\"ank-label\">7. Background Color<\/span>\r\n                <div class=\"ank-ctrl-wrap\"><select id=\"ank-bgcolor\" class=\"ank-ctrl-box\"><option value=\"#ffffff\">Pure White (#fff)<\/option><option value=\"#000000\">Pure Black (#000)<\/option><option value=\"#f8fafc\">Light Gray (#f8fafc)<\/option><\/select><\/div>\r\n            <\/div>\r\n            <div class=\"ank-group\">\r\n                <span class=\"ank-label\">8. Strip Metadata<\/span>\r\n                <div class=\"ank-ctrl-wrap\">\r\n                    <label class=\"ank-toggle-wrap\">\r\n                        <span>Remove EXIF \/ Tags<\/span>\r\n                        <input type=\"checkbox\" id=\"ank-strip-meta\" checked>\r\n                    <\/label>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <!-- IMAGE PREVIEW VIEWER -->\r\n        <div class=\"ank-view\">\r\n            <button id=\"single-dl-btn\" class=\"btn-single-dl\" onclick=\"downloadCurrentActive()\">\u2b07 Download This<\/button>\r\n            <div class=\"pnl\" data-label=\"ORIGINAL\"><img id=\"v-orig\" style=\"display:none\"><div id=\"s-orig\" class=\"size-badge\" style=\"display:none\">0 KB<\/div><div id=\"m-orig\" class=\"meta-badge\" style=\"display:none\">0x0<\/div><\/div>\r\n            <div class=\"pnl\" data-label=\"COMPRESSED\"><img id=\"v-res\" style=\"display:none\"><div id=\"s-res\" class=\"size-badge\" style=\"background:var(--ank-cyan); color:var(--ank-dark); display:none\">0 KB<\/div><div id=\"m-res\" class=\"meta-badge\" style=\"background:rgba(34, 211, 238, 0.9); color:var(--ank-dark); display:none\">0x0<\/div><span id=\"wait-txt\" style=\"color:var(--ank-border); font-weight:900; font-size:11px;\">PREVIEW<\/span><\/div>\r\n        <\/div>\r\n\r\n        <!-- THUMBNAIL STRIP WITH MANUAL SELECTION CHECKBOXES -->\r\n        <div class=\"ank-thumbs\" id=\"thumb-strip\"><\/div>\r\n\r\n        <!-- FOOTER -->\r\n        <div class=\"ank-foot\">\r\n            <input type=\"file\" id=\"bulk-in\" accept=\"image\/*\" multiple onchange=\"handleFileSelect(this)\" style=\"font-size:10px; font-weight:bold; width:180px; color:var(--ank-text);\">\r\n            <div style=\"display:flex; gap:8px;\">\r\n                <button onclick=\"location.reload()\" class=\"btn-main btn-reset\">Reset<\/button>\r\n                <button onclick=\"processAll()\" id=\"run-btn\" class=\"btn-main\">Compress Selected<\/button>\r\n                <button onclick=\"downloadZip()\" id=\"dl-zip\" class=\"btn-main btn-zip\">Download ZIP<\/button>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"ank-credit\">\r\n            Idea Credit by <a href=\"https:\/\/www.instagram.com\/nishi_nishant\/\" target=\"_blank\" rel=\"noopener\">Nishi Nishant<\/a>\r\n        <\/div>\r\n\r\n        <script>\r\n            let rawFilesArray = [];\r\n            let processedData = {}; \r\n            let selectedImages = {}; \r\n            let activeViewIdx = 0;\r\n\r\n            function handleFileSelect(input) {\r\n                if (input.files && input.files.length > 0) {\r\n                    rawFilesArray = Array.from(input.files);\r\n                    processedData = {};\r\n                    selectedImages = {};\r\n\r\n                    const count = rawFilesArray.length;\r\n                    document.getElementById('info-box').innerText = count + \" FILE(S) SELECTED\";\r\n                    document.getElementById('sys-tag').innerText = \"\u25cf READY TO COMPRESS\";\r\n                    document.getElementById('sys-tag').style.color = \"var(--ank-cyan)\";\r\n\r\n                    const strip = document.getElementById('thumb-strip');\r\n                    strip.innerHTML = \"\"; strip.style.display = \"flex\";\r\n\r\n                    rawFilesArray.forEach((file, idx) => {\r\n                        selectedImages[idx] = true; \r\n\r\n                        const reader = new FileReader();\r\n                        reader.readAsDataURL(file);\r\n                        reader.onload = e => {\r\n                            const card = document.createElement('div'); card.className = \"t-card\";\r\n                            card.innerHTML = `\r\n                                <div class=\"t-box ${idx === 0 ? 'active' : ''}\" onclick=\"showViewIfProcessed(${idx})\" id=\"t-${idx}\"><img decoding=\"async\" src=\"${e.target.result}\"><\/div>\r\n                                <label class=\"t-check-label\">\r\n                                    <input type=\"checkbox\" id=\"chk-${idx}\" checked onclick=\"event.stopPropagation(); toggleSelection(${idx}, this.checked)\"> #${idx+1}\r\n                                <\/label>\r\n                            `;\r\n                            strip.appendChild(card);\r\n                            if (idx === 0) {\r\n                                showViewIfProcessed(0);\r\n                            }\r\n                        };\r\n                    });\r\n                }\r\n            }\r\n\r\n            function toggleSelection(idx, isChecked) {\r\n                selectedImages[idx] = isChecked;\r\n            }\r\n\r\n            function switchMode() {\r\n                const m = document.getElementById('ank-mode').value;\r\n                document.getElementById('ui-quality').style.display = m === 'quality' ? 'flex' : 'none';\r\n                document.getElementById('ui-target').style.display = m === 'target' ? 'flex' : 'none';\r\n            }\r\n\r\n            async function processAll() {\r\n                const activeIndices = Object.keys(selectedImages).filter(idx => selectedImages[idx]);\r\n                if (rawFilesArray.length === 0) return alert(\"Please select one or more images first!\");\r\n                if (activeIndices.length === 0) return alert(\"Please check at least one image in the thumbnail strip to compress!\");\r\n\r\n                const btn = document.getElementById('run-btn');\r\n                btn.innerText = \"Processing...\"; btn.disabled = true;\r\n                document.getElementById('wait-txt').style.display = \"none\";\r\n\r\n                const mode = document.getElementById('ank-mode').value;\r\n                const fmt = document.getElementById('ank-format').value;\r\n                const targetVal = parseFloat(document.getElementById('ank-target-val').value);\r\n                const userTargetKB = document.getElementById('ank-target-unit').value === 'MB' ? targetVal * 1024 : targetVal;\r\n                const manualQ = document.getElementById('ank-q-slider').value \/ 100;\r\n                const scalePct = parseInt(document.getElementById('ank-resize').value) \/ 100;\r\n                const customMaxWidth = parseInt(document.getElementById('ank-max-w').value);\r\n                const bgColor = document.getElementById('ank-bgcolor').value;\r\n\r\n                for (let k = 0; k < activeIndices.length; k++) {\r\n                    const i = activeIndices[k];\r\n                    const file = rawFilesArray[i];\r\n                    const fileKB = file.size \/ 1024;\r\n                    let res;\r\n                    if (mode === 'target' && !isNaN(userTargetKB)) {\r\n                        const effectiveTarget = Math.min(userTargetKB, fileKB - 0.05); \r\n                        res = await smartSearch(file, effectiveTarget, fmt, scalePct, customMaxWidth, bgColor);\r\n                    } else {\r\n                        res = await manualCompress(file, manualQ, fmt, scalePct, customMaxWidth, bgColor);\r\n                    }\r\n                    processedData[i] = res;\r\n                    \r\n                    const tBox = document.getElementById(`t-${i}`);\r\n                    if (tBox) tBox.innerHTML = `<img decoding=\"async\" src=\"${res.res}\">`;\r\n                }\r\n\r\n                showView(activeIndices[0]);\r\n                btn.innerText = \"Compress Selected\"; btn.disabled = false;\r\n                document.getElementById('dl-zip').style.display = \"block\";\r\n                document.getElementById('single-dl-btn').style.display = \"block\";\r\n                document.getElementById('sys-tag').innerText = \"\u25cf COMPLETE\";\r\n                document.getElementById('sys-tag').style.color = \"var(--ank-green)\";\r\n                document.getElementById('info-box').innerText = activeIndices.length + \" IMAGES PROCESSED\";\r\n            }\r\n\r\n            function showViewIfProcessed(i) {\r\n                activeViewIdx = i;\r\n                if (processedData[i]) {\r\n                    showView(i);\r\n                    document.getElementById('single-dl-btn').style.display = \"block\";\r\n                } else {\r\n                    const file = rawFilesArray[i];\r\n                    const reader = new FileReader();\r\n                    reader.readAsDataURL(file);\r\n                    reader.onload = e => {\r\n                        const tempImg = new Image();\r\n                        tempImg.src = e.target.result;\r\n                        tempImg.onload = () => {\r\n                            document.getElementById('v-orig').src = e.target.result;\r\n                            document.getElementById('v-orig').style.display = \"block\";\r\n                            document.getElementById('s-orig').innerText = Math.round(file.size \/ 1024) + \" KB\";\r\n                            document.getElementById('m-orig').innerText = `${tempImg.width}x${tempImg.height}`;\r\n                            document.getElementById('s-orig').style.display = \"block\";\r\n                            document.getElementById('m-orig').style.display = \"block\";\r\n\r\n                            document.getElementById('v-res').style.display = \"none\";\r\n                            document.getElementById('s-res').style.display = \"none\";\r\n                            document.getElementById('m-res').style.display = \"none\";\r\n                            document.getElementById('wait-txt').style.display = \"block\";\r\n                            document.getElementById('single-dl-btn').style.display = \"none\";\r\n                        };\r\n                    };\r\n                }\r\n                document.querySelectorAll('.t-box').forEach((b, idx) => b.classList.toggle('active', idx === i));\r\n            }\r\n\r\n            async function smartSearch(file, target, format, scale, maxW, bg) {\r\n                const imgData = await loadImage(file);\r\n                const originalKB = file.size \/ 1024;\r\n                const finalTarget = Math.min(target, originalKB - 0.05);\r\n\r\n                let low = 0.01, high = 1.0, bestBlob = null;\r\n                for (let i = 0; i < 15; i++) {\r\n                    let mid = (low + high) \/ 2;\r\n                    let blob = await runCanvas(imgData, mid, format, scale, maxW, bg);\r\n                    if (blob && (blob.size \/ 1024) <= finalTarget) { bestBlob = blob; low = mid; } else { high = mid; }\r\n                }\r\n                if (!bestBlob) {\r\n                    bestBlob = await runCanvas(imgData, 0.01, format, scale, maxW, bg);\r\n                }\r\n                if (!bestBlob || bestBlob.size >= file.size) {\r\n                    bestBlob = await getSmallerFallback(imgData, file, format, scale, maxW, bg);\r\n                }\r\n                return finalize(file, bestBlob, imgData.b64, format, imgData.w, imgData.h);\r\n            }\r\n\r\n            async function manualCompress(file, q, format, scale, maxW, bg) {\r\n                const imgData = await loadImage(file);\r\n                let blob = await runCanvas(imgData, q, format, scale, maxW, bg);\r\n                \r\n                if (!blob || blob.size >= file.size) {\r\n                    blob = await getSmallerFallback(imgData, file, format, scale, maxW, bg);\r\n                }\r\n                return finalize(file, blob, imgData.b64, format, imgData.w, imgData.h);\r\n            }\r\n\r\n            async function getSmallerFallback(imgData, file, format, scale, maxW, bg) {\r\n                let currentQ = 0.8;\r\n                let best = null;\r\n                for (let step = 0; step < 8; step++) {\r\n                    let tempBlob = await runCanvas(imgData, currentQ, format, scale, maxW, bg);\r\n                    if (tempBlob && tempBlob.size < file.size) {\r\n                        best = tempBlob;\r\n                        break;\r\n                    }\r\n                    currentQ -= 0.1;\r\n                }\r\n                return best || file; \r\n            }\r\n\r\n            function loadImage(file) {\r\n                return new Promise(res => {\r\n                    const r = new FileReader(); r.readAsDataURL(file);\r\n                    r.onload = e => {\r\n                        const i = new Image(); i.src = e.target.result;\r\n                        i.onload = () => res({ i, b64: e.target.result, w: i.width, h: i.height });\r\n                    };\r\n                });\r\n            }\r\n\r\n            function runCanvas(data, q, f, scale, maxW, bg) {\r\n                return new Promise(res => {\r\n                    let targetW = Math.round(data.w * scale);\r\n                    let targetH = Math.round(data.h * scale);\r\n                    if (!isNaN(maxW) && maxW > 0 && targetW > maxW) {\r\n                        targetH = Math.round(targetH * (maxW \/ targetW));\r\n                        targetW = maxW;\r\n                    }\r\n\r\n                    if (f === 'ico' && (targetW > 256 || targetH > 256)) {\r\n                        targetW = 256; targetH = 256;\r\n                    }\r\n\r\n                    const c = document.createElement('canvas'); \r\n                    c.width = targetW; c.height = targetH;\r\n                    const ctx = c.getContext('2d');\r\n\r\n                    if (f === 'jpeg' || f === 'bmp' || f === 'ico') { \r\n                        ctx.fillStyle = bg; \r\n                        ctx.fillRect(0, 0, c.width, c.height); \r\n                    }\r\n                    \r\n                    ctx.drawImage(data.i, 0, 0, c.width, c.height);\r\n\r\n                    let mime = 'image\/jpeg';\r\n                    if (f === 'webp') mime = 'image\/webp';\r\n                    else if (f === 'png' || f === 'ico') mime = 'image\/png';\r\n                    else if (f === 'avif') mime = 'image\/avif';\r\n                    else if (f === 'bmp') mime = 'image\/bmp';\r\n\r\n                    c.toBlob(b => {\r\n                        if (!b && f === 'avif') {\r\n                            c.toBlob(nb => res(nb), 'image\/webp', q);\r\n                        } else {\r\n                            res(b);\r\n                        }\r\n                    }, mime, q);\r\n                });\r\n            }\r\n\r\n            function finalize(file, blob, b64, f, w, h) {\r\n                let ext = f;\r\n                if (f === 'jpeg') ext = 'jpg';\r\n                if (f === 'ico') ext = 'ico';\r\n                const finalBlob = (blob && blob.size < file.size) ? blob : file;\r\n                const savedBytes = file.size - finalBlob.size;\r\n                const savedPct = savedBytes > 0 ? Math.round((savedBytes \/ file.size) * 100) : 0;\r\n                \r\n                return {\r\n                    name: file.name.split('.')[0], orig: b64, res: URL.createObjectURL(finalBlob),\r\n                    blob: finalBlob, oSize: Math.round(file.size \/ 1024), cSize: Math.round(finalBlob.size \/ 1024),\r\n                    saved: savedPct, ext: ext, dim: `${w}x${h}`, \r\n                    newDim: `${Math.round(w * (parseInt(document.getElementById('ank-resize').value)\/100))}x${Math.round(h * (parseInt(document.getElementById('ank-resize').value)\/100))}`\r\n                };\r\n            }\r\n\r\n            function showView(i) {\r\n                activeViewIdx = i;\r\n                const d = processedData[i];\r\n                if (!d) return;\r\n                document.getElementById('v-orig').src = d.orig; document.getElementById('v-res').src = d.res;\r\n                document.getElementById('v-orig').style.display = document.getElementById('v-res').style.display = \"block\";\r\n                document.getElementById('s-orig').innerText = d.oSize + \" KB\"; document.getElementById('s-res').innerText = d.cSize + \" KB (-\" + d.saved + \"%)\";\r\n                document.getElementById('m-orig').innerText = d.dim; document.getElementById('m-res').innerText = d.newDim;\r\n                document.getElementById('s-orig').style.display = document.getElementById('s-orig').style.display = \"block\";\r\n                document.getElementById('s-res').style.display = document.getElementById('s-res').style.display = \"block\";\r\n                document.getElementById('m-orig').style.display = document.getElementById('m-res').style.display = \"block\";\r\n                document.getElementById('wait-txt').style.display = \"none\";\r\n                document.getElementById('single-dl-btn').style.display = \"block\";\r\n                document.getElementById('info-box').innerText = d.newDim + \" (\" + d.ext.toUpperCase() + \")\";\r\n                document.querySelectorAll('.t-box').forEach((b, idx) => b.classList.toggle('active', idx === i));\r\n            }\r\n\r\n            function downloadCurrentActive() {\r\n                dlOne(activeViewIdx);\r\n            }\r\n\r\n            function dlOne(i) {\r\n                const d = processedData[i]; \r\n                if (!d) return alert(\"Please compress this image first!\");\r\n                const a = document.createElement('a');\r\n                a.href = d.res; a.download = `AnkMaven-${d.name}.${d.ext}`; a.click();\r\n            }\r\n\r\n            async function downloadZip() {\r\n                const zip = new JSZip(); \r\n                const activeIndices = Object.keys(selectedImages).filter(idx => selectedImages[idx] && processedData[idx]);\r\n                if (activeIndices.length === 0) return alert(\"No compressed images selected for download!\");\r\n                \r\n                activeIndices.length === 1 ? dlOne(activeIndices[0]) : activeIndices.forEach(i => {\r\n                    const img = processedData[i];\r\n                    zip.file(`AnkMaven-${img.name}.${img.ext}`, img.blob);\r\n                });\r\n\r\n                if (activeIndices.length > 1) {\r\n                    const content = await zip.generateAsync({type: \"blob\"});\r\n                    const a = document.createElement('a'); a.href = URL.createObjectURL(content); a.download = \"AnkMaven_Selected_Compressed.zip\"; a.click();\r\n                }\r\n            }\r\n        <\/script>\r\n    <\/div>\r\n    <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-28","page","type-page","status-publish","hentry"],"_hostinger_reach_plugin_has_subscription_block":false,"_hostinger_reach_plugin_is_elementor":false,"_links":{"self":[{"href":"https:\/\/ankmavenmarketing.in\/tools\/wp-json\/wp\/v2\/pages\/28","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ankmavenmarketing.in\/tools\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ankmavenmarketing.in\/tools\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ankmavenmarketing.in\/tools\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ankmavenmarketing.in\/tools\/wp-json\/wp\/v2\/comments?post=28"}],"version-history":[{"count":10,"href":"https:\/\/ankmavenmarketing.in\/tools\/wp-json\/wp\/v2\/pages\/28\/revisions"}],"predecessor-version":[{"id":41,"href":"https:\/\/ankmavenmarketing.in\/tools\/wp-json\/wp\/v2\/pages\/28\/revisions\/41"}],"wp:attachment":[{"href":"https:\/\/ankmavenmarketing.in\/tools\/wp-json\/wp\/v2\/media?parent=28"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}