Pro Image Resizer, Compressor & Converter<\/title>\n \n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jspdf\/2.5.1\/jspdf.umd.min.js\"><\/script>\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jszip\/3.10.1\/jszip.min.js\"><\/script>\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/cropperjs\/1.5.13\/cropper.min.css\">\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/cropperjs\/1.5.13\/cropper.min.js\"><\/script>\n\n <style>\n :root {\n --primary: #0F172A;\n --primary-hover: #1E293B;\n --accent: #FF6600;\n --accent-hover: #E05500;\n --bg: #F8FAFC;\n --card-bg: #FFFFFF;\n --text: #0F172A;\n --subtext: #64748B;\n --border: #CBD5E1;\n --input-bg: #FFFFFF;\n --upload-bg: #FAFAFA;\n --shadow: 0 4px 15px rgba(15, 23, 42, 0.08);\n }\n\n body.dark-theme {\n --bg: #0F172A;\n --card-bg: #1E293B;\n --text: #F8FAFC;\n --subtext: #94A3B8;\n --border: #334155;\n --input-bg: #0F172A;\n --upload-bg: #182234;\n }\n\n * { box-sizing: border-box; margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif; }\n body { background-color: var(--bg); color: var(--text); display: flex; justify-content: center; align-items: center; min-height: 100vh; padding: 15px; transition: background 0.3s; }\n .container { background-color: var(--card-bg); border-radius: 16px; box-shadow: var(--shadow); width: 100%; max-width: 760px; padding: 24px; }\n .header-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }\n .theme-toggle { background: transparent; border: 1px solid var(--border); padding: 6px 12px; border-radius: 20px; color: var(--text); cursor: pointer; font-size: 0.8rem; font-weight: 600; }\n h1 { font-size: 1.8rem; text-align: center; font-weight: 800; margin-bottom: 6px; }\n h1 .orange { color: var(--accent); }\n p.subtitle { font-size: 0.875rem; color: var(--subtext); text-align: center; margin-bottom: 24px; }\n .upload-area { border: 2px dashed var(--border); border-radius: 12px; padding: 28px 15px; text-align: center; cursor: pointer; transition: 0.2s; margin-bottom: 20px; background: var(--upload-bg); }\n .upload-area:hover, .upload-area.dragover { border-color: var(--accent); background-color: rgba(255, 102, 0, 0.05); }\n .upload-area input { display: none; }\n .control-group { margin-bottom: 18px; }\n label { font-size: 0.875rem; font-weight: 600; display: block; margin-bottom: 8px; color: var(--text); }\n .presets { display: grid; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: 8px; margin-bottom: 12px; }\n .btn-preset { padding: 10px; border: 1px solid var(--border); border-radius: 8px; background-color: var(--input-bg); color: var(--text); cursor: pointer; font-weight: 600; font-size: 0.85rem; transition: 0.2s; }\n .btn-preset.active { background-color: var(--accent); color: white; border-color: var(--accent); }\n .custom-kb-box, .dimension-box { display: flex; gap: 10px; align-items: center; margin-top: 8px; flex-wrap: wrap; }\n .custom-kb-box input, .dimension-box input, .format-select, .unit-select { padding: 10px; border: 1px solid var(--border); border-radius: 8px; outline: none; font-size: 0.9rem; background-color: var(--input-bg); color: var(--text); }\n .dimension-box input { flex: 1; min-width: 80px; }\n .format-select { width: 100%; }\n .image-list-container { display: none; margin-top: 24px; border-top: 1px solid var(--border); padding-top: 20px; }\n .list-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }\n .btn-clear { background: transparent; color: #EF4444; border: none; font-size: 0.8rem; cursor: pointer; font-weight: 600; }\n .image-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; margin-bottom: 20px; }\n .img-card { background: var(--upload-bg); border: 1px solid var(--border); border-radius: 8px; padding: 10px; text-align: center; display: flex; flex-direction: column; justify-content: space-between; }\n .img-card img { width: 100%; height: 100px; object-fit: contain; border-radius: 4px; margin-bottom: 8px; background: rgba(0,0,0,0.05); }\n .img-card .file-info { font-size: 0.75rem; color: var(--subtext); display: block; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n .card-actions { display: flex; gap: 6px; margin-top: 8px; }\n .card-actions button { flex: 1; padding: 6px 2px; font-size: 0.75rem; }\n .btn-navy { background-color: var(--primary); color: #FFF; border: none; border-radius: 6px; cursor: pointer; font-weight: 600; }\n .btn-cancel { background-color: #EF4444 !important; }\n .btn-main { width: 100%; padding: 14px; font-size: 1rem; margin-top: 10px; background-color: var(--accent); color: white; border: none; border-radius: 8px; font-weight: bold; cursor: pointer; }\n .btn-main:disabled { background-color: #94A3B8; cursor: not-allowed; }\n\n \/* Modal Styles *\/\n .modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); z-index: 9999; justify-content: center; align-items: center; padding: 15px; }\n .modal-content { background: var(--card-bg); padding: 20px; border-radius: 12px; width: 100%; max-width: 500px; display: flex; flex-direction: column; gap: 15px; }\n .crop-container { width: 100%; max-height: 45vh; overflow: hidden; }\n .crop-container img { max-width: 100%; }\n .aspect-ratios { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 5px; }\n .aspect-btn { padding: 4px 8px; font-size: 0.75rem; border: 1px solid var(--border); background: var(--input-bg); color: var(--text); border-radius: 4px; cursor: pointer; }\n <\/style>\n<\/head>\n<body>\n\n<div class=\"container\">\n <div class=\"header-bar\">\n <span><\/span>\n <button class=\"theme-toggle\" id=\"theme-btn\">\ud83c\udf19 Dark Mode<\/button>\n <\/div>\n\n <h1>Image <span class=\"orange\">Size Converter<\/span> & Compressor<\/h1>\n <p class=\"subtitle\">Compress images to exact KB targets without quality degradation.<\/p>\n\n <div class=\"upload-area\" id=\"drop-area\">\n <p><strong>Click to select images<\/strong> or drag & drop<\/p>\n <input type=\"file\" id=\"file-input\" accept=\"image\/jpeg, image\/png, image\/webp\" multiple>\n <\/div>\n\n <div class=\"control-group\">\n <label for=\"format-select\">Select Output Format:<\/label>\n <select id=\"format-select\" class=\"format-select\">\n <option value=\"image\/jpeg\">JPG \/ JPEG<\/option>\n <option value=\"image\/webp\">WEBP<\/option>\n <option value=\"image\/png\">PNG<\/option>\n <option value=\"application\/pdf\">PDF Document (.pdf)<\/option>\n <\/select>\n <\/div>\n\n <div class=\"control-group\">\n <label>Select Target File Size (KB):<\/label>\n <div class=\"presets\">\n <button class=\"btn-preset active\" data-kb=\"20\">20 KB<\/button>\n <button class=\"btn-preset\" data-kb=\"50\">50 KB<\/button>\n <button class=\"btn-preset\" data-kb=\"100\">100 KB<\/button>\n <button class=\"btn-preset\" data-kb=\"custom\">Custom<\/button>\n <\/div>\n <div class=\"custom-kb-box\" id=\"custom-box\" style=\"display:none;\">\n <input type=\"number\" id=\"custom-kb-input\" placeholder=\"Enter KB (e.g. 150)\" min=\"5\" value=\"150\">\n <span style=\"font-size: 0.85rem; font-weight: 600;\">KB<\/span>\n <\/div>\n <\/div>\n\n <div class=\"control-group\">\n <label>Custom Dimensions (Optional):<\/label>\n <div class=\"dimension-box\">\n <input type=\"number\" id=\"dim-width\" placeholder=\"Width\">\n <span>x<\/span>\n <input type=\"number\" id=\"dim-height\" placeholder=\"Height\">\n <select id=\"unit-select\" class=\"unit-select\">\n <option value=\"px\">px<\/option>\n <option value=\"cm\">cm<\/option>\n <option value=\"mm\">mm<\/option>\n <option value=\"in\">inch<\/option>\n <\/select>\n <\/div>\n <\/div>\n\n <div class=\"image-list-container\" id=\"image-list-container\">\n <div class=\"list-header\">\n <label style=\"margin:0;\">Uploaded Images:<\/label>\n <button class=\"btn-clear\" id=\"clear-all-btn\">Clear All<\/button>\n <\/div>\n <div class=\"image-grid\" id=\"image-grid\"><\/div>\n <button class=\"btn-main\" id=\"download-btn\">Download File(s)<\/button>\n <\/div>\n<\/div>\n\n\n<div class=\"modal\" id=\"crop-modal\">\n <div class=\"modal-content\">\n <h3>Crop & Adjust Aspect Ratio<\/h3>\n <div class=\"aspect-ratios\">\n <button class=\"aspect-btn\" data-ratio=\"NaN\">Free<\/button>\n <button class=\"aspect-btn\" data-ratio=\"1\">1:1 (Square)<\/button>\n <button class=\"aspect-btn\" data-ratio=\"0.8\">4:5 (Portrait)<\/button>\n <button class=\"aspect-btn\" data-ratio=\"1.7777\">16:9 (Widescreen)<\/button>\n <\/div>\n <div class=\"crop-container\">\n <img id=\"crop-target\" alt=\"Crop Target\">\n <\/div>\n <div style=\"display: flex; gap: 10px; justify-content: flex-end;\">\n <button class=\"btn-navy btn-cancel\" id=\"cancel-crop-btn\">Cancel<\/button>\n <button class=\"btn-navy\" id=\"apply-crop-btn\">Apply Crop<\/button>\n <\/div>\n <\/div>\n<\/div>\n\n<script>\n let filesState = [];\n let targetKB = 20;\n let targetFormat = 'image\/jpeg';\n let activeCropIndex = null;\n let cropperInstance = null;\n\n const fileInput = document.getElementById('file-input');\n const dropArea = document.getElementById('drop-area');\n const imageListContainer = document.getElementById('image-list-container');\n const imageGrid = document.getElementById('image-grid');\n const downloadBtn = document.getElementById('download-btn');\n const formatSelect = document.getElementById('format-select');\n const customBox = document.getElementById('custom-box');\n const customKbInput = document.getElementById('custom-kb-input');\n const themeBtn = document.getElementById('theme-btn');\n const clearAllBtn = document.getElementById('clear-all-btn');\n\n themeBtn.addEventListener('click', () => {\n document.body.classList.toggle('dark-theme');\n themeBtn.innerText = document.body.classList.contains('dark-theme') ? '\u2600\ufe0f Light Mode' : '\ud83c\udf19 Dark Mode';\n });\n\n dropArea.addEventListener('click', () => fileInput.click());\n ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(e => dropArea.addEventListener(e, ev => { ev.preventDefault(); ev.stopPropagation(); }));\n ['dragenter', 'dragover'].forEach(e => dropArea.addEventListener(e, () => dropArea.classList.add('dragover')));\n ['dragleave', 'drop'].forEach(e => dropArea.addEventListener(e, () => dropArea.classList.remove('dragover')));\n dropArea.addEventListener('drop', e => { if (e.dataTransfer.files.length) addFiles(Array.from(e.dataTransfer.files)); });\n fileInput.addEventListener('change', e => { if (e.target.files.length) { addFiles(Array.from(e.target.files)); fileInput.value = ''; } });\n\n document.querySelectorAll('.btn-preset').forEach(btn => {\n btn.addEventListener('click', () => {\n document.querySelectorAll('.btn-preset').forEach(b => b.classList.remove('active'));\n btn.classList.add('active');\n const val = btn.getAttribute('data-kb');\n if (val === 'custom') { customBox.style.display = 'flex'; targetKB = parseInt(customKbInput.value) || 150; }\n else { customBox.style.display = 'none'; targetKB = parseInt(val); }\n processAll();\n });\n });\n\n customKbInput.addEventListener('input', () => { targetKB = parseInt(customKbInput.value) || 20; processAll(); });\n formatSelect.addEventListener('change', e => { targetFormat = e.target.value; processAll(); });\n ['dim-width', 'dim-height', 'unit-select'].forEach(id => document.getElementById(id).addEventListener('input', processAll));\n\n clearAllBtn.addEventListener('click', () => {\n filesState.forEach(f => { if(f.previewUrl) URL.revokeObjectURL(f.previewUrl); });\n filesState = [];\n imageListContainer.style.display = 'none';\n });\n\n function addFiles(files) {\n files.forEach(f => {\n if (f.type.startsWith('image\/')) {\n filesState.push({ originalFile: f, workingImage: f, outputBlob: null, outputSize: 0, previewUrl: null });\n }\n });\n if (filesState.length > 0) {\n imageListContainer.style.display = 'block';\n processAll();\n }\n }\n\n async function processAll() {\n downloadBtn.disabled = true;\n downloadBtn.innerText = 'Processing Images...';\n for (let i = 0; i < filesState.length; i++) {\n const blob = await smartCompress(filesState[i].workingImage);\n filesState[i].outputBlob = blob;\n filesState[i].outputSize = blob ? blob.size : 0;\n }\n renderGrid();\n const validFiles = filesState.filter(f => f.outputBlob !== null);\n if (validFiles.length > 0) {\n downloadBtn.disabled = false;\n downloadBtn.innerText = validFiles.length > 1 ? `Download All as ZIP (${validFiles.length})` : `Download Image`;\n } else {\n downloadBtn.innerText = 'Conversion Failed';\n }\n }\n\n function renderGrid() {\n imageGrid.innerHTML = '';\n filesState.forEach((item, index) => {\n if (item.previewUrl) URL.revokeObjectURL(item.previewUrl);\n item.previewUrl = URL.createObjectURL(item.outputBlob || item.workingImage);\n\n const card = document.createElement('div');\n card.className = 'img-card';\n const sizeStr = item.outputBlob ? (item.outputSize \/ 1024).toFixed(1) + ' KB' : 'Processing...';\n\n card.innerHTML = `\n <img decoding=\"async\" src=\"${item.previewUrl}\" alt=\"preview\">\n <span class=\"file-info\"><strong>${item.originalFile.name}<\/strong><\/span>\n <span class=\"file-info\" style=\"color:var(--accent); font-weight:bold;\">Target: ${sizeStr}<\/span>\n <div class=\"card-actions\">\n <button class=\"btn-navy crop-btn\">Crop<\/button>\n <button class=\"btn-navy btn-cancel remove-btn\">Remove<\/button>\n <\/div>\n `;\n card.querySelector('.crop-btn').onclick = () => openCrop(index);\n card.querySelector('.remove-btn').onclick = () => {\n if(filesState[index].previewUrl) URL.revokeObjectURL(filesState[index].previewUrl);\n filesState.splice(index, 1);\n if (filesState.length === 0) imageListContainer.style.display = 'none';\n else processAll();\n };\n imageGrid.appendChild(card);\n });\n }\n\n \/\/ Advanced Binary Search Compression Engine\n function smartCompress(file) {\n return new Promise((resolve) => {\n const img = new Image();\n img.src = URL.createObjectURL(file);\n img.onload = async () => {\n URL.revokeObjectURL(img.src);\n let canvas = document.createElement('canvas');\n let width = img.width;\n let height = img.height;\n\n const customW = parseFloat(document.getElementById('dim-width').value);\n const customH = parseFloat(document.getElementById('dim-height').value);\n const unit = document.getElementById('unit-select').value;\n\n if (customW || customH) {\n const dpi = 96;\n let scale = 1;\n if (unit === 'cm') scale = dpi \/ 2.54;\n if (unit === 'mm') scale = dpi \/ 25.4;\n if (unit === 'in') scale = dpi;\n\n width = customW ? customW * scale : (customH * scale * img.width) \/ img.height;\n height = customH ? customH * scale : (customW * scale * img.height) \/ img.width;\n }\n\n canvas.width = width;\n canvas.height = height;\n const ctx = canvas.getContext('2d');\n ctx.fillStyle = '#FFFFFF';\n ctx.fillRect(0, 0, width, height);\n ctx.drawImage(img, 0, 0, width, height);\n\n const maxBytes = targetKB * 1024;\n const mime = targetFormat === 'application\/pdf' ? 'image\/jpeg' : targetFormat;\n\n if (mime === 'image\/png') {\n canvas.toBlob((blob) => resolve(blob), 'image\/png');\n return;\n }\n\n \/\/ Binary Search Optimization for exact target size\n let minQuality = 0.01;\n let maxQuality = 0.98;\n let bestBlob = null;\n\n for (let i = 0; i < 7; i++) {\n let midQuality = (minQuality + maxQuality) \/ 2;\n let blob = await new Promise(r => canvas.toBlob(r, mime, midQuality));\n if (blob && blob.size <= maxBytes) {\n bestBlob = blob;\n minQuality = midQuality;\n } else {\n maxQuality = midQuality;\n }\n }\n\n \/\/ Downscale Canvas dimensions if quality alone doesn't hit target KB\n let currentScale = 0.9;\n while ((!bestBlob || bestBlob.size > maxBytes) && currentScale > 0.1) {\n const tempCanvas = document.createElement('canvas');\n tempCanvas.width = width * currentScale;\n tempCanvas.height = height * currentScale;\n const tCtx = tempCanvas.getContext('2d');\n tCtx.fillStyle = '#FFFFFF';\n tCtx.fillRect(0, 0, tempCanvas.width, tempCanvas.height);\n tCtx.drawImage(canvas, 0, 0, tempCanvas.width, tempCanvas.height);\n\n bestBlob = await new Promise(r => tempCanvas.toBlob(r, mime, 0.5));\n currentScale -= 0.15;\n }\n\n if (targetFormat === 'application\/pdf' && bestBlob) {\n const { jsPDF } = window.jspdf;\n const pdf = new jsPDF({ orientation: width > height ? 'l' : 'p', unit: 'px', format: [width, height] });\n pdf.addImage(canvas.toDataURL('image\/jpeg', 0.75), 'JPEG', 0, 0, width, height);\n bestBlob = pdf.output('blob');\n }\n\n resolve(bestBlob);\n };\n });\n }\n\n \/\/ Crop Modals Handling\n const cropModal = document.getElementById('crop-modal');\n const cropTarget = document.getElementById('crop-target');\n\n function openCrop(index) {\n activeCropIndex = index;\n cropTarget.src = URL.createObjectURL(filesState[index].workingImage);\n cropModal.style.display = 'flex';\n if (cropperInstance) cropperInstance.destroy();\n cropperInstance = new Cropper(cropTarget, { aspectRatio: NaN, viewMode: 1 });\n }\n\n document.querySelectorAll('.aspect-btn').forEach(btn => {\n btn.addEventListener('click', () => {\n if (cropperInstance) cropperInstance.setAspectRatio(parseFloat(btn.getAttribute('data-ratio')));\n });\n });\n\n document.getElementById('cancel-crop-btn').onclick = () => { cropModal.style.display = 'none'; };\n document.getElementById('apply-crop-btn').onclick = () => {\n if (cropperInstance && activeCropIndex !== null) {\n cropperInstance.getCroppedCanvas().toBlob(blob => {\n filesState[activeCropIndex].workingImage = blob;\n cropModal.style.display = 'none';\n processAll();\n }, 'image\/jpeg');\n }\n };\n\n downloadBtn.onclick = async () => {\n if (downloadBtn.disabled) return;\n let ext = 'jpg';\n if (targetFormat === 'image\/webp') ext = 'webp';\n if (targetFormat === 'image\/png') ext = 'png';\n if (targetFormat === 'application\/pdf') ext = 'pdf';\n\n const validFiles = filesState.filter(f => f.outputBlob !== null);\n if (validFiles.length === 1) {\n const a = document.createElement('a');\n a.href = URL.createObjectURL(validFiles[0].outputBlob);\n a.download = `converted-${targetKB}kb.${ext}`;\n a.click();\n } else if (validFiles.length > 1) {\n const zip = new JSZip();\n validFiles.forEach((item, idx) => { zip.file(`image-${idx + 1}-${targetKB}kb.${ext}`, item.outputBlob); });\n const zipContent = await zip.generateAsync({ type: \"blob\" });\n const a = document.createElement('a');\n a.href = URL.createObjectURL(zipContent);\n a.download = `images-${targetKB}kb.zip`;\n a.click();\n }\n };\n<\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Pro Image Resizer, Compressor & Converter \ud83c\udf19 Dark Mode Image Size Converter & Compressor Compress images to exact KB targets without quality degradation. Click to select images or drag & drop Select Output Format: JPG \/ JPEGWEBPPNGPDF Document (.pdf) Select Target File Size (KB): 20 KB 50 KB 100 KB Custom KB Custom Dimensions (Optional): […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"pagelayer_contact_templates":[],"_pagelayer_content":"","footnotes":""},"class_list":["post-24","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/freetoolsonline.gyandevtababa.in\/wp\/wp-json\/wp\/v2\/pages\/24","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/freetoolsonline.gyandevtababa.in\/wp\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/freetoolsonline.gyandevtababa.in\/wp\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/freetoolsonline.gyandevtababa.in\/wp\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/freetoolsonline.gyandevtababa.in\/wp\/wp-json\/wp\/v2\/comments?post=24"}],"version-history":[{"count":3,"href":"https:\/\/freetoolsonline.gyandevtababa.in\/wp\/wp-json\/wp\/v2\/pages\/24\/revisions"}],"predecessor-version":[{"id":28,"href":"https:\/\/freetoolsonline.gyandevtababa.in\/wp\/wp-json\/wp\/v2\/pages\/24\/revisions\/28"}],"wp:attachment":[{"href":"https:\/\/freetoolsonline.gyandevtababa.in\/wp\/wp-json\/wp\/v2\/media?parent=24"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":24,"date":"2026-08-01T05:06:10","date_gmt":"2026-08-01T05:06:10","guid":{"rendered":"https:\/\/freetoolsonline.gyandevtababa.in\/wp\/?page_id=24"},"modified":"2026-08-01T05:20:37","modified_gmt":"2026-08-01T05:20:37","slug":"24-2","status":"publish","type":"page","link":"https:\/\/freetoolsonline.gyandevtababa.in\/wp\/24-2\/","title":{"rendered":"KB"},"content":{"rendered":"\n\n\n\n \n \n Pro Image Resizer, Compressor & Converter<\/title>\n \n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jspdf\/2.5.1\/jspdf.umd.min.js\"><\/script>\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jszip\/3.10.1\/jszip.min.js\"><\/script>\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/cropperjs\/1.5.13\/cropper.min.css\">\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/cropperjs\/1.5.13\/cropper.min.js\"><\/script>\n\n <style>\n :root {\n --primary: #0F172A;\n --primary-hover: #1E293B;\n --accent: #FF6600;\n --accent-hover: #E05500;\n --bg: #F8FAFC;\n --card-bg: #FFFFFF;\n --text: #0F172A;\n --subtext: #64748B;\n --border: #CBD5E1;\n --input-bg: #FFFFFF;\n --upload-bg: #FAFAFA;\n --shadow: 0 4px 15px rgba(15, 23, 42, 0.08);\n }\n\n body.dark-theme {\n --bg: #0F172A;\n --card-bg: #1E293B;\n --text: #F8FAFC;\n --subtext: #94A3B8;\n --border: #334155;\n --input-bg: #0F172A;\n --upload-bg: #182234;\n }\n\n * { box-sizing: border-box; margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif; }\n body { background-color: var(--bg); color: var(--text); display: flex; justify-content: center; align-items: center; min-height: 100vh; padding: 15px; transition: background 0.3s; }\n .container { background-color: var(--card-bg); border-radius: 16px; box-shadow: var(--shadow); width: 100%; max-width: 760px; padding: 24px; }\n .header-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }\n .theme-toggle { background: transparent; border: 1px solid var(--border); padding: 6px 12px; border-radius: 20px; color: var(--text); cursor: pointer; font-size: 0.8rem; font-weight: 600; }\n h1 { font-size: 1.8rem; text-align: center; font-weight: 800; margin-bottom: 6px; }\n h1 .orange { color: var(--accent); }\n p.subtitle { font-size: 0.875rem; color: var(--subtext); text-align: center; margin-bottom: 24px; }\n .upload-area { border: 2px dashed var(--border); border-radius: 12px; padding: 28px 15px; text-align: center; cursor: pointer; transition: 0.2s; margin-bottom: 20px; background: var(--upload-bg); }\n .upload-area:hover, .upload-area.dragover { border-color: var(--accent); background-color: rgba(255, 102, 0, 0.05); }\n .upload-area input { display: none; }\n .control-group { margin-bottom: 18px; }\n label { font-size: 0.875rem; font-weight: 600; display: block; margin-bottom: 8px; color: var(--text); }\n .presets { display: grid; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: 8px; margin-bottom: 12px; }\n .btn-preset { padding: 10px; border: 1px solid var(--border); border-radius: 8px; background-color: var(--input-bg); color: var(--text); cursor: pointer; font-weight: 600; font-size: 0.85rem; transition: 0.2s; }\n .btn-preset.active { background-color: var(--accent); color: white; border-color: var(--accent); }\n .custom-kb-box, .dimension-box { display: flex; gap: 10px; align-items: center; margin-top: 8px; flex-wrap: wrap; }\n .custom-kb-box input, .dimension-box input, .format-select, .unit-select { padding: 10px; border: 1px solid var(--border); border-radius: 8px; outline: none; font-size: 0.9rem; background-color: var(--input-bg); color: var(--text); }\n .dimension-box input { flex: 1; min-width: 80px; }\n .format-select { width: 100%; }\n .image-list-container { display: none; margin-top: 24px; border-top: 1px solid var(--border); padding-top: 20px; }\n .list-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }\n .btn-clear { background: transparent; color: #EF4444; border: none; font-size: 0.8rem; cursor: pointer; font-weight: 600; }\n .image-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; margin-bottom: 20px; }\n .img-card { background: var(--upload-bg); border: 1px solid var(--border); border-radius: 8px; padding: 10px; text-align: center; display: flex; flex-direction: column; justify-content: space-between; }\n .img-card img { width: 100%; height: 100px; object-fit: contain; border-radius: 4px; margin-bottom: 8px; background: rgba(0,0,0,0.05); }\n .img-card .file-info { font-size: 0.75rem; color: var(--subtext); display: block; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n .card-actions { display: flex; gap: 6px; margin-top: 8px; }\n .card-actions button { flex: 1; padding: 6px 2px; font-size: 0.75rem; }\n .btn-navy { background-color: var(--primary); color: #FFF; border: none; border-radius: 6px; cursor: pointer; font-weight: 600; }\n .btn-cancel { background-color: #EF4444 !important; }\n .btn-main { width: 100%; padding: 14px; font-size: 1rem; margin-top: 10px; background-color: var(--accent); color: white; border: none; border-radius: 8px; font-weight: bold; cursor: pointer; }\n .btn-main:disabled { background-color: #94A3B8; cursor: not-allowed; }\n\n \/* Modal Styles *\/\n .modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); z-index: 9999; justify-content: center; align-items: center; padding: 15px; }\n .modal-content { background: var(--card-bg); padding: 20px; border-radius: 12px; width: 100%; max-width: 500px; display: flex; flex-direction: column; gap: 15px; }\n .crop-container { width: 100%; max-height: 45vh; overflow: hidden; }\n .crop-container img { max-width: 100%; }\n .aspect-ratios { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 5px; }\n .aspect-btn { padding: 4px 8px; font-size: 0.75rem; border: 1px solid var(--border); background: var(--input-bg); color: var(--text); border-radius: 4px; cursor: pointer; }\n <\/style>\n<\/head>\n<body>\n\n<div class=\"container\">\n <div class=\"header-bar\">\n <span><\/span>\n <button class=\"theme-toggle\" id=\"theme-btn\">\ud83c\udf19 Dark Mode<\/button>\n <\/div>\n\n <h1>Image <span class=\"orange\">Size Converter<\/span> & Compressor<\/h1>\n <p class=\"subtitle\">Compress images to exact KB targets without quality degradation.<\/p>\n\n <div class=\"upload-area\" id=\"drop-area\">\n <p><strong>Click to select images<\/strong> or drag & drop<\/p>\n <input type=\"file\" id=\"file-input\" accept=\"image\/jpeg, image\/png, image\/webp\" multiple>\n <\/div>\n\n <div class=\"control-group\">\n <label for=\"format-select\">Select Output Format:<\/label>\n <select id=\"format-select\" class=\"format-select\">\n <option value=\"image\/jpeg\">JPG \/ JPEG<\/option>\n <option value=\"image\/webp\">WEBP<\/option>\n <option value=\"image\/png\">PNG<\/option>\n <option value=\"application\/pdf\">PDF Document (.pdf)<\/option>\n <\/select>\n <\/div>\n\n <div class=\"control-group\">\n <label>Select Target File Size (KB):<\/label>\n <div class=\"presets\">\n <button class=\"btn-preset active\" data-kb=\"20\">20 KB<\/button>\n <button class=\"btn-preset\" data-kb=\"50\">50 KB<\/button>\n <button class=\"btn-preset\" data-kb=\"100\">100 KB<\/button>\n <button class=\"btn-preset\" data-kb=\"custom\">Custom<\/button>\n <\/div>\n <div class=\"custom-kb-box\" id=\"custom-box\" style=\"display:none;\">\n <input type=\"number\" id=\"custom-kb-input\" placeholder=\"Enter KB (e.g. 150)\" min=\"5\" value=\"150\">\n <span style=\"font-size: 0.85rem; font-weight: 600;\">KB<\/span>\n <\/div>\n <\/div>\n\n <div class=\"control-group\">\n <label>Custom Dimensions (Optional):<\/label>\n <div class=\"dimension-box\">\n <input type=\"number\" id=\"dim-width\" placeholder=\"Width\">\n <span>x<\/span>\n <input type=\"number\" id=\"dim-height\" placeholder=\"Height\">\n <select id=\"unit-select\" class=\"unit-select\">\n <option value=\"px\">px<\/option>\n <option value=\"cm\">cm<\/option>\n <option value=\"mm\">mm<\/option>\n <option value=\"in\">inch<\/option>\n <\/select>\n <\/div>\n <\/div>\n\n <div class=\"image-list-container\" id=\"image-list-container\">\n <div class=\"list-header\">\n <label style=\"margin:0;\">Uploaded Images:<\/label>\n <button class=\"btn-clear\" id=\"clear-all-btn\">Clear All<\/button>\n <\/div>\n <div class=\"image-grid\" id=\"image-grid\"><\/div>\n <button class=\"btn-main\" id=\"download-btn\">Download File(s)<\/button>\n <\/div>\n<\/div>\n\n\n<div class=\"modal\" id=\"crop-modal\">\n <div class=\"modal-content\">\n <h3>Crop & Adjust Aspect Ratio<\/h3>\n <div class=\"aspect-ratios\">\n <button class=\"aspect-btn\" data-ratio=\"NaN\">Free<\/button>\n <button class=\"aspect-btn\" data-ratio=\"1\">1:1 (Square)<\/button>\n <button class=\"aspect-btn\" data-ratio=\"0.8\">4:5 (Portrait)<\/button>\n <button class=\"aspect-btn\" data-ratio=\"1.7777\">16:9 (Widescreen)<\/button>\n <\/div>\n <div class=\"crop-container\">\n <img id=\"crop-target\" alt=\"Crop Target\">\n <\/div>\n <div style=\"display: flex; gap: 10px; justify-content: flex-end;\">\n <button class=\"btn-navy btn-cancel\" id=\"cancel-crop-btn\">Cancel<\/button>\n <button class=\"btn-navy\" id=\"apply-crop-btn\">Apply Crop<\/button>\n <\/div>\n <\/div>\n<\/div>\n\n<script>\n let filesState = [];\n let targetKB = 20;\n let targetFormat = 'image\/jpeg';\n let activeCropIndex = null;\n let cropperInstance = null;\n\n const fileInput = document.getElementById('file-input');\n const dropArea = document.getElementById('drop-area');\n const imageListContainer = document.getElementById('image-list-container');\n const imageGrid = document.getElementById('image-grid');\n const downloadBtn = document.getElementById('download-btn');\n const formatSelect = document.getElementById('format-select');\n const customBox = document.getElementById('custom-box');\n const customKbInput = document.getElementById('custom-kb-input');\n const themeBtn = document.getElementById('theme-btn');\n const clearAllBtn = document.getElementById('clear-all-btn');\n\n themeBtn.addEventListener('click', () => {\n document.body.classList.toggle('dark-theme');\n themeBtn.innerText = document.body.classList.contains('dark-theme') ? '\u2600\ufe0f Light Mode' : '\ud83c\udf19 Dark Mode';\n });\n\n dropArea.addEventListener('click', () => fileInput.click());\n ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(e => dropArea.addEventListener(e, ev => { ev.preventDefault(); ev.stopPropagation(); }));\n ['dragenter', 'dragover'].forEach(e => dropArea.addEventListener(e, () => dropArea.classList.add('dragover')));\n ['dragleave', 'drop'].forEach(e => dropArea.addEventListener(e, () => dropArea.classList.remove('dragover')));\n dropArea.addEventListener('drop', e => { if (e.dataTransfer.files.length) addFiles(Array.from(e.dataTransfer.files)); });\n fileInput.addEventListener('change', e => { if (e.target.files.length) { addFiles(Array.from(e.target.files)); fileInput.value = ''; } });\n\n document.querySelectorAll('.btn-preset').forEach(btn => {\n btn.addEventListener('click', () => {\n document.querySelectorAll('.btn-preset').forEach(b => b.classList.remove('active'));\n btn.classList.add('active');\n const val = btn.getAttribute('data-kb');\n if (val === 'custom') { customBox.style.display = 'flex'; targetKB = parseInt(customKbInput.value) || 150; }\n else { customBox.style.display = 'none'; targetKB = parseInt(val); }\n processAll();\n });\n });\n\n customKbInput.addEventListener('input', () => { targetKB = parseInt(customKbInput.value) || 20; processAll(); });\n formatSelect.addEventListener('change', e => { targetFormat = e.target.value; processAll(); });\n ['dim-width', 'dim-height', 'unit-select'].forEach(id => document.getElementById(id).addEventListener('input', processAll));\n\n clearAllBtn.addEventListener('click', () => {\n filesState.forEach(f => { if(f.previewUrl) URL.revokeObjectURL(f.previewUrl); });\n filesState = [];\n imageListContainer.style.display = 'none';\n });\n\n function addFiles(files) {\n files.forEach(f => {\n if (f.type.startsWith('image\/')) {\n filesState.push({ originalFile: f, workingImage: f, outputBlob: null, outputSize: 0, previewUrl: null });\n }\n });\n if (filesState.length > 0) {\n imageListContainer.style.display = 'block';\n processAll();\n }\n }\n\n async function processAll() {\n downloadBtn.disabled = true;\n downloadBtn.innerText = 'Processing Images...';\n for (let i = 0; i < filesState.length; i++) {\n const blob = await smartCompress(filesState[i].workingImage);\n filesState[i].outputBlob = blob;\n filesState[i].outputSize = blob ? blob.size : 0;\n }\n renderGrid();\n const validFiles = filesState.filter(f => f.outputBlob !== null);\n if (validFiles.length > 0) {\n downloadBtn.disabled = false;\n downloadBtn.innerText = validFiles.length > 1 ? `Download All as ZIP (${validFiles.length})` : `Download Image`;\n } else {\n downloadBtn.innerText = 'Conversion Failed';\n }\n }\n\n function renderGrid() {\n imageGrid.innerHTML = '';\n filesState.forEach((item, index) => {\n if (item.previewUrl) URL.revokeObjectURL(item.previewUrl);\n item.previewUrl = URL.createObjectURL(item.outputBlob || item.workingImage);\n\n const card = document.createElement('div');\n card.className = 'img-card';\n const sizeStr = item.outputBlob ? (item.outputSize \/ 1024).toFixed(1) + ' KB' : 'Processing...';\n\n card.innerHTML = `\n <img decoding=\"async\" src=\"${item.previewUrl}\" alt=\"preview\">\n <span class=\"file-info\"><strong>${item.originalFile.name}<\/strong><\/span>\n <span class=\"file-info\" style=\"color:var(--accent); font-weight:bold;\">Target: ${sizeStr}<\/span>\n <div class=\"card-actions\">\n <button class=\"btn-navy crop-btn\">Crop<\/button>\n <button class=\"btn-navy btn-cancel remove-btn\">Remove<\/button>\n <\/div>\n `;\n card.querySelector('.crop-btn').onclick = () => openCrop(index);\n card.querySelector('.remove-btn').onclick = () => {\n if(filesState[index].previewUrl) URL.revokeObjectURL(filesState[index].previewUrl);\n filesState.splice(index, 1);\n if (filesState.length === 0) imageListContainer.style.display = 'none';\n else processAll();\n };\n imageGrid.appendChild(card);\n });\n }\n\n \/\/ Advanced Binary Search Compression Engine\n function smartCompress(file) {\n return new Promise((resolve) => {\n const img = new Image();\n img.src = URL.createObjectURL(file);\n img.onload = async () => {\n URL.revokeObjectURL(img.src);\n let canvas = document.createElement('canvas');\n let width = img.width;\n let height = img.height;\n\n const customW = parseFloat(document.getElementById('dim-width').value);\n const customH = parseFloat(document.getElementById('dim-height').value);\n const unit = document.getElementById('unit-select').value;\n\n if (customW || customH) {\n const dpi = 96;\n let scale = 1;\n if (unit === 'cm') scale = dpi \/ 2.54;\n if (unit === 'mm') scale = dpi \/ 25.4;\n if (unit === 'in') scale = dpi;\n\n width = customW ? customW * scale : (customH * scale * img.width) \/ img.height;\n height = customH ? customH * scale : (customW * scale * img.height) \/ img.width;\n }\n\n canvas.width = width;\n canvas.height = height;\n const ctx = canvas.getContext('2d');\n ctx.fillStyle = '#FFFFFF';\n ctx.fillRect(0, 0, width, height);\n ctx.drawImage(img, 0, 0, width, height);\n\n const maxBytes = targetKB * 1024;\n const mime = targetFormat === 'application\/pdf' ? 'image\/jpeg' : targetFormat;\n\n if (mime === 'image\/png') {\n canvas.toBlob((blob) => resolve(blob), 'image\/png');\n return;\n }\n\n \/\/ Binary Search Optimization for exact target size\n let minQuality = 0.01;\n let maxQuality = 0.98;\n let bestBlob = null;\n\n for (let i = 0; i < 7; i++) {\n let midQuality = (minQuality + maxQuality) \/ 2;\n let blob = await new Promise(r => canvas.toBlob(r, mime, midQuality));\n if (blob && blob.size <= maxBytes) {\n bestBlob = blob;\n minQuality = midQuality;\n } else {\n maxQuality = midQuality;\n }\n }\n\n \/\/ Downscale Canvas dimensions if quality alone doesn't hit target KB\n let currentScale = 0.9;\n while ((!bestBlob || bestBlob.size > maxBytes) && currentScale > 0.1) {\n const tempCanvas = document.createElement('canvas');\n tempCanvas.width = width * currentScale;\n tempCanvas.height = height * currentScale;\n const tCtx = tempCanvas.getContext('2d');\n tCtx.fillStyle = '#FFFFFF';\n tCtx.fillRect(0, 0, tempCanvas.width, tempCanvas.height);\n tCtx.drawImage(canvas, 0, 0, tempCanvas.width, tempCanvas.height);\n\n bestBlob = await new Promise(r => tempCanvas.toBlob(r, mime, 0.5));\n currentScale -= 0.15;\n }\n\n if (targetFormat === 'application\/pdf' && bestBlob) {\n const { jsPDF } = window.jspdf;\n const pdf = new jsPDF({ orientation: width > height ? 'l' : 'p', unit: 'px', format: [width, height] });\n pdf.addImage(canvas.toDataURL('image\/jpeg', 0.75), 'JPEG', 0, 0, width, height);\n bestBlob = pdf.output('blob');\n }\n\n resolve(bestBlob);\n };\n });\n }\n\n \/\/ Crop Modals Handling\n const cropModal = document.getElementById('crop-modal');\n const cropTarget = document.getElementById('crop-target');\n\n function openCrop(index) {\n activeCropIndex = index;\n cropTarget.src = URL.createObjectURL(filesState[index].workingImage);\n cropModal.style.display = 'flex';\n if (cropperInstance) cropperInstance.destroy();\n cropperInstance = new Cropper(cropTarget, { aspectRatio: NaN, viewMode: 1 });\n }\n\n document.querySelectorAll('.aspect-btn').forEach(btn => {\n btn.addEventListener('click', () => {\n if (cropperInstance) cropperInstance.setAspectRatio(parseFloat(btn.getAttribute('data-ratio')));\n });\n });\n\n document.getElementById('cancel-crop-btn').onclick = () => { cropModal.style.display = 'none'; };\n document.getElementById('apply-crop-btn').onclick = () => {\n if (cropperInstance && activeCropIndex !== null) {\n cropperInstance.getCroppedCanvas().toBlob(blob => {\n filesState[activeCropIndex].workingImage = blob;\n cropModal.style.display = 'none';\n processAll();\n }, 'image\/jpeg');\n }\n };\n\n downloadBtn.onclick = async () => {\n if (downloadBtn.disabled) return;\n let ext = 'jpg';\n if (targetFormat === 'image\/webp') ext = 'webp';\n if (targetFormat === 'image\/png') ext = 'png';\n if (targetFormat === 'application\/pdf') ext = 'pdf';\n\n const validFiles = filesState.filter(f => f.outputBlob !== null);\n if (validFiles.length === 1) {\n const a = document.createElement('a');\n a.href = URL.createObjectURL(validFiles[0].outputBlob);\n a.download = `converted-${targetKB}kb.${ext}`;\n a.click();\n } else if (validFiles.length > 1) {\n const zip = new JSZip();\n validFiles.forEach((item, idx) => { zip.file(`image-${idx + 1}-${targetKB}kb.${ext}`, item.outputBlob); });\n const zipContent = await zip.generateAsync({ type: \"blob\" });\n const a = document.createElement('a');\n a.href = URL.createObjectURL(zipContent);\n a.download = `images-${targetKB}kb.zip`;\n a.click();\n }\n };\n<\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Pro Image Resizer, Compressor & Converter \ud83c\udf19 Dark Mode Image Size Converter & Compressor Compress images to exact KB targets without quality degradation. Click to select images or drag & drop Select Output Format: JPG \/ JPEGWEBPPNGPDF Document (.pdf) Select Target File Size (KB): 20 KB 50 KB 100 KB Custom KB Custom Dimensions (Optional): […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"pagelayer_contact_templates":[],"_pagelayer_content":"","footnotes":""},"class_list":["post-24","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/freetoolsonline.gyandevtababa.in\/wp\/wp-json\/wp\/v2\/pages\/24","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/freetoolsonline.gyandevtababa.in\/wp\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/freetoolsonline.gyandevtababa.in\/wp\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/freetoolsonline.gyandevtababa.in\/wp\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/freetoolsonline.gyandevtababa.in\/wp\/wp-json\/wp\/v2\/comments?post=24"}],"version-history":[{"count":3,"href":"https:\/\/freetoolsonline.gyandevtababa.in\/wp\/wp-json\/wp\/v2\/pages\/24\/revisions"}],"predecessor-version":[{"id":28,"href":"https:\/\/freetoolsonline.gyandevtababa.in\/wp\/wp-json\/wp\/v2\/pages\/24\/revisions\/28"}],"wp:attachment":[{"href":"https:\/\/freetoolsonline.gyandevtababa.in\/wp\/wp-json\/wp\/v2\/media?parent=24"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}