{"id":8,"date":"2026-06-30T17:14:43","date_gmt":"2026-06-30T17:14:43","guid":{"rendered":"https:\/\/freewebtools.co.in\/index.php\/image-tools\/"},"modified":"2026-07-07T18:03:43","modified_gmt":"2026-07-07T18:03:43","slug":"image-tools","status":"publish","type":"page","link":"https:\/\/freewebtools.co.in\/index.php\/image-tools\/","title":{"rendered":"Image Tools"},"content":{"rendered":"\n<style>\n\/* Component Root Wrapper Configuration to Neutralize Host Theme Leakage *\/\n.imgtools-scope {\n  all: initial; \/* Reset all inherited CSS properties for the app block *\/\n  box-sizing: border-box;\n  font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n  font-size: 16px;\n  line-height: 1.5;\n  text-rendering: optimizeLegibility;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  display: block;\n  width: 100%;\n  margin: 2rem auto;\n  max-width: 1200px;\n  padding: 0 1rem;\n}\n.imgtools-scope *, .imgtools-scope *::before, .imgtools-scope *::after { box-sizing: border-box; }\n.imgtools-app-container { background-color: #ffffff; border-radius: 16px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); padding: 2rem; color: #1e293b; }\n.imgtools-header { margin-bottom: 2rem; border-bottom: 1px solid #e2e8f0; padding-bottom: 1.5rem; }\n.imgtools-brand { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.5rem; }\n.imgtools-icon-main { color: #3b82f6; flex-shrink: 0; }\n.imgtools-title { font-size: 1.75rem; font-weight: 700; color: #0f172a; margin: 0; padding: 0; }\n.imgtools-tagline { font-size: 0.95rem; color: #64748b; margin: 0; }\n.imgtools-card { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px; padding: 1.5rem; }\n.imgtools-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.25rem; gap: 1rem; }\n.imgtools-card-title { font-size: 1.1rem; font-weight: 600; color: #1e293b; margin: 0; }\n.imgtools-dropzone { border: 2px dashed #cbd5e1; border-radius: 10px; background-color: #ffffff; padding: 3rem 1.5rem; text-align: center; cursor: pointer; transition: all 0.2s ease; position: relative; }\n.imgtools-dropzone:hover, .imgtools-dropzone.imgtools-dragover { border-color: #3b82f6; background-color: #eff6ff; }\n.imgtools-hidden-input { display: none !important; }\n.imgtools-icon-wrap { color: #94a3b8; margin-bottom: 1rem; }\n.imgtools-dropzone:hover .imgtools-icon-wrap { color: #3b82f6; }\n.imgtools-upload-prompt { font-size: 1.15rem; font-weight: 600; color: #334155; margin: 0 0 0.25rem 0; }\n.imgtools-upload-subtext { font-size: 0.85rem; color: #64748b; margin: 0 0 1.5rem 0; }\n.imgtools-editor-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin-top: 0.5rem; }\n@media (min-width: 868px) { .imgtools-editor-grid { grid-template-columns: 1.2fr 1fr; } }\n.imgtools-preview-stage { background: #e2e8f0; border-radius: 8px; min-height: 320px; max-height: 460px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; border: 1px solid #cbd5e1; background-image: linear-gradient(45deg, #cbd5e1 25%, transparent 25%), linear-gradient(-45deg, #cbd5e1 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #cbd5e1 75%), linear-gradient(-45deg, transparent 75%, #cbd5e1 75%); background-size: 16px 16px; }\n.imgtools-preview-container { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: 1rem; }\n.imgtools-preview-img { max-width: 100%; max-height: 420px; object-fit: contain; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); border-radius: 4px; }\n.imgtools-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(15, 23, 42, 0.75); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; z-index: 10; backdrop-filter: blur(2px); }\n.imgtools-spinner { width: 40px; height: 40px; border: 4px solid rgba(255, 255, 255, 0.3); border-radius: 50%; border-top-color: #ffffff; animation: imgtools-spin 0.8s linear infinite; }\n@keyframes imgtools-spin { to { transform: rotate(360deg); } }\n.imgtools-overlay-text { color: #ffffff; font-weight: 500; margin: 0; }\n.imgtools-meta-strip { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0.75rem; margin-top: 1rem; background: #ffffff; padding: 0.75rem 1rem; border-radius: 8px; border: 1px solid #e2e8f0; }\n@media (max-width: 480px) { .imgtools-meta-strip { grid-template-columns: 1fr; text-align: center; } }\n.imgtools-meta-item { display: flex; flex-direction: column; }\n.imgtools-meta-label { font-size: 0.75rem; text-transform: uppercase; color: #64748b; font-weight: 600; }\n.imgtools-meta-value { font-size: 1rem; font-weight: 700; color: #334155; }\n.imgtools-meta-arrow { color: #94a3b8; font-weight: bold; }\n.imgtools-meta-savings { align-items: flex-end; }\n@media (max-width: 480px) { .imgtools-meta-savings { align-items: center; border-top: 1px solid #f1f5f9; padding-top: 0.5rem; } }\n.imgtools-form { display: flex; flex-direction: column; gap: 1.25rem; }\n.imgtools-form-group { display: flex; flex-direction: column; gap: 0.5rem; }\n.imgtools-label-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }\n.imgtools-control-label { font-size: 0.9rem; font-weight: 600; color: #334155; }\n.imgtools-select-wrapper { position: relative; }\n.imgtools-select { width: 100%; padding: 0.65rem 2rem 0.65rem 0.75rem; border: 1px solid #cbd5e1; border-radius: 6px; background-color: #ffffff; appearance: none; -webkit-appearance: none; }\n.imgtools-select:focus, .imgtools-input-field:focus { outline: none; border-color: #3b82f6; }\n.imgtools-indicator-val { font-size: 0.85rem; font-weight: 700; color: #3b82f6; background: #eff6ff; padding: 0.15rem 0.5rem; border-radius: 4px; }\n.imgtools-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; background: #e2e8f0; border-radius: 3px; outline: none; }\n.imgtools-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%; background: #3b82f6; cursor: pointer; border: 2px solid #ffffff; }\n.imgtools-slider::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #3b82f6; border: 2px solid #ffffff; }\n.imgtools-slider-ticks { display: flex; justify-content: space-between; font-size: 0.75rem; color: #94a3b8; }\n.imgtools-divider { border: 0; border-top: 1px solid #e2e8f0; margin: 0.5rem 0; }\n.imgtools-checkbox-label { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; color: #64748b; cursor: pointer; }\n.imgtools-dimension-grid { display: flex; align-items: center; gap: 0.5rem; }\n.imgtools-input-addon-group { display: flex; flex: 1; border-radius: 6px; border: 1px solid #cbd5e1; overflow: hidden; background-color: #ffffff; }\n.imgtools-addon-tag { background: #f1f5f9; padding: 0.5rem 0.75rem; font-size: 0.8rem; color: #64748b; border-right: 1px solid #e2e8f0; display: flex; align-items: center; }\n.imgtools-input-field { width: 100%; border: 0; padding: 0.5rem 0.75rem; font-size: 0.95rem; outline: none; }\n.imgtools-dimension-divider { color: #94a3b8; display: flex; align-items: center; }\n.imgtools-preset-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; }\n.imgtools-btn-preset { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 6px; padding: 0.4rem; font-size: 0.8rem; font-weight: 600; color: #64748b; cursor: pointer; text-align: center; }\n.imgtools-btn-preset:hover { background: #f1f5f9; }\n.imgtools-btn-preset.imgtools-active { background: #eff6ff; color: #3b82f6; border-color: #3b82f6; }\n.imgtools-badge { background: #e2e8f0; color: #475569; font-size: 0.75rem; font-weight: 700; padding: 0.25rem 0.6rem; border-radius: 20px; text-transform: uppercase; }\n.imgtools-badge-success { background: #dcfce7; color: #15803d; font-size: 0.8rem; font-weight: 700; padding: 0.15rem 0.4rem; border-radius: 4px; }\n.imgtools-text-success { color: #16a34a; }\n.imgtools-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; font-weight: 600; font-size: 0.95rem; padding: 0.65rem 1.25rem; border-radius: 6px; border: 1px solid transparent; cursor: pointer; text-decoration: none; }\n.imgtools-btn-block { display: flex; width: 100%; }\n.imgtools-btn-primary { background-color: #3b82f6; color: #ffffff; }\n.imgtools-btn-primary:hover { background-color: #2563eb; }\n.imgtools-btn-success { background-color: #10b981; color: #ffffff; }\n.imgtools-btn-success:hover { background-color: #059669; }\n.imgtools-btn-text { background: none; border: none; color: #ef4444; font-size: 0.85rem; font-weight: 600; cursor: pointer; padding: 0.25rem 0.5rem; }\n.imgtools-hidden { display: none !important; }\n.imgtools-hidden-canvas { position: absolute !important; left: -9999px !important; top: -9999px !important; width: 0 !important; height: 0 !important; visibility: hidden !important; }\n<\/style>\n\n<div id=\"imgtools-root\" class=\"imgtools-scope\">\n  <div class=\"imgtools-app-container\">\n    <header class=\"imgtools-header\">\n      <div class=\"imgtools-brand\">\n        <svg class=\"imgtools-icon-main\" viewBox=\"0 0 24 24\" width=\"28\" height=\"28\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"><\/rect><circle cx=\"8.5\" cy=\"8.5\" r=\"1.5\"><\/circle><polyline points=\"21 15 16 10 5 21\"><\/polyline><\/svg>\n        <h1 class=\"imgtools-title\">Client-Side Image Studio<\/h1>\n      <\/div>\n      <p class=\"imgtools-tagline\">Compress, resize, and convert images instantly. 100% private &#038; local.<\/p>\n    <\/header>\n\n    <main class=\"imgtools-workspace\">\n      <section id=\"imgtools-dropzone-section\" class=\"imgtools-card imgtools-upload-card\">\n        <div id=\"imgtools-dropzone\" class=\"imgtools-dropzone\">\n          <input type=\"file\" id=\"imgtools-file-input\" class=\"imgtools-hidden-input\" accept=\"image\/jpeg, image\/png, image\/webp, image\/gif\" \/>\n          <div class=\"imgtools-dropzone-inner\">\n            <div class=\"imgtools-icon-wrap\">\n              <svg viewBox=\"0 0 24 24\" width=\"48\" height=\"48\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"><path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"><\/path><polyline points=\"17 8 12 3 7 8\"><\/polyline><line x1=\"12\" y1=\"3\" x2=\"12\" y2=\"15\"><\/line><\/svg>\n            <\/div>\n            <h3 class=\"imgtools-upload-prompt\">Drag &#038; drop your image here<\/h3>\n            <p class=\"imgtools-upload-subtext\">Supports JPEG, PNG, WEBP, and GIF up to 50MB<\/p>\n            <button type=\"button\" id=\"imgtools-browse-btn\" class=\"imgtools-btn imgtools-btn-primary\">Browse Files<\/button>\n          <\/div>\n        <\/div>\n      <\/section>\n\n      <section id=\"imgtools-editor-suite\" class=\"imgtools-editor-grid imgtools-hidden\">\n        <div class=\"imgtools-card imgtools-preview-card\">\n          <div class=\"imgtools-card-header\">\n            <h2 class=\"imgtools-card-title\">Live Preview Comparison<\/h2>\n            <span id=\"imgtools-badge-format\" class=\"imgtools-badge\">Original<\/span>\n          <\/div>\n          <div class=\"imgtools-preview-stage\">\n            <div id=\"imgtools-preview-container\" class=\"imgtools-preview-container\">\n              <img id=\"imgtools-preview-element\" class=\"imgtools-preview-img\" alt=\"Workspace preview asset\" \/>\n              <div id=\"imgtools-loading-overlay\" class=\"imgtools-overlay imgtools-hidden\">\n                <div class=\"imgtools-spinner\"><\/div>\n                <p class=\"imgtools-overlay-text\">Processing Optimization&#8230;<\/p>\n              <\/div>\n            <\/div>\n          <\/div>\n          <div class=\"imgtools-meta-strip\">\n            <div class=\"imgtools-meta-item\"><span class=\"imgtools-meta-label\">Original:<\/span><span id=\"imgtools-meta-orig-size\" class=\"imgtools-meta-value\">0 KB<\/span><\/div>\n            <div class=\"imgtools-meta-arrow\">\u2794<\/div>\n            <div class=\"imgtools-meta-item\"><span class=\"imgtools-meta-label\">Optimized:<\/span><span id=\"imgtools-meta-new-size\" class=\"imgtools-meta-value imgtools-text-success\">0 KB<\/span><\/div>\n            <div class=\"imgtools-meta-item imgtools-meta-savings\"><span class=\"imgtools-meta-label\">Reduction:<\/span><span id=\"imgtools-meta-ratio\" class=\"imgtools-meta-value imgtools-badge-success\">0%<\/span><\/div>\n          <\/div>\n        <\/div>\n\n        <div class=\"imgtools-card imgtools-control-card\">\n          <div class=\"imgtools-card-header\">\n            <h2 class=\"imgtools-card-title\">Optimization Settings<\/h2>\n            <button type=\"button\" id=\"imgtools-reset-btn\" class=\"imgtools-btn-text\">Clear Image<\/button>\n          <\/div>\n          <form id=\"imgtools-config-form\" class=\"imgtools-form\" onsubmit=\"return false;\">\n            <div class=\"imgtools-form-group\">\n              <label class=\"imgtools-control-label\" for=\"imgtools-select-format\">Target Output Format<\/label>\n              <div class=\"imgtools-select-wrapper\">\n                <select id=\"imgtools-select-format\" class=\"imgtools-select\">\n                  <option value=\"image\/jpeg\" selected>JPEG (Optimized standard)<\/option>\n                  <option value=\"image\/png\">PNG (Lossless compression)<\/option>\n                  <option value=\"image\/webp\">WEBP (Next-gen efficient)<\/option>\n                <\/select>\n              <\/div>\n            <\/div>\n            <div id=\"imgtools-quality-group\" class=\"imgtools-form-group\">\n              <div class=\"imgtools-label-row\">\n                <label class=\"imgtools-control-label\" for=\"imgtools-range-quality\">Compression Quality<\/label>\n                <span id=\"imgtools-quality-indicator\" class=\"imgtools-indicator-val\">80%<\/span>\n              <\/div>\n              <input type=\"range\" id=\"imgtools-range-quality\" class=\"imgtools-slider\" min=\"1\" max=\"100\" value=\"80\" \/>\n            <\/div>\n            <hr class=\"imgtools-divider\" \/>\n            <div class=\"imgtools-form-group\">\n              <div class=\"imgtools-label-row\">\n                <label class=\"imgtools-control-label\">Dimension Mapping<\/label>\n                <label class=\"imgtools-checkbox-label\"><input type=\"checkbox\" id=\"imgtools-check-aspect\" checked \/> <span>Lock Aspect<\/span><\/label>\n              <\/div>\n              <div class=\"imgtools-dimension-grid\">\n                <div class=\"imgtools-input-addon-group\"><span class=\"imgtools-addon-tag\">W<\/span><input type=\"number\" id=\"imgtools-input-width\" class=\"imgtools-input-field\" min=\"1\" \/><\/div>\n                <div class=\"imgtools-dimension-divider\">\u00d7<\/div>\n                <div class=\"imgtools-input-addon-group\"><span class=\"imgtools-addon-tag\">H<\/span><input type=\"number\" id=\"imgtools-input-height\" class=\"imgtools-input-field\" min=\"1\" \/><\/div>\n              <\/div>\n              <div class=\"imgtools-preset-row\">\n                <button type=\"button\" class=\"imgtools-btn-preset\" data-scale=\"1\">100%<\/button>\n                <button type=\"button\" class=\"imgtools-btn-preset\" data-scale=\"0.75\">75%<\/button>\n                <button type=\"button\" class=\"imgtools-btn-preset\" data-scale=\"0.5\">50%<\/button>\n                <button type=\"button\" class=\"imgtools-btn-preset\" data-scale=\"0.25\">25%<\/button>\n              <\/div>\n            <\/div>\n            <div class=\"imgtools-action-strip\">\n              <button type=\"button\" id=\"imgtools-download-btn\" class=\"imgtools-btn imgtools-btn-success imgtools-btn-block\">Download Optimized Image<\/button>\n            <\/div>\n          <\/form>\n        <\/div>\n      <\/section>\n    <\/main>\n    <canvas id=\"imgtools-processing-canvas\" class=\"imgtools-hidden-canvas\"><\/canvas>\n  <\/div>\n<\/div>\n\n<script>\n\/\/ We use DOMContentLoaded to protect against early execution rendering bugs\ndocument.addEventListener(\"DOMContentLoaded\", function() {\n  (function imgtoolsInitRuntime() {\n    \"use strict\";\n    const dom = {\n      root: document.getElementById(\"imgtools-root\"),\n      dropzoneSection: document.getElementById(\"imgtools-dropzone-section\"),\n      dropzone: document.getElementById(\"imgtools-dropzone\"),\n      fileInput: document.getElementById(\"imgtools-file-input\"),\n      browseBtn: document.getElementById(\"imgtools-browse-btn\"),\n      editorSuite: document.getElementById(\"imgtools-editor-suite\"),\n      previewElement: document.getElementById(\"imgtools-preview-element\"),\n      loadingOverlay: document.getElementById(\"imgtools-loading-overlay\"),\n      badgeFormat: document.getElementById(\"imgtools-badge-format\"),\n      metaOrigSize: document.getElementById(\"imgtools-meta-orig-size\"),\n      metaNewSize: document.getElementById(\"imgtools-meta-new-size\"),\n      metaRatio: document.getElementById(\"imgtools-meta-ratio\"),\n      resetBtn: document.getElementById(\"imgtools-reset-btn\"),\n      selectFormat: document.getElementById(\"imgtools-select-format\"),\n      qualityGroup: document.getElementById(\"imgtools-quality-group\"),\n      rangeQuality: document.getElementById(\"imgtools-range-quality\"),\n      qualityIndicator: document.getElementById(\"imgtools-quality-indicator\"),\n      checkAspect: document.getElementById(\"imgtools-check-aspect\"),\n      inputWidth: document.getElementById(\"imgtools-input-width\"),\n      inputHeight: document.getElementById(\"imgtools-input-height\"),\n      presetButtons: document.querySelectorAll(\".imgtools-btn-preset\"),\n      downloadBtn: document.getElementById(\"imgtools-download-btn\"),\n      canvas: document.getElementById(\"imgtools-processing-canvas\")\n    };\n\n    if (!dom.root || !dom.canvas) return;\n\n    const state = { sourceImage: null, sourceFileName: \"\", sourceMimeType: \"\", sourceWidth: 0, sourceHeight: 0, sourceFileSize: 0, renderingAspect: 1, isProcessing: false, optimizedBlob: null };\n\n    function imgtoolsFormatBytes(bytes) {\n      if (bytes === 0) return \"0 Bytes\";\n      const k = 1024;\n      const sizes = [\"Bytes\", \"KB\", \"MB\"];\n      const i = Math.floor(Math.log(bytes) \/ Math.log(k));\n      return parseFloat((bytes \/ Math.pow(k, i)).toFixed(2)) + \" \" + sizes[i];\n    }\n\n    function imgtoolsHandleFile(file) {\n      if (!file || !file.type.match(\/^image\\\/\/)) {\n        alert(\"Please select a valid image asset.\");\n        return;\n      }\n      state.isProcessing = true;\n      dom.loadingOverlay.classList.remove(\"imgtools-hidden\");\n      state.sourceFileName = file.name;\n      state.sourceMimeType = file.type;\n      state.sourceFileSize = file.size;\n      dom.metaOrigSize.textContent = imgtoolsFormatBytes(file.size);\n\n      const reader = new FileReader();\n      reader.onload = function(e) {\n        const img = new Image();\n        img.onload = function() {\n          state.sourceImage = img;\n          state.sourceWidth = img.naturalWidth;\n          state.sourceHeight = img.naturalHeight;\n          state.renderingAspect = img.naturalWidth \/ img.naturalHeight;\n          dom.inputWidth.value = state.sourceWidth;\n          dom.inputHeight.value = state.sourceHeight;\n          dom.selectFormat.value = [\"image\/jpeg\", \"image\/png\", \"image\/webp\"].includes(file.type) ? file.type : \"image\/jpeg\";\n          imgtoolsToggleQualityView();\n          dom.dropzoneSection.classList.add(\"imgtools-hidden\");\n          dom.editorSuite.classList.remove(\"imgtools-hidden\");\n          imgtoolsTriggerProcess();\n        };\n        img.src = e.target.result;\n      };\n      reader.readAsDataURL(file);\n    }\n\n    function imgtoolsToggleQualityView() {\n      if (dom.selectFormat.value === \"image\/png\") dom.qualityGroup.classList.add(\"imgtools-hidden\");\n      else dom.qualityGroup.classList.remove(\"imgtools-hidden\");\n    }\n\n    function imgtoolsTriggerProcess() {\n      if (!state.sourceImage) return;\n      state.isProcessing = true;\n      dom.loadingOverlay.classList.remove(\"imgtools-hidden\");\n\n      setTimeout(function() {\n        let targetWidth = parseInt(dom.inputWidth.value, 10) || state.sourceWidth;\n        let targetHeight = parseInt(dom.inputHeight.value, 10) || state.sourceHeight;\n        dom.canvas.width = targetWidth;\n        dom.canvas.height = targetHeight;\n        const ctx = dom.canvas.getContext(\"2d\");\n        ctx.clearRect(0, 0, targetWidth, targetHeight);\n        ctx.drawImage(state.sourceImage, 0, 0, targetWidth, targetHeight);\n\n        const chosenFormat = dom.selectFormat.value;\n        const calculatedQuality = parseInt(dom.rangeQuality.value, 10) \/ 100;\n\n        dom.canvas.toBlob(function(blob) {\n          if (!blob) { state.isProcessing = false; dom.loadingOverlay.classList.add(\"imgtools-hidden\"); return; }\n          state.optimizedBlob = blob;\n          dom.previewElement.src = URL.createObjectURL(blob);\n          dom.metaNewSize.textContent = imgtoolsFormatBytes(blob.size);\n          dom.badgeFormat.textContent = chosenFormat.split(\"\/\")[1].toUpperCase();\n          const lossDelta = state.sourceFileSize - blob.size;\n          if (lossDelta > 0) {\n            dom.metaRatio.textContent = \"-\" + Math.round((lossDelta \/ state.sourceFileSize) * 100) + \"%\";\n            dom.metaRatio.className = \"imgtools-meta-value imgtools-badge-success\";\n          } else {\n            dom.metaRatio.textContent = \"0%\";\n            dom.metaRatio.className = \"imgtools-meta-value imgtools-badge\";\n          }\n          state.isProcessing = false;\n          dom.loadingOverlay.classList.add(\"imgtools-hidden\");\n        }, chosenFormat, calculatedQuality);\n      }, 40);\n    }\n\n    function imgtoolsUpdateDimensions(e) {\n      let w = parseInt(dom.inputWidth.value, 10);\n      let h = parseInt(dom.inputHeight.value, 10);\n      if (!e.target.classList.contains(\"imgtools-btn-preset\")) {\n        dom.presetButtons.forEach(b => b.classList.remove(\"imgtools-active\"));\n      }\n      if (dom.checkAspect.checked && state.renderingAspect) {\n        if (e.target === dom.inputWidth && w) dom.inputHeight.value = Math.round(w \/ state.renderingAspect);\n        else if (e.target === dom.inputHeight && h) dom.inputWidth.value = Math.round(h * state.renderingAspect);\n      }\n      imgtoolsTriggerProcess();\n    }\n\n    dom.browseBtn.addEventListener(\"click\", () => dom.fileInput.click());\n    dom.fileInput.addEventListener(\"change\", (e) => imgtoolsHandleFile(e.target.files[0]));\n\n    [\"dragenter\", \"dragover\"].forEach(ev => {\n      dom.dropzone.addEventListener(ev, (e) => { e.preventDefault(); dom.dropzone.classList.add(\"imgtools-dragover\"); });\n    });\n    [\"dragleave\", \"drop\"].forEach(ev => {\n      dom.dropzone.addEventListener(ev, (e) => { e.preventDefault(); dom.dropzone.classList.remove(\"imgtools-dragover\"); });\n    });\n    dom.dropzone.addEventListener(\"drop\", (e) => {\n      const droppedFiles = e.dataTransfer.files;\n      if (droppedFiles.length) imgtoolsHandleFile(droppedFiles[0]);\n    });\n\n    dom.selectFormat.addEventListener(\"change\", () => { imgtoolsToggleQualityView(); imgtoolsTriggerProcess(); });\n    dom.rangeQuality.addEventListener(\"input\", (e) => dom.qualityIndicator.textContent = e.target.value + \"%\");\n    dom.rangeQuality.addEventListener(\"change\", imgtoolsTriggerProcess);\n    dom.inputWidth.addEventListener(\"input\", imgtoolsUpdateDimensions);\n    dom.inputHeight.addEventListener(\"input\", imgtoolsUpdateDimensions);\n\n    dom.presetButtons.forEach(button => {\n      button.addEventListener(\"click\", (e) => {\n        dom.presetButtons.forEach(b => b.classList.remove(\"imgtools-active\"));\n        e.target.classList.add(\"imgtools-active\");\n        const factor = parseFloat(e.target.getAttribute(\"data-scale\"));\n        dom.inputWidth.value = Math.round(state.sourceWidth * factor);\n        imgtoolsUpdateDimensions({ target: dom.inputWidth });\n      });\n    });\n\n    dom.resetBtn.addEventListener(\"click\", () => {\n      state.sourceImage = null; state.optimizedBlob = null; dom.fileInput.value = \"\"; dom.previewElement.src = \"\";\n      dom.presetButtons.forEach(b => b.classList.remove(\"imgtools-active\"));\n      dom.editorSuite.classList.add(\"imgtools-hidden\"); dom.dropzoneSection.classList.remove(\"imgtools-hidden\");\n    });\n\n    dom.downloadBtn.addEventListener(\"click\", () => {\n      if (!state.optimizedBlob) return;\n      const ext = dom.selectFormat.value.split(\"\/\")[1];\n      let baseName = state.sourceFileName.substring(0, state.sourceFileName.lastIndexOf(\".\")) || state.sourceFileName;\n      const link = document.createElement(\"a\");\n      link.href = URL.createObjectURL(state.optimizedBlob);\n      link.download = baseName + \"-optimized.\" + ext;\n      document.body.appendChild(link);\n      link.click();\n      setTimeout(() => { document.body.removeChild(link); URL.revokeObjectURL(link.href); }, 100);\n    });\n  })();\n});\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>Client-Side Image Studio Compress, resize, and convert images instantly. 100% private &#038; local. Drag &#038; drop your image here Supports JPEG, PNG, WEBP, and GIF up to 50MB Browse Files Live Preview Comparison Original Processing Optimization&#8230; Original:0 KB \u2794 Optimized:0 KB Reduction:0% Optimization Settings Clear Image Target Output Format JPEG (Optimized standard)PNG (Lossless compression)WEBP (Next-gen [&hellip;]<\/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-8","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/pages\/8","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/comments?post=8"}],"version-history":[{"count":23,"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/pages\/8\/revisions"}],"predecessor-version":[{"id":142,"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/pages\/8\/revisions\/142"}],"wp:attachment":[{"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/media?parent=8"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}