{"id":1516,"date":"2026-03-26T16:09:27","date_gmt":"2026-03-26T16:09:27","guid":{"rendered":"https:\/\/primetoolhub.com\/?page_id=1516"},"modified":"2026-07-16T07:20:13","modified_gmt":"2026-07-16T07:20:13","slug":"free-advanced-image-studio-pro","status":"publish","type":"page","link":"https:\/\/schoolict.net\/tools\/free-advanced-image-studio-pro\/","title":{"rendered":"Free Advanced Image Studio Pro &#8211; Compress, Crop, Convert &amp; Social Presets"},"content":{"rendered":"<div class=\"pth-hero-section\">\n<div class=\"pth-hero-content\">\n<h2>Image Studio Pro &#8211; Live Preview &#038; Editor<\/h2>\n<p>Edit images instantly with our Free Advanced Image Studio. Features live preview for contrast, brightness, exact pixel resizing, and 1-click web optimization.<\/p>\n<div id=\"pth-toc-placeholder\"><\/div>\n<\/p>\n<\/div>\n<div class=\"pth-hero-image\">\n\t<img data-no-lazy=\"1\"\n         src=\"https:\/\/schoolict.net\/tools\/wp-content\/uploads\/2026\/05\/Free-Advanced-Image-Studio-800x447.jpeg\"\n         width=\"800\"\n         height=\"447\"\n         alt=\"Free Online Image Editor\"\n         fetchpriority=\"high\"\n         loading=\"eager\"\n         decoding=\"async\"\n         style=\"width:100%; height:auto; display:block;\">\n  <\/div>\n<\/div>\n\n\n<div class=\"wp-block-rank-math-toc-block\" id=\"rank-math-toc\"><h2>Table of Contents<\/h2><nav><ul><li><a href=\"#\ud83d\udd34-web-p-jpeg-or-png-pick-once-save-megabytes\">\ud83d\udd34\u00a0WebP, JPEG or PNG? Pick Once, Save Megabytes<\/a><\/li><li><a href=\"#\ud83d\udfe1-what-the-quality-slider-is-actually-doing\">\ud83d\udfe1\u00a0What the Quality Slider Is Actually Doing<\/a><ul><li><a href=\"#\ud83d\udfe2-reading-the-qc-panel\">\ud83d\udfe2\u00a0Reading the QC Panel<\/a><\/li><\/ul><\/li><li><a href=\"#\ud83d\udd34-chroma-key-vs-ai-background-removal-two-different-jobs\">\ud83d\udd34\u00a0Chroma Key vs AI Background Removal \u2014 Two Different Jobs<\/a><\/li><li><a href=\"#\ud83d\udfe1-getting-bulk-mode-right\">\ud83d\udfe1\u00a0Getting Bulk Mode Right<\/a><\/li><li><a href=\"#\ud83d\udfe2-borders-corners-and-text-overlays\">\ud83d\udfe2\u00a0Borders, Corners and Text Overlays<\/a><\/li><\/ul><\/nav><\/div>\n\n\n<!-- LSCACHE_DISABLE -->\r\n<style>\r\n#pth-ais5-wrapper{font-family:'Inter',system-ui,sans-serif;color:#1e293b;line-height:1.6;max-width:1400px;margin:0 auto;box-sizing:border-box}\r\n#pth-ais5-wrapper *{box-sizing:border-box;min-width:0}\r\n#pth-ais5-wrapper .pais-card{background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:22px;margin-bottom:20px;box-shadow:0 4px 6px -1px rgba(0,0,0,.04)}\r\n#pth-ais5-wrapper h2.pais-title{font-size:1.5rem;font-weight:800;color:#1d4ed8;margin:0 0 6px}\r\n#pth-ais5-wrapper .pais-subtitle{color:#334155;margin:0 0 12px;font-weight:500;font-size:.9rem}\r\n#pth-ais5-wrapper .pais-meta{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:12px}\r\n#pth-ais5-wrapper .pais-badge{font-size:.7rem;font-weight:800;padding:3px 10px;border-radius:20px}\r\n#pth-ais5-wrapper .pais-badge-blue{background:#eff6ff;color:#1d4ed8;border:1px solid #bfdbfe}\r\n#pth-ais5-wrapper .pais-badge-green{background:#f0fdf4;color:#047857;border:1px solid #bbf7d0}\r\n#pth-ais5-wrapper .pais-badge-purple{background:#f5f3ff;color:#5b21b6;border:1px solid #ddd6fe}\r\n#pth-ais5-wrapper .pais-toolbar{display:flex;gap:8px;flex-wrap:wrap}\r\n#pth-ais5-wrapper .pais-btn{border:none;padding:9px 18px;border-radius:8px;font-weight:700;cursor:pointer;font-size:.85rem;display:inline-flex;align-items:center;gap:6px;font-family:inherit;transition:all .15s;position:relative}\r\n#pth-ais5-wrapper .pais-btn-primary{background:#2563eb;color:#fff}\r\n#pth-ais5-wrapper .pais-btn-primary:hover{background:#1d4ed8}\r\n#pth-ais5-wrapper .pais-btn-sec{background:#f1f5f9;color:#334155;border:1px solid #cbd5e1}\r\n#pth-ais5-wrapper .pais-btn-sec:hover{background:#e2e8f0}\r\n#pth-ais5-wrapper .pais-btn-warn{background:#fef9c3;color:#92400e;border:1px solid #fde68a}\r\n#pth-ais5-wrapper .pais-btn-danger{background:#fef2f2;color:#991b1b;border:1px solid #fecaca}\r\n#pth-ais5-wrapper .pais-btn-success{background:#f0fdf4;color:#047857;border:1px solid #bbf7d0}\r\n#pth-ais5-wrapper .pais-grid{display:grid;grid-template-columns:1.8fr 1fr;gap:20px;align-items:start}\r\n#pth-ais5-wrapper .pais-grid.pais-fw{grid-template-columns:1fr}\r\n#pth-ais5-wrapper .pais-grid.pais-fw .pais-side{display:none}\r\n#pth-ais5-wrapper .pais-main{background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:22px;box-shadow:0 4px 6px -1px rgba(0,0,0,.04)}\r\n#pth-ais5-wrapper .pais-side{background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;padding:22px}\r\n#pth-ais5-wrapper .pais-dropzone{position:relative;display:block;border:2px dashed #2563eb;background:#eff6ff;border-radius:12px;text-align:center;cursor:pointer;margin-bottom:22px;overflow:hidden;transition:.2s}\r\n#pth-ais5-wrapper .pais-dropzone:hover{background:#dbeafe;border-color:#1d4ed8}\r\n#pth-ais5-wrapper .pais-dz-inner{padding:40px 20px;pointer-events:none}\r\n#pth-ais5-wrapper .pais-dz-icon{font-size:2.5rem;display:block;margin-bottom:8px}\r\n#pth-ais5-wrapper .pais-dz-title{font-size:1.1rem;font-weight:800;color:#1d4ed8;margin:0 0 6px}\r\n#pth-ais5-wrapper .pais-dz-sub{font-size:.85rem;color:#334155;margin:0 0 14px}\r\n#pth-ais5-wrapper .pais-dz-browse{display:inline-block;background:#2563eb;color:#fff;padding:9px 22px;border-radius:50px;font-weight:700;font-size:.88rem}\r\n#pth-ais5-wrapper .pais-file-magic{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;cursor:pointer;z-index:10}\r\n#pth-ais5-wrapper .pais-preview-wrap{background:#f1f5f9;border:1px solid #e2e8f0;border-radius:10px;padding:12px;text-align:center;margin-bottom:16px;min-height:260px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}\r\n#pth-ais5-wrapper #pais-live-img{max-width:100%;max-height:440px;object-fit:contain;border-radius:4px;box-shadow:0 4px 12px rgba(0,0,0,.12);background:repeating-conic-gradient(#e2e8f0 0% 25%,#fff 0% 50%) 0 0\/20px 20px}\r\n#pth-ais5-wrapper #pais-wm-overlay{position:absolute;pointer-events:none;font-weight:700;text-shadow:0 0 5px rgba(0,0,0,.7);white-space:nowrap;display:none;z-index:4}\r\n#pth-ais5-wrapper #pais-vignette-el{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:3}\r\n#pth-ais5-wrapper #pais-crop-wrap{display:none;background:#0f172a;border-radius:10px;padding:12px;margin-bottom:16px;text-align:center}\r\n#pth-ais5-wrapper #pais-crop-canvas{cursor:crosshair;border-radius:6px;max-width:100%;display:block;margin:0 auto}\r\n#pth-ais5-wrapper .pais-tabs{display:flex;flex-wrap:wrap;border-bottom:2px solid #e2e8f0;margin-bottom:18px;gap:2px}\r\n#pth-ais5-wrapper .pais-tab{background:transparent;border:none;padding:9px 14px;font-size:.82rem;font-weight:700;color:#334155;cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-2px;border-radius:8px 8px 0 0;font-family:inherit;transition:.15s;white-space:nowrap}\r\n#pth-ais5-wrapper .pais-tab:hover{color:#1d4ed8;background:#f1f5f9}\r\n#pth-ais5-wrapper .pais-tab.pais-active{color:#1d4ed8;border-bottom-color:#2563eb;background:#eff6ff}\r\n#pth-ais5-wrapper .pais-panel{display:none}\r\n#pth-ais5-wrapper .pais-panel.pais-active{display:block}\r\n#pth-ais5-wrapper .pais-ctrl-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:14px}\r\n#pth-ais5-wrapper .pais-field{margin-bottom:14px}\r\n#pth-ais5-wrapper .pais-label{display:flex;justify-content:space-between;font-weight:700;font-size:.85rem;margin-bottom:7px;color:#334155}\r\n#pth-ais5-wrapper .pais-label span{color:#1d4ed8;font-weight:800}\r\n#pth-ais5-wrapper .pais-range{width:100%;accent-color:#2563eb;cursor:pointer}\r\n#pth-ais5-wrapper .pais-input,#pth-ais5-wrapper .pais-select{width:100%;padding:10px 13px;border:2px solid #cbd5e1;border-radius:8px;font-size:.9rem;font-family:inherit;color:#0f172a;background:#fff;outline:none}\r\n#pth-ais5-wrapper .pais-input:focus,#pth-ais5-wrapper .pais-select:focus{border-color:#2563eb;box-shadow:0 0 0 3px rgba(37,99,235,.1)}\r\n#pth-ais5-wrapper .pais-resize-row{display:flex;gap:10px;align-items:center}\r\n#pth-ais5-wrapper .pais-resize-row .pais-input{text-align:center;font-weight:700}\r\n#pth-ais5-wrapper .pais-lock-btn{font-size:1.2rem;cursor:pointer;user-select:none;padding:4px;flex-shrink:0;line-height:1}\r\n#pth-ais5-wrapper .pais-section-label{font-size:.78rem;font-weight:800;color:#334155;text-transform:uppercase;letter-spacing:.4px;margin:16px 0 10px;border-bottom:2px solid #f1f5f9;padding-bottom:5px}\r\n#pth-ais5-wrapper .pais-btn-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px;margin-bottom:14px}\r\n#pth-ais5-wrapper .pais-quick-btn{background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;padding:10px;text-align:center;cursor:pointer;font-weight:700;font-size:.82rem;color:#334155;font-family:inherit;transition:.15s}\r\n#pth-ais5-wrapper .pais-quick-btn:hover{border-color:#2563eb;color:#1d4ed8;background:#eff6ff}\r\n#pth-ais5-wrapper .pais-quick-btn.pais-sel{border-color:#2563eb;background:#eff6ff;color:#1d4ed8}\r\n#pth-ais5-wrapper .pais-crop-action-row{display:flex;gap:10px;margin-top:12px}\r\n#pth-ais5-wrapper .pais-social-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}\r\n#pth-ais5-wrapper .pais-social-card{background:#f8fafc;border:2px solid #e2e8f0;border-radius:10px;padding:14px;cursor:pointer;transition:.2s;text-align:center}\r\n#pth-ais5-wrapper .pais-social-card:hover{border-color:#2563eb;background:#eff6ff;transform:translateY(-2px)}\r\n#pth-ais5-wrapper .pais-social-icon{font-size:1.6rem;display:block;margin-bottom:5px}\r\n#pth-ais5-wrapper .pais-social-name{font-weight:800;color:#0f172a;font-size:.85rem;margin-bottom:2px}\r\n#pth-ais5-wrapper .pais-social-dim{font-family:monospace;font-size:.78rem;color:#1d4ed8;font-weight:700}\r\n#pth-ais5-wrapper .pais-bulk-list{max-height:200px;overflow-y:auto;background:#fff;border:1px solid #e2e8f0;border-radius:8px;padding:10px;margin-bottom:14px}\r\n#pth-ais5-wrapper .pais-bulk-row{display:flex;justify-content:space-between;font-size:.82rem;padding:5px 2px;border-bottom:1px dashed #e2e8f0;color:#334155}\r\n#pth-ais5-wrapper .pais-bulk-row:last-child{border-bottom:none}\r\n#pth-ais5-wrapper .pais-actions{display:flex;gap:12px;margin-top:24px;padding-top:20px;border-top:1px solid #e2e8f0;flex-wrap:wrap}\r\n#pth-ais5-wrapper .pais-btn-big{flex:1;padding:14px;font-size:1rem;font-weight:800;border-radius:10px;border:none;cursor:pointer;font-family:inherit;min-width:160px;transition:.15s}\r\n#pth-ais5-wrapper .pais-btn-big-blue{background:#2563eb;color:#fff;box-shadow:0 4px 10px rgba(37,99,235,.25)}\r\n#pth-ais5-wrapper .pais-btn-big-blue:hover{background:#1d4ed8;transform:translateY(-2px)}\r\n#pth-ais5-wrapper .pais-btn-big-amber{background:#f59e0b;color:#fff;box-shadow:0 4px 10px rgba(245,158,11,.25)}\r\n#pth-ais5-wrapper .pais-btn-big-amber:hover{background:#d97706;transform:translateY(-2px)}\r\n#pth-ais5-wrapper .pais-result{display:none;background:#f0fdf4;border:1px solid #bbf7d0;border-radius:12px;padding:20px;margin-top:16px;text-align:center}\r\n#pth-ais5-wrapper .pais-result-msg{font-weight:800;color:#047857;font-size:1rem;margin-bottom:10px}\r\n#pth-ais5-wrapper .pais-dl-btn{display:inline-block;background:#047857;color:#fff;padding:12px 28px;border-radius:8px;font-weight:800;text-decoration:none;font-size:1rem;transition:.15s}\r\n#pth-ais5-wrapper .pais-dl-btn:hover{background:#065f46;transform:translateY(-2px)}\r\n#pth-ais5-wrapper .pais-stat-box{background:#fff;border:1px solid #e2e8f0;border-radius:10px;padding:14px;margin-bottom:14px}\r\n#pth-ais5-wrapper .pais-stat-row{display:flex;justify-content:space-between;align-items:center;font-size:.85rem;margin-bottom:8px}\r\n#pth-ais5-wrapper .pais-stat-row:last-child{margin-bottom:0}\r\n#pth-ais5-wrapper .pais-stat-lbl{color:#334155;font-weight:600}\r\n#pth-ais5-wrapper .pais-stat-val{font-weight:800;color:#0f172a;text-align:right}\r\n#pth-ais5-wrapper .pais-score-good{color:#047857}\r\n#pth-ais5-wrapper .pais-score-warn{color:#92400e}\r\n#pth-ais5-wrapper .pais-score-bad{color:#991b1b}\r\n#pth-ais5-wrapper .pais-toast{visibility:hidden;min-width:220px;background:#0f172a;color:#fff;text-align:center;border-radius:8px;padding:12px 18px;position:fixed;z-index:99999;left:50%;bottom:30px;transform:translateX(-50%);font-size:.85rem;font-weight:700;opacity:0;transition:.3s;pointer-events:none}\r\n#pth-ais5-wrapper .pais-toast.pais-show{visibility:visible;opacity:1;bottom:50px}\r\n#pth-ais5-wrapper .pais-toast.pais-ok{background:#047857}\r\n#pth-ais5-wrapper .pais-toast.pais-err{background:#991b1b}\r\n#pth-ais5-wrapper .pais-toast.pais-info{background:#1d4ed8}\r\n#pth-ais5-wrapper .pais-info-note{background:#eff6ff;border:1px solid #bfdbfe;border-radius:8px;padding:12px;font-size:.82rem;color:#1e293b;font-weight:500;margin-bottom:14px}\r\n#pth-ais5-wrapper .pais-empty{text-align:center;color:#334155;padding:30px;font-weight:600}\r\n@media(max-width:900px){#pth-ais5-wrapper .pais-grid{grid-template-columns:1fr}#pth-ais5-wrapper .pais-ctrl-grid{grid-template-columns:1fr}#pth-ais5-wrapper .pais-actions{flex-direction:column}}\r\n@media print{#pth-ais5-wrapper .pais-toolbar,#pth-ais5-wrapper .pais-tabs,#pth-ais5-wrapper .pais-actions{display:none!important}}\r\n<\/style>\r\n\r\n<div id=\"pth-ais5-wrapper\">\r\n<div id=\"pais-toast\" class=\"pais-toast\" role=\"status\" aria-live=\"polite\"><\/div>\r\n\r\n<div class=\"pais-card\">\r\n  <h2 class=\"pais-title\">Advanced Image Studio Pro<\/h2>\r\n  <p class=\"pais-subtitle\">All-in-one image compress, convert, crop, filter, overlay, social presets & bulk ZIP export. 100% offline, zero external libraries.<\/p>\r\n  <div class=\"pais-meta\">\r\n    <span class=\"pais-badge pais-badge-blue\">v5.0<\/span>\r\n    <span class=\"pais-badge pais-badge-green\">\ud83d\udd12 100% Offline<\/span>\r\n    <span class=\"pais-badge pais-badge-purple\">No External Libs<\/span>\r\n  <\/div>\r\n  <div class=\"pais-toolbar\">\r\n    <button type=\"button\" class=\"pais-btn pais-btn-danger\" id=\"pais-btn-startover\" style=\"display:none;\">\ud83c\udfe0 Start Over<\/button>\r\n    <div class=\"pais-btn pais-btn-sec\" id=\"pais-btn-replace\" style=\"display:none;cursor:pointer;\">\ud83d\udd04 Add \/ Replace<input type=\"file\" id=\"pais-file-replace\" accept=\"image\/*\" multiple class=\"pais-file-magic\"><\/div>\r\n    <button type=\"button\" class=\"pais-btn pais-btn-sec\" id=\"pais-btn-undo\" style=\"display:none;\">\u21ba Reset Filters<\/button>\r\n    <button type=\"button\" class=\"pais-btn pais-btn-sec\" id=\"pais-btn-fw\">\u26f6 Full Width<\/button>\r\n  <\/div>\r\n<\/div>\r\n\r\n<div class=\"pais-grid\" id=\"pais-grid\">\r\n  <div class=\"pais-main\">\r\n\r\n    <label class=\"pais-dropzone\" id=\"pais-dropzone\">\r\n      <input type=\"file\" id=\"pais-file-input\" accept=\"image\/*\" multiple class=\"pais-file-magic\">\r\n      <div class=\"pais-dz-inner\">\r\n        <span class=\"pais-dz-icon\">\ud83d\udce5<\/span>\r\n        <p class=\"pais-dz-title\">Click or Drag & Drop Images Here<\/p>\r\n        <p class=\"pais-dz-sub\">Single image for editing \u2014 multiple images for Bulk ZIP export.<\/p>\r\n        <span class=\"pais-dz-browse\">\ud83d\udcc1 Browse Files<\/span>\r\n        <p style=\"font-size:.78rem;color:#334155;margin-top:12px;\">Hold Ctrl \/ Cmd to select multiple images for Bulk mode.<\/p>\r\n      <\/div>\r\n    <\/label>\r\n    <button type=\"button\" class=\"pais-btn pais-btn-sec\" id=\"pais-load-sample\" style=\"width:100%;justify-content:center;margin-top:-16px;margin-bottom:20px;\">\ud83d\udca1 Load Sample Image<\/button>\r\n\r\n    <div id=\"pais-workspace\" style=\"display:none;\">\r\n\r\n      <div class=\"pais-preview-wrap\" id=\"pais-preview-wrap\">\r\n        <img decoding=\"async\" id=\"pais-live-img\" src=\"\" alt=\"Live Preview\" data-no-lazy=\"1\">\r\n        <div id=\"pais-wm-overlay\"><\/div>\r\n        <div id=\"pais-vignette-el\"><\/div>\r\n      <\/div>\r\n\r\n      <div id=\"pais-crop-wrap\">\r\n        <canvas id=\"pais-crop-canvas\"><\/canvas>\r\n      <\/div>\r\n\r\n      <div class=\"pais-tabs\" role=\"tablist\">\r\n        <button type=\"button\" class=\"pais-tab pais-active\" data-tab=\"export\">\ud83d\udcbe Export & QC<\/button>\r\n        <button type=\"button\" class=\"pais-tab\" data-tab=\"crop\">\u2702\ufe0f Crop<\/button>\r\n        <button type=\"button\" class=\"pais-tab\" data-tab=\"adjust\">\ud83c\udf9b\ufe0f Adjust & Effects<\/button>\r\n        <button type=\"button\" class=\"pais-tab\" data-tab=\"overlays\">\ud83c\udfa8 Overlays & Frame<\/button>\r\n        <button type=\"button\" class=\"pais-tab\" data-tab=\"chroma\">\ud83e\ude84 Chroma Key BG<\/button>\r\n        <button type=\"button\" class=\"pais-tab\" data-tab=\"social\">\ud83d\udcf1 Social Presets<\/button>\r\n        <button type=\"button\" class=\"pais-tab\" data-tab=\"bulk\">\ud83d\uddc2\ufe0f Bulk & ZIP<\/button>\r\n      <\/div>\r\n\r\n      <div id=\"pais-p-export\" class=\"pais-panel pais-active\">\r\n        <div class=\"pais-field\">\r\n          <label class=\"pais-label\">Export Dimensions (Width \u00d7 Height)<\/label>\r\n          <div class=\"pais-resize-row\">\r\n            <input type=\"number\" id=\"pais-w\" class=\"pais-input\" placeholder=\"Width\" aria-label=\"Width in pixels\">\r\n            <span class=\"pais-lock-btn\" id=\"pais-lock\" title=\"Lock aspect ratio\">\ud83d\udd12<\/span>\r\n            <input type=\"number\" id=\"pais-h\" class=\"pais-input\" placeholder=\"Height\" aria-label=\"Height in pixels\">\r\n          <\/div>\r\n        <\/div>\r\n        <div class=\"pais-field\">\r\n          <label class=\"pais-label\">Scale <span id=\"lbl-scale\">100%<\/span><\/label>\r\n          <input type=\"range\" class=\"pais-range\" id=\"pais-scale\" min=\"10\" max=\"200\" value=\"100\">\r\n        <\/div>\r\n        <div class=\"pais-ctrl-grid\">\r\n          <div class=\"pais-field\">\r\n            <label class=\"pais-label\">Output Format<\/label>\r\n            <select id=\"pais-fmt\" class=\"pais-select\">\r\n              <option value=\"webp\">WebP (Best for Web)<\/option>\r\n              <option value=\"jpeg\">JPEG \/ JPG<\/option>\r\n              <option value=\"png\">PNG (Lossless \/ Transparent)<\/option>\r\n            <\/select>\r\n          <\/div>\r\n          <div class=\"pais-field\" id=\"pais-quality-wrap\">\r\n            <label class=\"pais-label\">Quality <span id=\"lbl-quality\">85%<\/span><\/label>\r\n            <input type=\"range\" class=\"pais-range\" id=\"pais-quality\" min=\"10\" max=\"100\" value=\"85\">\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div id=\"pais-p-crop\" class=\"pais-panel\">\r\n        <div id=\"pais-crop-init\">\r\n          <p style=\"font-size:.88rem;color:#334155;margin-top:0;\">Drag a selection on the canvas to define the crop area, then click Apply.<\/p>\r\n          <button type=\"button\" class=\"pais-btn pais-btn-primary\" id=\"pais-enter-crop\" style=\"width:100%;justify-content:center;margin-bottom:16px;\">\u2702\ufe0f Enter Crop Mode<\/button>\r\n          <div class=\"pais-section-label\">Aspect Ratio Presets<\/div>\r\n          <div class=\"pais-btn-grid\">\r\n            <button type=\"button\" class=\"pais-quick-btn\" data-ratio=\"free\">Free<\/button>\r\n            <button type=\"button\" class=\"pais-quick-btn\" data-ratio=\"1\">1:1<\/button>\r\n            <button type=\"button\" class=\"pais-quick-btn\" data-ratio=\"1.7778\">16:9<\/button>\r\n            <button type=\"button\" class=\"pais-quick-btn\" data-ratio=\"1.3333\">4:3<\/button>\r\n            <button type=\"button\" class=\"pais-quick-btn\" data-ratio=\"1.5\">3:2<\/button>\r\n            <button type=\"button\" class=\"pais-quick-btn\" data-ratio=\"0.5625\">9:16<\/button>\r\n          <\/div>\r\n          <div class=\"pais-section-label\">Rotate & Flip<\/div>\r\n          <div class=\"pais-btn-grid\">\r\n            <button type=\"button\" class=\"pais-quick-btn\" id=\"pais-rot-l\">\u21ba Left 90\u00b0<\/button>\r\n            <button type=\"button\" class=\"pais-quick-btn\" id=\"pais-rot-r\">\u21bb Right 90\u00b0<\/button>\r\n            <button type=\"button\" class=\"pais-quick-btn\" id=\"pais-flip-h\">\u2194\ufe0f Flip H<\/button>\r\n            <button type=\"button\" class=\"pais-quick-btn\" id=\"pais-flip-v\">\u2195\ufe0f Flip V<\/button>\r\n          <\/div>\r\n        <\/div>\r\n        <div id=\"pais-crop-active\" style=\"display:none;\">\r\n          <p style=\"font-size:.85rem;color:#1d4ed8;font-weight:700;text-align:center;margin:0 0 12px;\">Drag on the image above to select the crop area.<\/p>\r\n          <div class=\"pais-crop-action-row\">\r\n            <button type=\"button\" class=\"pais-btn pais-btn-danger\" id=\"pais-crop-cancel\" style=\"flex:1;justify-content:center;\">\u274c Cancel<\/button>\r\n            <button type=\"button\" class=\"pais-btn pais-btn-primary\" id=\"pais-crop-apply\" style=\"flex:1;justify-content:center;\">\u2705 Apply Crop<\/button>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div id=\"pais-p-adjust\" class=\"pais-panel\">\r\n        <div class=\"pais-section-label\">Basic Adjustments<\/div>\r\n        <div class=\"pais-ctrl-grid\">\r\n          <div class=\"pais-field\"><label class=\"pais-label\">Brightness <span id=\"lbl-bright\">100%<\/span><\/label><input type=\"range\" class=\"pais-range\" id=\"val-bright\" min=\"0\" max=\"200\" value=\"100\" data-filter=\"brightness\" data-unit=\"%\"><\/div>\r\n          <div class=\"pais-field\"><label class=\"pais-label\">Contrast <span id=\"lbl-contrast\">100%<\/span><\/label><input type=\"range\" class=\"pais-range\" id=\"val-contrast\" min=\"0\" max=\"200\" value=\"100\" data-filter=\"contrast\" data-unit=\"%\"><\/div>\r\n          <div class=\"pais-field\"><label class=\"pais-label\">Saturation <span id=\"lbl-sat\">100%<\/span><\/label><input type=\"range\" class=\"pais-range\" id=\"val-sat\" min=\"0\" max=\"200\" value=\"100\" data-filter=\"saturate\" data-unit=\"%\"><\/div>\r\n          <div class=\"pais-field\"><label class=\"pais-label\">Hue Rotate <span id=\"lbl-hue\">0\u00b0<\/span><\/label><input type=\"range\" class=\"pais-range\" id=\"val-hue\" min=\"0\" max=\"360\" value=\"0\" data-filter=\"hue-rotate\" data-unit=\"deg\"><\/div>\r\n        <\/div>\r\n        <div class=\"pais-section-label\">Style Effects<\/div>\r\n        <div class=\"pais-ctrl-grid\">\r\n          <div class=\"pais-field\"><label class=\"pais-label\">Blur <span id=\"lbl-blur\">0px<\/span><\/label><input type=\"range\" class=\"pais-range\" id=\"val-blur\" min=\"0\" max=\"20\" value=\"0\" data-filter=\"blur\" data-unit=\"px\"><\/div>\r\n          <div class=\"pais-field\"><label class=\"pais-label\">Grayscale <span id=\"lbl-gray\">0%<\/span><\/label><input type=\"range\" class=\"pais-range\" id=\"val-gray\" min=\"0\" max=\"100\" value=\"0\" data-filter=\"grayscale\" data-unit=\"%\"><\/div>\r\n          <div class=\"pais-field\"><label class=\"pais-label\">Sepia <span id=\"lbl-sepia\">0%<\/span><\/label><input type=\"range\" class=\"pais-range\" id=\"val-sepia\" min=\"0\" max=\"100\" value=\"0\" data-filter=\"sepia\" data-unit=\"%\"><\/div>\r\n          <div class=\"pais-field\"><label class=\"pais-label\">Invert <span id=\"lbl-invert\">0%<\/span><\/label><input type=\"range\" class=\"pais-range\" id=\"val-invert\" min=\"0\" max=\"100\" value=\"0\" data-filter=\"invert\" data-unit=\"%\"><\/div>\r\n          <div class=\"pais-field\"><label class=\"pais-label\">Sharpen <span id=\"lbl-sharpen\">0%<\/span><\/label><input type=\"range\" class=\"pais-range\" id=\"val-sharpen\" min=\"0\" max=\"100\" value=\"0\"><\/div>\r\n          <div class=\"pais-field\"><label class=\"pais-label\">Vignette <span id=\"lbl-vignette\">0%<\/span><\/label><input type=\"range\" class=\"pais-range\" id=\"val-vignette\" min=\"0\" max=\"100\" value=\"0\"><\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div id=\"pais-p-overlays\" class=\"pais-panel\">\r\n        <div class=\"pais-section-label\">Frame & Border<\/div>\r\n        <div class=\"pais-ctrl-grid\">\r\n          <div class=\"pais-field\"><label class=\"pais-label\">Border Width <span id=\"lbl-bw\">0px<\/span><\/label><input type=\"range\" class=\"pais-range\" id=\"val-bw\" min=\"0\" max=\"60\" value=\"0\"><\/div>\r\n          <div class=\"pais-field\"><label class=\"pais-label\">Border Color<\/label><input type=\"color\" id=\"val-bc\" class=\"pais-input\" value=\"#0f172a\" style=\"padding:3px 6px;cursor:pointer;height:42px;\"><\/div>\r\n          <div class=\"pais-field\"><label class=\"pais-label\">Rounded Corners <span id=\"lbl-br\">0%<\/span><\/label><input type=\"range\" class=\"pais-range\" id=\"val-br\" min=\"0\" max=\"50\" value=\"0\"><\/div>\r\n        <\/div>\r\n        <div class=\"pais-section-label\">Text Overlay<\/div>\r\n        <div class=\"pais-ctrl-grid\">\r\n          <div class=\"pais-field\"><label class=\"pais-label\">Overlay Text<\/label><input type=\"text\" id=\"val-wm-text\" class=\"pais-input\" placeholder=\"e.g. Copyright 2026\"><\/div>\r\n          <div class=\"pais-field\"><label class=\"pais-label\">Text Color<\/label><input type=\"color\" id=\"val-wm-color\" class=\"pais-input\" value=\"#ffffff\" style=\"padding:3px 6px;cursor:pointer;height:42px;\"><\/div>\r\n          <div class=\"pais-field\"><label class=\"pais-label\">Font Size <span id=\"lbl-wm-size\">auto<\/span><\/label><input type=\"range\" class=\"pais-range\" id=\"val-wm-size\" min=\"12\" max=\"120\" value=\"36\"><\/div>\r\n          <div class=\"pais-field\"><label class=\"pais-label\">Opacity <span id=\"lbl-wm-op\">80%<\/span><\/label><input type=\"range\" class=\"pais-range\" id=\"val-wm-op\" min=\"0\" max=\"100\" value=\"80\"><\/div>\r\n          <div class=\"pais-field\"><label class=\"pais-label\">Position<\/label>\r\n            <select id=\"val-wm-pos\" class=\"pais-select\">\r\n              <option value=\"center\">Center<\/option>\r\n              <option value=\"top-left\">Top Left<\/option>\r\n              <option value=\"top-center\">Top Center<\/option>\r\n              <option value=\"top-right\">Top Right<\/option>\r\n              <option value=\"bottom-left\">Bottom Left<\/option>\r\n              <option value=\"bottom-center\">Bottom Center<\/option>\r\n              <option value=\"bottom-right\" selected>Bottom Right<\/option>\r\n            <\/select>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div id=\"pais-p-chroma\" class=\"pais-panel\">\r\n        <div class=\"pais-info-note\">\ud83e\ude84 <strong>Chroma Key BG Removal<\/strong> \u2014 removes solid-color backgrounds by matching pixels within a color tolerance range. Best for images with a uniform flat background (white, green-screen, etc.).<br>For AI-powered removal from complex photos, use the <strong>AI Image Eraser<\/strong> tool.<\/div>\r\n        <div class=\"pais-ctrl-grid\">\r\n          <div class=\"pais-field\"><label class=\"pais-label\">Background Color to Remove<\/label><input type=\"color\" id=\"val-chroma-color\" class=\"pais-input\" value=\"#ffffff\" style=\"padding:3px 6px;cursor:pointer;height:42px;\"><\/div>\r\n          <div class=\"pais-field\"><label class=\"pais-label\">Tolerance <span id=\"lbl-chroma-tol\">30<\/span><\/label><input type=\"range\" class=\"pais-range\" id=\"val-chroma-tol\" min=\"1\" max=\"150\" value=\"30\"><\/div>\r\n        <\/div>\r\n        <button type=\"button\" class=\"pais-btn pais-btn-primary\" id=\"pais-apply-chroma\" style=\"width:100%;justify-content:center;\">\ud83e\ude84 Apply Chroma Key Removal<\/button>\r\n        <p style=\"font-size:.78rem;color:#334155;margin-top:8px;text-align:center;\">Sets output to PNG automatically to preserve transparency.<\/p>\r\n      <\/div>\r\n\r\n      <div id=\"pais-p-social\" class=\"pais-panel\">\r\n        <p style=\"font-size:.88rem;color:#334155;margin:0 0 14px;font-weight:500;\">Click any preset to auto-fill the export dimensions and switch to the Export tab. Resize and download from there.<\/p>\r\n        <div class=\"pais-social-grid\" id=\"pais-social-grid\"><\/div>\r\n      <\/div>\r\n\r\n      <div id=\"pais-p-bulk\" class=\"pais-panel\">\r\n        <p style=\"font-size:.88rem;color:#334155;margin:0 0 12px;font-weight:500;\">Upload multiple images. The current Export & QC settings (format, size, quality) apply to all files. Downloads as a single ZIP.<\/p>\r\n        <div class=\"pais-bulk-list\" id=\"pais-bulk-list\"><div class=\"pais-empty\">No bulk files loaded. Use Add \/ Replace and select multiple images.<\/div><\/div>\r\n        <button type=\"button\" class=\"pais-btn pais-btn-primary\" id=\"pais-bulk-process\" style=\"display:none;width:100%;justify-content:center;\">\ud83d\uddc2\ufe0f Process All & Download ZIP<\/button>\r\n        <p style=\"font-size:.75rem;color:#334155;font-weight:500;margin-top:8px;\">ZIP uses STORED method (uncompressed archive) \u2014 no external library required.<\/p>\r\n      <\/div>\r\n\r\n      <div class=\"pais-actions\" id=\"pais-single-actions\">\r\n        <button type=\"button\" class=\"pais-btn-big pais-btn-big-amber\" id=\"pais-btn-weboptimize\">\u26a1 1-Click Web Optimize<\/button>\r\n        <button type=\"button\" class=\"pais-btn-big pais-btn-big-blue\" id=\"pais-btn-process\">\ud83d\udcbe Apply & Export Image<\/button>\r\n      <\/div>\r\n\r\n      <div class=\"pais-result\" id=\"pais-result\">\r\n        <div class=\"pais-result-msg\" id=\"pais-result-msg\">Image processed successfully!<\/div>\r\n        <img decoding=\"async\" id=\"pais-result-thumb\" src=\"\" style=\"max-height:130px;border-radius:8px;margin:10px auto;display:block;box-shadow:0 2px 8px rgba(0,0,0,.1);\" alt=\"Processed image preview\">\r\n        <a href=\"#\" id=\"pais-dl-link\" class=\"pais-dl-btn\" download>\u2b07\ufe0f Download Image<\/a>\r\n      <\/div>\r\n\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <div class=\"pais-side\" id=\"pais-side\">\r\n    <h3 style=\"font-size:1rem;font-weight:800;color:#0f172a;margin:0 0 14px;\">\ud83d\udcca Live QC Panel<\/h3>\r\n    <div class=\"pais-stat-box\">\r\n      <div class=\"pais-stat-row\"><span class=\"pais-stat-lbl\">Original size<\/span><span class=\"pais-stat-val\" id=\"stat-orig-size\">\u2014<\/span><\/div>\r\n      <div class=\"pais-stat-row\"><span class=\"pais-stat-lbl\">Dimensions<\/span><span class=\"pais-stat-val\" id=\"stat-orig-dim\">\u2014<\/span><\/div>\r\n    <\/div>\r\n    <div class=\"pais-stat-box\" style=\"border-color:#bfdbfe;background:#eff6ff;\">\r\n      <div class=\"pais-stat-row\"><span class=\"pais-stat-lbl\">Export size<\/span><span class=\"pais-stat-val\" id=\"stat-export-dim\" style=\"color:#1d4ed8;\">\u2014<\/span><\/div>\r\n      <div class=\"pais-stat-row\"><span class=\"pais-stat-lbl\">Format<\/span><span class=\"pais-stat-val\" id=\"stat-fmt\">\u2014<\/span><\/div>\r\n      <div class=\"pais-stat-row\"><span class=\"pais-stat-lbl\">Est. file size<\/span><span class=\"pais-stat-val\" id=\"stat-est\" style=\"font-size:1rem;\">\u2014<\/span><\/div>\r\n      <div class=\"pais-stat-row\" style=\"padding-top:8px;border-top:1px dashed #bfdbfe;margin-top:4px;\"><span class=\"pais-stat-lbl\">Web score<\/span><span class=\"pais-stat-val\" id=\"stat-score\">\u2014<\/span><\/div>\r\n    <\/div>\r\n    <div class=\"pais-stat-box\">\r\n      <div class=\"pais-stat-row\"><span class=\"pais-stat-lbl\">Active filters<\/span><span class=\"pais-stat-val\" id=\"stat-filters\">None<\/span><\/div>\r\n      <div class=\"pais-stat-row\"><span class=\"pais-stat-lbl\">Bulk queue<\/span><span class=\"pais-stat-val\" id=\"stat-bulk\">0 files<\/span><\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<canvas id=\"pais-canvas\" style=\"display:none;\"><\/canvas>\r\n<\/div>\r\n\r\n<script data-no-optimize=\"1\" data-no-minify=\"1\" data-cfasync=\"false\">\r\n(function(){\r\n'use strict';\r\nif(window.pthAIS5){return;}\r\n\r\nvar CRC_TABLE=(function(){var t=[];for(var i=0;i<256;i++){var c=i;for(var j=0;j<8;j++){c=(c&1)?(0xEDB88320^(c>>>1)):(c>>>1);}t[i]=c>>>0;}return t;})();\r\nfunction crc32bytes(d){var crc=0xFFFFFFFF;for(var i=0;i<d.length;i++){crc=(crc>>>8)^CRC_TABLE[(crc^d[i])&0xFF];}return(crc^0xFFFFFFFF)>>>0;}\r\nfunction strToU8(s){var a=new Uint8Array(s.length);for(var i=0;i<s.length;i++)a[i]=s.charCodeAt(i)&0xFF;return a;}\r\nfunction dataURLtoU8(u){var b64=u.split(',')[1];var raw=atob(b64);var a=new Uint8Array(raw.length);for(var i=0;i<raw.length;i++)a[i]=raw.charCodeAt(i);return a;}\r\n\r\nfunction buildZip(entries){\r\nvar i,p;var processed=[];var lfhTotal=0;\r\nfor(i=0;i<entries.length;i++){var e=entries[i];var nu8=strToU8(e.name);var cs=crc32bytes(e.data);processed.push({nu8:nu8,data:e.data,crc:cs,offset:lfhTotal});lfhTotal+=30+nu8.length+e.data.length;}\r\nvar cdSz=0;for(i=0;i<processed.length;i++)cdSz+=46+processed[i].nu8.length;\r\nvar buf=new ArrayBuffer(lfhTotal+cdSz+22);var u8=new Uint8Array(buf);var dv=new DataView(buf);var pos=0;\r\nfunction w4(v){dv.setUint32(pos,v,true);pos+=4;}function w2(v){dv.setUint16(pos,v,true);pos+=2;}function wb(a){u8.set(a,pos);pos+=a.length;}\r\nfor(i=0;i<processed.length;i++){p=processed[i];w4(0x04034b50);w2(20);w2(0);w2(0);w2(0);w2(0);w4(p.crc);w4(p.data.length);w4(p.data.length);w2(p.nu8.length);w2(0);wb(p.nu8);wb(p.data);}\r\nvar cdStart=pos;\r\nfor(i=0;i<processed.length;i++){p=processed[i];w4(0x02014b50);w2(20);w2(20);w2(0);w2(0);w2(0);w2(0);w4(p.crc);w4(p.data.length);w4(p.data.length);w2(p.nu8.length);w2(0);w2(0);w2(0);w2(0);w4(0);w4(p.offset);wb(p.nu8);}\r\nvar cdA=pos-cdStart;w4(0x06054b50);w2(0);w2(0);w2(processed.length);w2(processed.length);w4(cdA);w4(cdStart);w2(0);\r\nreturn u8;\r\n}\r\n\r\nvar SOCIAL_PRESETS=[\r\n{platform:'Instagram',name:'Square Post',w:1080,h:1080,fmt:'jpeg'},\r\n{platform:'Instagram',name:'Story \/ Reel',w:1080,h:1920,fmt:'jpeg'},\r\n{platform:'Twitter \/ X',name:'Header Banner',w:1500,h:500,fmt:'jpeg'},\r\n{platform:'Twitter \/ X',name:'Profile Photo',w:400,h:400,fmt:'jpeg'},\r\n{platform:'Facebook',name:'Cover Photo',w:820,h:312,fmt:'jpeg'},\r\n{platform:'Facebook',name:'Post Image',w:1200,h:628,fmt:'jpeg'},\r\n{platform:'YouTube',name:'Thumbnail',w:1280,h:720,fmt:'jpeg'},\r\n{platform:'YouTube',name:'Channel Art',w:2560,h:1440,fmt:'jpeg'},\r\n{platform:'LinkedIn',name:'Banner',w:1584,h:396,fmt:'jpeg'},\r\n{platform:'LinkedIn',name:'Profile Photo',w:400,h:400,fmt:'jpeg'},\r\n{platform:'WhatsApp',name:'Profile DP',w:512,h:512,fmt:'jpeg'},\r\n{platform:'Pinterest',name:'Pin Image',w:1000,h:1500,fmt:'jpeg'}\r\n];\r\n\r\nwindow.pthAIS5={\r\ninitialized:false,workingImg:null,origSrc:'',fileName:'image',origKB:0,\r\nbaseW:0,baseH:0,baseRatio:1,\r\nst:{rotation:0,flipH:1,flipV:1,filters:{brightness:100,contrast:100,saturate:100,'hue-rotate':0,blur:0,grayscale:0,sepia:0,invert:0}},\r\nbulkFiles:[],\r\ncropSt:{active:false,sx:0,sy:0,ex:0,ey:0,ratio:null,drawing:false,hasSel:false,scX:1,scY:1},\r\nlockRatio:true,toastTimer:null,\r\n\r\nel:function(id){return document.getElementById(id);},\r\n\r\nshowToast:function(msg,type){\r\nvar t=this.el('pais-toast');if(!t)return;\r\nt.textContent=msg;t.className='pais-toast pais-show '+(type==='ok'?'pais-ok':type==='err'?'pais-err':'pais-info');\r\nvar self=this;clearTimeout(self.toastTimer);self.toastTimer=setTimeout(function(){t.className='pais-toast';},3000);\r\n},\r\n\r\nswitchTab:function(id){\r\nvar w=this.el('pth-ais5-wrapper');if(!w)return;\r\nvar i,tabs=w.querySelectorAll('.pais-tab'),panels=w.querySelectorAll('.pais-panel');\r\nfor(i=0;i<tabs.length;i++)tabs[i].classList.remove('pais-active');\r\nfor(i=0;i<panels.length;i++)panels[i].classList.remove('pais-active');\r\nvar btn=w.querySelector('[data-tab=\"'+id+'\"]'),panel=this.el('pais-p-'+id);\r\nif(btn)btn.classList.add('pais-active');if(panel)panel.classList.add('pais-active');\r\n},\r\n\r\ngetFilterStr:function(){\r\nvar f=this.st.filters,s='';\r\nif(f.brightness!==100)s+='brightness('+f.brightness+'%) ';\r\nif(f.contrast!==100)s+='contrast('+f.contrast+'%) ';\r\nif(f.saturate!==100)s+='saturate('+f.saturate+'%) ';\r\nif(f['hue-rotate']!==0)s+='hue-rotate('+f['hue-rotate']+'deg) ';\r\nif(f.blur!==0)s+='blur('+f.blur+'px) ';\r\nif(f.grayscale!==0)s+='grayscale('+f.grayscale+'%) ';\r\nif(f.sepia!==0)s+='sepia('+f.sepia+'%) ';\r\nif(f.invert!==0)s+='invert('+f.invert+'%) ';\r\nreturn s.trim()||'none';\r\n},\r\n\r\nactiveFiltersCount:function(){\r\nvar f=this.st.filters,defs={brightness:100,contrast:100,saturate:100,'hue-rotate':0,blur:0,grayscale:0,sepia:0,invert:0},c=0,k;\r\nfor(k in defs){if(f[k]!==defs[k])c++;}\r\nif(parseInt(this.el('val-sharpen').value)>0)c++;\r\nif(parseInt(this.el('val-vignette').value)>0)c++;\r\nreturn c;\r\n},\r\n\r\nupdateLivePreview:function(){\r\nvar self=this;\r\nvar img=self.el('pais-live-img');if(!img)return;\r\nimg.style.filter=self.getFilterStr();\r\nimg.style.transform='rotate('+self.st.rotation+'deg) scaleX('+self.st.flipH+') scaleY('+self.st.flipV+')';\r\nvar bw=parseInt(self.el('val-bw').value)||0;\r\nvar bc=self.el('val-bc').value;\r\nvar br=parseInt(self.el('val-br').value)||0;\r\nimg.style.border=bw>0?bw+'px solid '+bc:'none';\r\nimg.style.borderRadius=br>0?br+'%':'4px';\r\nvar wt=self.el('val-wm-text').value;\r\nvar wmEl=self.el('pais-wm-overlay');\r\nif(wt&&wmEl){\r\nwmEl.style.display='block';wmEl.textContent=wt;\r\nwmEl.style.color=self.el('val-wm-color').value;\r\nwmEl.style.opacity=self.el('val-wm-op').value\/100;\r\nwmEl.style.fontSize=self.el('val-wm-size').value+'px';\r\nvar pos=self.el('val-wm-pos').value;\r\nwmEl.style.top='auto';wmEl.style.bottom='auto';wmEl.style.left='auto';wmEl.style.right='auto';wmEl.style.transform='none';\r\nif(pos==='center'){wmEl.style.top='50%';wmEl.style.left='50%';wmEl.style.transform='translate(-50%,-50%)';}\r\nelse if(pos==='top-left'){wmEl.style.top='10px';wmEl.style.left='10px';}\r\nelse if(pos==='top-center'){wmEl.style.top='10px';wmEl.style.left='50%';wmEl.style.transform='translateX(-50%)';}\r\nelse if(pos==='top-right'){wmEl.style.top='10px';wmEl.style.right='10px';}\r\nelse if(pos==='bottom-left'){wmEl.style.bottom='10px';wmEl.style.left='10px';}\r\nelse if(pos==='bottom-center'){wmEl.style.bottom='10px';wmEl.style.left='50%';wmEl.style.transform='translateX(-50%)';}\r\nelse{wmEl.style.bottom='10px';wmEl.style.right='10px';}\r\n}else if(wmEl){wmEl.style.display='none';}\r\nvar vig=parseInt(self.el('val-vignette').value)||0;\r\nvar vigEl=self.el('pais-vignette-el');\r\nif(vigEl)vigEl.style.background=vig>0?'radial-gradient(circle,rgba(0,0,0,0) 50%,rgba(0,0,0,'+vig\/100+') 100%)':'none';\r\nvar cw=parseInt(self.el('pais-w').value)||self.baseW;\r\nvar ch=parseInt(self.el('pais-h').value)||self.baseH;\r\nvar isSwapped=(Math.abs(self.st.rotation)%180===90);\r\nvar ew=(isSwapped?ch:cw)+(bw*2),eh=(isSwapped?cw:ch)+(bw*2);\r\nvar edEl=self.el('stat-export-dim');if(edEl)edEl.textContent=ew+' x '+eh+' px';\r\nvar fmtEl=self.el('stat-fmt');if(fmtEl)fmtEl.textContent=(self.el('pais-fmt').value||'webp').toUpperCase();\r\nvar fcEl=self.el('stat-filters');if(fcEl){var fc=self.activeFiltersCount();fcEl.textContent=fc>0?fc+' active':'None';}\r\nself.estimateQC();\r\n},\r\n\r\nestimateQC:function(){\r\nvar self=this;if(!self.origKB)return;\r\nvar fmt=self.el('pais-fmt').value,q=self.el('pais-quality').value\/100;\r\nvar bw=parseInt(self.el('val-bw').value)||0;\r\nvar cw=parseInt(self.el('pais-w').value)||self.baseW;\r\nvar ch=parseInt(self.el('pais-h').value)||self.baseH;\r\nvar px=(cw+bw*2)*(ch+bw*2),origPx=self.baseW*self.baseH;\r\nvar ratio=origPx>0?px\/origPx:1;\r\nvar mult=fmt==='webp'?0.45*q:fmt==='jpeg'?0.65*q:1.1;\r\nvar estKB=Math.round(self.origKB*ratio*mult);\r\nvar estEl=self.el('stat-est');if(estEl)estEl.textContent=estKB<1024?estKB+' KB':(estKB\/1024).toFixed(2)+' MB';\r\nvar sc=self.el('stat-score');if(!sc)return;\r\nif(fmt==='webp'&&estKB<500&&cw<=1920){sc.textContent='Excellent';sc.className='pais-stat-val pais-score-good';}\r\nelse if(estKB>1500){sc.textContent='Poor - too large';sc.className='pais-stat-val pais-score-bad';}\r\nelse{sc.textContent='Good';sc.className='pais-stat-val pais-score-warn';}\r\n},\r\n\r\nresetFilters:function(){\r\nvar defs={brightness:100,contrast:100,saturate:100,'hue-rotate':0,blur:0,grayscale:0,sepia:0,invert:0};\r\nvar units={brightness:'%',contrast:'%',saturate:'%','hue-rotate':'deg',blur:'px',grayscale:'%',sepia:'%',invert:'%'};\r\nvar ids={'brightness':'val-bright','contrast':'val-contrast','saturate':'val-sat','hue-rotate':'val-hue','blur':'val-blur','grayscale':'val-gray','sepia':'val-sepia','invert':'val-invert'};\r\nvar lblIds={'brightness':'lbl-bright','contrast':'lbl-contrast','saturate':'lbl-sat','hue-rotate':'lbl-hue','blur':'lbl-blur','grayscale':'lbl-gray','sepia':'lbl-sepia','invert':'lbl-invert'};\r\nfor(var k in defs){\r\nthis.st.filters[k]=defs[k];\r\nvar el=this.el(ids[k]);if(el)el.value=defs[k];\r\nvar lbl=this.el(lblIds[k]);if(lbl)lbl.textContent=defs[k]+units[k];\r\n}\r\nthis.el('val-sharpen').value=0;this.el('lbl-sharpen').textContent='0%';\r\nthis.el('val-vignette').value=0;this.el('lbl-vignette').textContent='0%';\r\nthis.st.rotation=0;this.st.flipH=1;this.st.flipV=1;\r\n},\r\n\r\nloadFile:function(file,isBulk){\r\nvar self=this;\r\nif(!file||!file.type.match(\/image.*\/)){self.showToast('Upload a valid image file.','err');return;}\r\nif(!isBulk){\r\nself.bulkFiles=[];\r\nself.el('pais-single-actions').style.display='flex';\r\nself.el('pais-bulk-process').style.display='none';\r\nself.el('pais-bulk-list').innerHTML='<div class=\"pais-empty\">No bulk files loaded.<\/div>';\r\nself.el('stat-bulk').textContent='0 files';\r\n}\r\nself.fileName=file.name.replace(\/\\.[^.]+$\/,'');\r\nself.origKB=Math.round(file.size\/1024);\r\nvar sEl=self.el('stat-orig-size');\r\nif(sEl)sEl.textContent=self.origKB<1024?self.origKB+' KB':(self.origKB\/1024).toFixed(2)+' MB';\r\nself.origSrc=URL.createObjectURL(file);\r\nself.resetWorkingImage();\r\n},\r\n\r\nloadBulk:function(files){\r\nvar self=this,valid=[],i;\r\nfor(i=0;i<files.length;i++){if(files[i].type.match(\/image.*\/))valid.push(files[i]);}\r\nif(!valid.length){self.showToast('No valid images found.','err');return;}\r\nself.bulkFiles=valid;self.el('stat-bulk').textContent=valid.length+' files';\r\nself.loadFile(valid[0],true);\r\nself.el('pais-single-actions').style.display='none';self.el('pais-bulk-process').style.display='flex';\r\nvar html='';\r\nfor(i=0;i<valid.length;i++)html+='<div class=\"pais-bulk-row\"><span>'+valid[i].name+'<\/span><span>'+Math.round(valid[i].size\/1024)+' KB<\/span><\/div>';\r\nself.el('pais-bulk-list').innerHTML=html;\r\nself.switchTab('bulk');self.showToast(valid.length+' images loaded for bulk.','ok');\r\n},\r\n\r\nloadSampleImage:function(){\r\nvar self=this;\r\nvar img=new Image();img.crossOrigin='anonymous';\r\nimg.onload=function(){\r\nvar cv=document.createElement('canvas');cv.width=img.naturalWidth;cv.height=img.naturalHeight;\r\ncv.getContext('2d').drawImage(img,0,0);\r\ncv.toBlob(function(blob){\r\nself.fileName='bgsample';self.origKB=Math.round(blob.size\/1024);\r\nvar sEl=self.el('stat-orig-size');if(sEl)sEl.textContent=self.origKB+' KB';\r\nself.origSrc=URL.createObjectURL(blob);self.resetWorkingImage();\r\n},'image\/jpeg',0.92);\r\n};\r\nimg.onerror=function(){self.showToast('Sample load failed. Upload your own image.','err');};\r\nimg.src='https:\/\/schoolict.net\/tools\/sampledata\/bgsample.jpg';\r\nself.showToast('Loading sample image...','info');\r\n},\r\n\r\nresetWorkingImage:function(){\r\nvar self=this;var img=new Image();\r\nimg.onload=function(){\r\nself.workingImg=img;self.baseW=img.naturalWidth;self.baseH=img.naturalHeight;self.baseRatio=self.baseW\/self.baseH;\r\nvar dEl=self.el('stat-orig-dim');if(dEl)dEl.textContent=self.baseW+' x '+self.baseH+' px';\r\nself.el('pais-w').value=self.baseW;self.el('pais-h').value=self.baseH;\r\nself.el('pais-scale').value=100;self.el('lbl-scale').textContent='100%';\r\nself.el('val-bw').value=0;self.el('lbl-bw').textContent='0px';\r\nself.el('val-br').value=0;self.el('lbl-br').textContent='0%';\r\nself.el('pais-live-img').src=img.src;\r\nself.el('pais-dropzone').style.display='none';\r\nself.el('pais-load-sample').style.display='none';\r\nself.el('pais-workspace').style.display='block';\r\nself.el('pais-btn-startover').style.display='inline-flex';\r\nself.el('pais-btn-replace').style.display='inline-flex';\r\nself.el('pais-btn-undo').style.display='inline-flex';\r\nself.el('pais-result').style.display='none';\r\nself.exitCropMode();self.updateLivePreview();self.switchTab('export');self.showToast('Image loaded!','ok');\r\n};\r\nimg.onerror=function(){self.showToast('Failed to load image.','err');};\r\nimg.src=self.origSrc;\r\n},\r\n\r\nstartOver:function(){\r\nvar self=this;\r\nif(!confirm('Start Over? Edits will be cleared.'))return;\r\nself.el('pais-workspace').style.display='none';\r\nself.el('pais-dropzone').style.display='block';\r\nself.el('pais-load-sample').style.display='block';\r\nself.el('pais-btn-startover').style.display='none';\r\nself.el('pais-btn-replace').style.display='none';\r\nself.el('pais-btn-undo').style.display='none';\r\nself.el('pais-live-img').src='';\r\nself.bulkFiles=[];self.workingImg=null;\r\nself.el('stat-orig-size').textContent='--';self.el('stat-orig-dim').textContent='--';\r\nself.el('stat-bulk').textContent='0 files';self.resetFilters();\r\nself.showToast('Ready for a new image.','info');\r\n},\r\n\r\nenterCropMode:function(){\r\nvar self=this;if(!self.workingImg)return;\r\nvar cc=self.el('pais-crop-canvas'),pw=self.el('pais-preview-wrap');\r\nvar maxW=pw.clientWidth-24,ratio=self.workingImg.naturalWidth\/self.workingImg.naturalHeight;\r\nvar cw=Math.min(maxW,self.workingImg.naturalWidth),ch=Math.round(cw\/ratio);\r\nif(ch>460){ch=460;cw=Math.round(ch*ratio);}\r\ncc.width=cw;cc.height=ch;\r\nself.cropSt.scX=self.workingImg.naturalWidth\/cw;self.cropSt.scY=self.workingImg.naturalHeight\/ch;\r\nself.cropSt.active=true;self.cropSt.hasSel=false;self.cropSt.drawing=false;\r\nself.cropSt.sx=0;self.cropSt.sy=0;self.cropSt.ex=0;self.cropSt.ey=0;\r\nself.drawCropOverlay();\r\npw.style.display='none';self.el('pais-crop-wrap').style.display='block';\r\nself.el('pais-crop-init').style.display='none';self.el('pais-crop-active').style.display='block';\r\nself.showToast('Drag on image to select crop area','info');\r\n},\r\n\r\ndrawCropOverlay:function(){\r\nvar self=this;var cc=self.el('pais-crop-canvas');if(!cc)return;\r\nvar ctx=cc.getContext('2d');\r\nctx.clearRect(0,0,cc.width,cc.height);ctx.drawImage(self.workingImg,0,0,cc.width,cc.height);\r\nif(self.cropSt.hasSel||self.cropSt.drawing){\r\nvar x=Math.min(self.cropSt.sx,self.cropSt.ex),y=Math.min(self.cropSt.sy,self.cropSt.ey);\r\nvar w=Math.abs(self.cropSt.ex-self.cropSt.sx),h=Math.abs(self.cropSt.ey-self.cropSt.sy);\r\nif(w>4&&h>4){\r\nctx.fillStyle='rgba(0,0,0,0.5)';ctx.fillRect(0,0,cc.width,cc.height);\r\nctx.clearRect(x,y,w,h);\r\nctx.drawImage(self.workingImg,x*self.cropSt.scX,y*self.cropSt.scY,w*self.cropSt.scX,h*self.cropSt.scY,x,y,w,h);\r\nctx.strokeStyle='#2563eb';ctx.lineWidth=2;ctx.setLineDash([5,3]);ctx.strokeRect(x,y,w,h);ctx.setLineDash([]);\r\nctx.fillStyle='#2563eb';var hs=8;var corners=[[x,y],[x+w,y],[x,y+h],[x+w,y+h]];\r\nfor(var i=0;i<corners.length;i++)ctx.fillRect(corners[i][0]-hs\/2,corners[i][1]-hs\/2,hs,hs);\r\n}}\r\n},\r\n\r\nexitCropMode:function(){\r\nvar self=this;self.cropSt.active=false;self.cropSt.hasSel=false;self.cropSt.drawing=false;\r\nvar pw=self.el('pais-preview-wrap'),cw=self.el('pais-crop-wrap');\r\nif(pw)pw.style.display='flex';if(cw)cw.style.display='none';\r\nvar ci=self.el('pais-crop-init'),ca=self.el('pais-crop-active');\r\nif(ci)ci.style.display='block';if(ca)ca.style.display='none';\r\n},\r\n\r\napplyCrop:function(){\r\nvar self=this;var cs=self.cropSt;\r\nif(!cs.hasSel&&!cs.drawing){self.showToast('Drag to select crop area first.','err');return;}\r\nvar x=Math.round(Math.min(cs.sx,cs.ex)*cs.scX),y=Math.round(Math.min(cs.sy,cs.ey)*cs.scY);\r\nvar w=Math.round(Math.abs(cs.ex-cs.sx)*cs.scX),h=Math.round(Math.abs(cs.ey-cs.sy)*cs.scY);\r\nif(w<4||h<4){self.showToast('Selection too small.','err');return;}\r\nvar tmpC=document.createElement('canvas');tmpC.width=w;tmpC.height=h;\r\ntmpC.getContext('2d').drawImage(self.workingImg,x,y,w,h,0,0,w,h);\r\nvar newSrc=tmpC.toDataURL('image\/png');var newImg=new Image();\r\nnewImg.onload=function(){\r\nself.workingImg=newImg;self.origSrc=newSrc;\r\nself.baseW=w;self.baseH=h;self.baseRatio=w\/h;\r\nself.el('pais-w').value=w;self.el('pais-h').value=h;\r\nself.el('stat-orig-dim').textContent=w+' x '+h+' px';\r\nself.el('pais-live-img').src=newSrc;\r\nself.exitCropMode();self.updateLivePreview();self.showToast('Crop applied!','ok');\r\n};\r\nnewImg.src=newSrc;\r\n},\r\n\r\nrenderToCanvas:function(srcImg,targetW,targetH){\r\nvar self=this;\r\nvar canvas=self.el('pais-canvas');var ctx=canvas.getContext('2d');\r\nvar bw=parseInt(self.el('val-bw').value)||0;\r\nvar bc=self.el('val-bc').value;var br=parseInt(self.el('val-br').value)||0;\r\nvar isSwapped=(Math.abs(self.st.rotation)%180===90);\r\nvar iW=isSwapped?targetH:targetW,iH=isSwapped?targetW:targetH;\r\nvar fW=iW+(bw*2),fH=iH+(bw*2);\r\ncanvas.width=fW;canvas.height=fH;\r\nif(!CanvasRenderingContext2D.prototype.roundRect){\r\nCanvasRenderingContext2D.prototype.roundRect=function(x,y,w,h,r){\r\nif(w<2*r)r=w\/2;if(h<2*r)r=h\/2;this.beginPath();this.moveTo(x+r,y);\r\nthis.arcTo(x+w,y,x+w,y+h,r);this.arcTo(x+w,y+h,x,y+h,r);\r\nthis.arcTo(x,y+h,x,y,r);this.arcTo(x,y,x+r,y,r);this.closePath();return this;};\r\n}\r\nif(bw>0){\r\nctx.fillStyle=bc;\r\nif(br>0){ctx.beginPath();ctx.roundRect(0,0,fW,fH,(br\/100)*Math.min(fW,fH));ctx.fill();}\r\nelse ctx.fillRect(0,0,fW,fH);\r\n}\r\nctx.save();\r\nif(br>0){ctx.beginPath();var iR=Math.max(0,(br\/100)*Math.min(fW,fH)-bw);ctx.roundRect(bw,bw,iW,iH,iR);ctx.clip();}\r\nctx.translate(bw+iW\/2,bw+iH\/2);ctx.rotate(self.st.rotation*Math.PI\/180);ctx.scale(self.st.flipH,self.st.flipV);\r\nctx.filter=self.getFilterStr();ctx.drawImage(srcImg,-targetW\/2,-targetH\/2,targetW,targetH);ctx.restore();\r\nvar sh=parseInt(self.el('val-sharpen').value)||0;\r\nif(sh>0){ctx.save();ctx.globalAlpha=sh*0.005;ctx.globalCompositeOperation='overlay';ctx.drawImage(canvas,1,1);ctx.globalAlpha=1;ctx.globalCompositeOperation='source-over';ctx.restore();}\r\nvar vig=parseInt(self.el('val-vignette').value)||0;\r\nif(vig>0){var gr=ctx.createRadialGradient(fW\/2,fH\/2,Math.min(fW,fH)*0.3,fW\/2,fH\/2,Math.max(fW,fH)*0.8);gr.addColorStop(0,'rgba(0,0,0,0)');gr.addColorStop(1,'rgba(0,0,0,'+vig\/100+')');ctx.fillStyle=gr;ctx.fillRect(0,0,fW,fH);}\r\nvar wt=self.el('val-wm-text').value;\r\nif(wt){\r\nctx.save();var wmSz=parseInt(self.el('val-wm-size').value)||36;\r\nctx.font='700 '+wmSz+'px Inter,system-ui,sans-serif';ctx.fillStyle=self.el('val-wm-color').value;\r\nctx.globalAlpha=self.el('val-wm-op').value\/100;ctx.shadowColor='rgba(0,0,0,0.7)';ctx.shadowBlur=5;\r\nvar pos=self.el('val-wm-pos').value;var pad=wmSz+bw;var tx,ty;\r\nif(pos==='center'){ctx.textAlign='center';ctx.textBaseline='middle';tx=fW\/2;ty=fH\/2;}\r\nelse if(pos==='top-left'){ctx.textAlign='left';ctx.textBaseline='top';tx=pad;ty=pad;}\r\nelse if(pos==='top-center'){ctx.textAlign='center';ctx.textBaseline='top';tx=fW\/2;ty=pad;}\r\nelse if(pos==='top-right'){ctx.textAlign='right';ctx.textBaseline='top';tx=fW-pad;ty=pad;}\r\nelse if(pos==='bottom-left'){ctx.textAlign='left';ctx.textBaseline='bottom';tx=pad;ty=fH-pad;}\r\nelse if(pos==='bottom-center'){ctx.textAlign='center';ctx.textBaseline='bottom';tx=fW\/2;ty=fH-pad;}\r\nelse{ctx.textAlign='right';ctx.textBaseline='bottom';tx=fW-pad;ty=fH-pad;}\r\nctx.fillText(wt,tx,ty);ctx.restore();\r\n}\r\nvar fmt=self.el('pais-fmt').value;var q=self.el('pais-quality').value\/100;\r\nreturn canvas.toDataURL('image\/'+fmt,fmt==='png'?undefined:q);\r\n},\r\n\r\nprocessSingle:function(){\r\nvar self=this;var btn=self.el('pais-btn-process');btn.textContent='Processing...';btn.disabled=true;\r\nsetTimeout(function(){\r\nvar w=parseInt(self.el('pais-w').value)||self.baseW,h=parseInt(self.el('pais-h').value)||self.baseH;\r\nvar fmt=self.el('pais-fmt').value,ext=fmt==='jpeg'?'jpg':fmt;\r\nvar dataUrl=self.renderToCanvas(self.workingImg,w,h);\r\nself.el('pais-result-thumb').src=dataUrl;\r\nself.el('pais-dl-link').href=dataUrl;\r\nself.el('pais-dl-link').download=self.fileName+'_pth.'+ext;\r\nself.el('pais-result-msg').textContent='Ready! '+w+' x '+h+' px as '+fmt.toUpperCase()+'.';\r\nself.el('pais-result').style.display='block';\r\nself.el('pais-result').scrollIntoView({behavior:'smooth',block:'nearest'});\r\nbtn.textContent='Apply & Export Image';btn.disabled=false;self.showToast('Export ready!','ok');\r\n},40);\r\n},\r\n\r\nwebOptimize:function(){\r\nvar self=this;\r\nself.el('pais-fmt').value='webp';self.el('pais-quality').value=85;self.el('lbl-quality').textContent='85%';\r\nself.el('pais-quality-wrap').style.display='block';\r\nif(self.baseW>1200){\r\nself.el('pais-w').value=1200;\r\nif(self.lockRatio)self.el('pais-h').value=Math.round(1200\/self.baseRatio);\r\nvar sc=Math.round(1200\/self.baseW*100);self.el('pais-scale').value=sc;self.el('lbl-scale').textContent=sc+'%';\r\n}\r\nself.updateLivePreview();self.processSingle();\r\n},\r\n\r\nprocessBulk:function(){\r\nvar self=this;if(!self.bulkFiles.length){self.showToast('No bulk files loaded.','err');return;}\r\nvar btn=self.el('pais-bulk-process');btn.textContent='Processing...';btn.disabled=true;\r\nvar w=parseInt(self.el('pais-w').value)||self.baseW,h=parseInt(self.el('pais-h').value)||self.baseH;\r\nvar fmt=self.el('pais-fmt').value,ext=fmt==='jpeg'?'jpg':fmt;\r\nvar entries=[],total=self.bulkFiles.length;\r\nfunction processNext(idx){\r\nif(idx>=total){\r\nvar zipData=buildZip(entries);var blob=new Blob([zipData],{type:'application\/zip'});\r\nvar url=URL.createObjectURL(blob);var a=document.createElement('a');\r\na.href=url;a.download='PrimeToolHub_Bulk_'+Date.now()+'.zip';\r\ndocument.body.appendChild(a);a.click();document.body.removeChild(a);\r\nsetTimeout(function(){URL.revokeObjectURL(url);},2000);\r\nbtn.textContent='Process All & Download ZIP';btn.disabled=false;\r\nself.showToast(total+' images exported!','ok');return;\r\n}\r\nvar file=self.bulkFiles[idx],ou=URL.createObjectURL(file),img=new Image();\r\nimg.onload=function(){\r\nvar du=self.renderToCanvas(img,w,h);var u8=dataURLtoU8(du);\r\nentries.push({name:file.name.replace(\/\\.[^.]+$\/,'')+'_pth.'+ext,data:u8});\r\nURL.revokeObjectURL(ou);processNext(idx+1);\r\n};\r\nimg.onerror=function(){URL.revokeObjectURL(ou);processNext(idx+1);};\r\nimg.src=ou;\r\n}\r\nprocessNext(0);\r\n},\r\n\r\napplyChroma:function(){\r\nvar self=this;if(!self.workingImg){self.showToast('Load an image first.','err');return;}\r\nvar btn=self.el('pais-apply-chroma');btn.textContent='Processing...';btn.disabled=true;\r\nsetTimeout(function(){\r\nvar cv=document.createElement('canvas');cv.width=self.workingImg.naturalWidth;cv.height=self.workingImg.naturalHeight;\r\nvar ctx=cv.getContext('2d');ctx.drawImage(self.workingImg,0,0);\r\nvar imgD=ctx.getImageData(0,0,cv.width,cv.height),d=imgD.data;\r\nvar hex=self.el('val-chroma-color').value;\r\nvar rk=parseInt(hex.substr(1,2),16),gk=parseInt(hex.substr(3,2),16),bk=parseInt(hex.substr(5,2),16);\r\nvar tol=parseInt(self.el('val-chroma-tol').value)||30;\r\nfor(var i=0;i<d.length;i+=4){var dr=d[i]-rk,dg=d[i+1]-gk,db=d[i+2]-bk;if(Math.sqrt(dr*dr+dg*dg+db*db)<tol)d[i+3]=0;}\r\nctx.putImageData(imgD,0,0);\r\nvar ns=cv.toDataURL('image\/png');var ni=new Image();\r\nni.onload=function(){\r\nself.workingImg=ni;self.origSrc=ns;self.el('pais-live-img').src=ns;\r\nself.el('pais-fmt').value='png';self.el('pais-quality-wrap').style.display='none';\r\nbtn.textContent='Apply Chroma Key Removal';btn.disabled=false;\r\nself.updateLivePreview();self.showToast('Background removed! Format set to PNG.','ok');\r\n};ni.src=ns;\r\n},40);\r\n},\r\n\r\nbuildSocialGrid:function(){\r\nvar self=this;var grid=self.el('pais-social-grid');if(!grid)return;\r\nvar ICONS=['camera','phone','bird','bird','group','group','play','play','briefcase','briefcase','chat','pin'];\r\nvar html='';\r\nvar platformColors={'Instagram':'#e1306c','Twitter \/ X':'#1da1f2','Facebook':'#1877f2','YouTube':'#ff0000','LinkedIn':'#0a66c2','WhatsApp':'#25d366','Pinterest':'#e60023'};\r\nfor(var i=0;i<SOCIAL_PRESETS.length;i++){\r\nvar p=SOCIAL_PRESETS[i];\r\nvar color=platformColors[p.platform]||'#2563eb';\r\nhtml+='<div class=\"pais-social-card\" data-w=\"'+p.w+'\" data-h=\"'+p.h+'\" data-fmt=\"'+p.fmt+'\" style=\"border-top:3px solid '+color+';\">';\r\nhtml+='<div class=\"pais-social-name\" style=\"color:'+color+';\">'+p.platform+'<\/div>';\r\nhtml+='<div style=\"font-size:.78rem;color:#334155;margin-bottom:6px;\">'+p.name+'<\/div>';\r\nhtml+='<div class=\"pais-social-dim\">'+p.w+' x '+p.h+'<\/div>';\r\nhtml+='<\/div>';\r\n}\r\ngrid.innerHTML=html;\r\nvar cards=grid.querySelectorAll('.pais-social-card');\r\nfor(var j=0;j<cards.length;j++){\r\ncards[j].addEventListener('click',function(){\r\nvar w=parseInt(this.getAttribute('data-w')),h=parseInt(this.getAttribute('data-h')),fmt=this.getAttribute('data-fmt');\r\nself.el('pais-w').value=w;self.el('pais-h').value=h;self.el('pais-fmt').value=fmt;\r\nself.el('pais-quality-wrap').style.display=fmt==='png'?'none':'block';\r\nself.updateLivePreview();self.switchTab('export');self.showToast('Preset: '+w+'x'+h+'px','ok');\r\n});\r\n}\r\n},\r\n\r\nbindEvents:function(){\r\nvar self=this;\r\nvar wrap=self.el('pth-ais5-wrapper');\r\nif(!wrap||wrap.getAttribute('data-bound')==='1')return;\r\nwrap.setAttribute('data-bound','1');\r\nvar i,tabs=wrap.querySelectorAll('.pais-tab');\r\nfor(i=0;i<tabs.length;i++)tabs[i].addEventListener('click',function(){self.switchTab(this.getAttribute('data-tab'));});\r\nvar dz=self.el('pais-dropzone');\r\ndz.addEventListener('dragover',function(e){e.preventDefault();dz.style.background='#dbeafe';});\r\ndz.addEventListener('dragleave',function(){dz.style.background='';});\r\ndz.addEventListener('drop',function(e){e.preventDefault();dz.style.background='';var fs=e.dataTransfer.files;if(fs.length>1)self.loadBulk(fs);else if(fs.length===1)self.loadFile(fs[0],false);});\r\nfunction onFC(e){var fs=e.target.files;if(!fs||!fs.length)return;if(fs.length>1)self.loadBulk(fs);else self.loadFile(fs[0],false);e.target.value='';}\r\nself.el('pais-file-input').addEventListener('change',onFC);\r\nself.el('pais-file-replace').addEventListener('change',onFC);\r\nself.el('pais-load-sample').addEventListener('click',function(){self.loadSampleImage();});\r\nself.el('pais-btn-startover').addEventListener('click',function(){self.startOver();});\r\nself.el('pais-btn-undo').addEventListener('click',function(){self.resetFilters();self.updateLivePreview();self.showToast('Filters reset.','info');});\r\nself.el('pais-btn-fw').addEventListener('click',function(){var g=self.el('pais-grid');g.classList.toggle('pais-fw');this.textContent=g.classList.contains('pais-fw')?'Restore Sidebar':'Full Width';});\r\nself.el('pais-btn-process').addEventListener('click',function(){self.processSingle();});\r\nself.el('pais-btn-weboptimize').addEventListener('click',function(){self.webOptimize();});\r\nself.el('pais-bulk-process').addEventListener('click',function(){self.processBulk();});\r\nself.el('pais-apply-chroma').addEventListener('click',function(){self.applyChroma();});\r\nself.el('pais-enter-crop').addEventListener('click',function(){self.enterCropMode();});\r\nself.el('pais-crop-cancel').addEventListener('click',function(){self.exitCropMode();});\r\nself.el('pais-crop-apply').addEventListener('click',function(){self.applyCrop();});\r\nself.el('pais-rot-l').addEventListener('click',function(){self.st.rotation-=90;self.updateLivePreview();});\r\nself.el('pais-rot-r').addEventListener('click',function(){self.st.rotation+=90;self.updateLivePreview();});\r\nself.el('pais-flip-h').addEventListener('click',function(){self.st.flipH*=-1;self.updateLivePreview();});\r\nself.el('pais-flip-v').addEventListener('click',function(){self.st.flipV*=-1;self.updateLivePreview();});\r\nvar ratioPresets=wrap.querySelectorAll('.pais-quick-btn[data-ratio]');\r\nfor(i=0;i<ratioPresets.length;i++){\r\nratioPresets[i].addEventListener('click',function(){\r\nvar v=this.getAttribute('data-ratio');self.cropSt.ratio=v==='free'?null:parseFloat(v);\r\nvar all=wrap.querySelectorAll('.pais-quick-btn[data-ratio]');for(var k=0;k<all.length;k++)all[k].classList.remove('pais-sel');this.classList.add('pais-sel');\r\n});\r\n}\r\nvar cc=self.el('pais-crop-canvas');\r\ncc.addEventListener('mousedown',function(e){if(!self.cropSt.active)return;var r=cc.getBoundingClientRect();self.cropSt.sx=e.clientX-r.left;self.cropSt.sy=e.clientY-r.top;self.cropSt.ex=self.cropSt.sx;self.cropSt.ey=self.cropSt.sy;self.cropSt.drawing=true;self.cropSt.hasSel=false;});\r\ncc.addEventListener('mousemove',function(e){if(!self.cropSt.drawing)return;var r=cc.getBoundingClientRect();var nx=Math.max(0,Math.min(e.clientX-r.left,cc.width)),ny=Math.max(0,Math.min(e.clientY-r.top,cc.height));if(self.cropSt.ratio){var dw=nx-self.cropSt.sx,dh=Math.abs(dw)\/self.cropSt.ratio;self.cropSt.ex=self.cropSt.sx+dw;self.cropSt.ey=self.cropSt.sy+(ny>=self.cropSt.sy?dh:-dh);}else{self.cropSt.ex=nx;self.cropSt.ey=ny;}self.drawCropOverlay();});\r\ncc.addEventListener('mouseup',function(){if(!self.cropSt.drawing)return;self.cropSt.drawing=false;self.cropSt.hasSel=true;self.drawCropOverlay();});\r\ncc.addEventListener('mouseleave',function(){if(self.cropSt.drawing){self.cropSt.drawing=false;self.cropSt.hasSel=true;}});\r\nvar fInputs=wrap.querySelectorAll('input[data-filter]');\r\nvar fIds={'brightness':'val-bright','contrast':'val-contrast','saturate':'val-sat','hue-rotate':'val-hue','blur':'val-blur','grayscale':'val-gray','sepia':'val-sepia','invert':'val-invert'};\r\nvar fLbls={'brightness':'lbl-bright','contrast':'lbl-contrast','saturate':'lbl-sat','hue-rotate':'lbl-hue','blur':'lbl-blur','grayscale':'lbl-gray','sepia':'lbl-sepia','invert':'lbl-invert'};\r\nfor(i=0;i<fInputs.length;i++){fInputs[i].addEventListener('input',function(){var fn=this.getAttribute('data-filter'),un=this.getAttribute('data-unit');self.st.filters[fn]=parseFloat(this.value);var lEl=self.el(fLbls[fn]);if(lEl)lEl.textContent=this.value+un;self.updateLivePreview();});}\r\nself.el('val-sharpen').addEventListener('input',function(){self.el('lbl-sharpen').textContent=this.value+'%';self.updateLivePreview();});\r\nself.el('val-vignette').addEventListener('input',function(){self.el('lbl-vignette').textContent=this.value+'%';self.updateLivePreview();});\r\nself.el('val-bw').addEventListener('input',function(){self.el('lbl-bw').textContent=this.value+'px';self.updateLivePreview();});\r\nself.el('val-br').addEventListener('input',function(){self.el('lbl-br').textContent=this.value+'%';self.updateLivePreview();});\r\nself.el('val-bc').addEventListener('input',function(){self.updateLivePreview();});\r\nself.el('val-wm-text').addEventListener('input',function(){self.updateLivePreview();});\r\nself.el('val-wm-color').addEventListener('input',function(){self.updateLivePreview();});\r\nself.el('val-wm-pos').addEventListener('change',function(){self.updateLivePreview();});\r\nself.el('val-wm-op').addEventListener('input',function(){self.el('lbl-wm-op').textContent=this.value+'%';self.updateLivePreview();});\r\nself.el('val-wm-size').addEventListener('input',function(){self.el('lbl-wm-size').textContent=this.value+'px';self.updateLivePreview();});\r\nself.el('val-chroma-tol').addEventListener('input',function(){self.el('lbl-chroma-tol').textContent=this.value;});\r\nvar inW=self.el('pais-w'),inH=self.el('pais-h'),lockBtn=self.el('pais-lock');\r\nlockBtn.addEventListener('click',function(){self.lockRatio=!self.lockRatio;this.textContent=self.lockRatio?'\\uD83D\\uDD12':'\\uD83D\\uDD13';this.title=self.lockRatio?'Aspect ratio locked':'Aspect ratio unlocked';});\r\ninW.addEventListener('input',function(){if(self.lockRatio&&self.baseRatio)inH.value=Math.round(parseInt(this.value)\/self.baseRatio);var sc=Math.min(200,Math.max(10,Math.round(parseInt(this.value)\/self.baseW*100)));self.el('pais-scale').value=sc;self.el('lbl-scale').textContent=sc+'%';self.updateLivePreview();});\r\ninH.addEventListener('input',function(){if(self.lockRatio&&self.baseRatio)inW.value=Math.round(parseInt(this.value)*self.baseRatio);var sc=Math.min(200,Math.max(10,Math.round(parseInt(inW.value)\/self.baseW*100)));self.el('pais-scale').value=sc;self.el('lbl-scale').textContent=sc+'%';self.updateLivePreview();});\r\nself.el('pais-scale').addEventListener('input',function(){self.el('lbl-scale').textContent=this.value+'%';var m=this.value\/100;inW.value=Math.round(self.baseW*m);inH.value=Math.round(self.baseH*m);self.updateLivePreview();});\r\nself.el('pais-fmt').addEventListener('change',function(){self.el('pais-quality-wrap').style.display=this.value==='png'?'none':'block';self.updateLivePreview();});\r\nself.el('pais-quality').addEventListener('input',function(){self.el('lbl-quality').textContent=this.value+'%';self.estimateQC();});\r\n},\r\n\r\ninit:function(){this.bindEvents();this.buildSocialGrid();}\r\n};\r\n\r\nfunction pthAIS5Init(){if(!window.pthAIS5.initialized&&document.getElementById('pth-ais5-wrapper')){window.pthAIS5.initialized=true;window.pthAIS5.init();}}\r\npthAIS5Init();\r\nif(document.readyState==='loading'){document.addEventListener('DOMContentLoaded',pthAIS5Init);}\r\nwindow.addEventListener('load',function(){setTimeout(pthAIS5Init,50);});\r\nif(!window.pthAIS5.initialized&&typeof MutationObserver!=='undefined'){\r\nvar pthAIS5Obs=new MutationObserver(function(){if(document.getElementById('pth-ais5-wrapper')){pthAIS5Obs.disconnect();pthAIS5Init();}});\r\npthAIS5Obs.observe(document.body||document.documentElement,{childList:true,subtree:true});\r\nsetTimeout(function(){pthAIS5Obs.disconnect();},10000);\r\n}\r\n\r\n})();\r\n<\/script>\n\n\n\n\n<style>\n.pth-feature-wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin-bottom:40px}\n.pth-feat-box{border:1px solid #e2e8f0;background:#fff;padding:24px;border-radius:12px;box-shadow:0 4px 6px -1px rgba(0,0,0,0.02);transition:all .3s ease}\n.pth-feat-box:hover{border-color:#bfdbfe;transform:translateY(-3px);box-shadow:0 10px 15px -3px rgba(0,0,0,0.05)}\n.pth-feat-title{font-size:1.05rem;font-weight:800;color:#0f172a;margin:0 0 10px;display:flex;align-items:center;gap:10px}\n.pth-feat-text{font-size:.9rem;color:#1e293b;line-height:1.6;margin:0;font-weight:500}\n.pth-steps-wrap{border:1px solid #e2e8f0;background:#fff;padding:40px 30px;border-radius:16px;text-align:center;box-shadow:0 4px 6px -1px rgba(0,0,0,0.02);margin-bottom:40px;width:100%;box-sizing:border-box}\n.pth-steps-title{font-size:1.2rem;font-weight:800;color:#0f172a;text-transform:uppercase;margin:0 0 35px;letter-spacing:1px}\n.pth-steps-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:30px}\n.pth-step-item{display:flex;flex-direction:column;align-items:center}\n.pth-step-num{width:45px;height:45px;background:#2563eb;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.2rem;margin-bottom:15px;box-shadow:0 4px 10px rgba(37,99,235,.3)}\n.pth-step-name{font-weight:800;color:#0f172a;margin:0 0 8px;font-size:1rem}\n.pth-step-desc{font-size:.9rem;color:#1e293b;line-height:1.5;margin:0;font-weight:500}\n<\/style>\n<div class=\"pth-feature-wrap\">\n  <div class=\"pth-feat-box\">\n    <p class=\"pth-feat-title\"><span aria-hidden=\"true\">\ud83d\udfe2<\/span> Live Preview Before You Commit<\/p>\n    <p class=\"pth-feat-text\">Every slider \u2014 brightness, contrast, blur, vignette, border, text overlay \u2014 updates the preview instantly. The QC panel on the right shows the estimated output file size and a web-readiness score as you type, so you know whether a 2 MB photo will land under 500 KB <em>before<\/em> you export it, not after.<\/p>\n  <\/div>\n  <div class=\"pth-feat-box\">\n    <p class=\"pth-feat-title\"><span aria-hidden=\"true\">\ud83d\udd35<\/span> 12 Social Media Size Presets<\/p>\n    <p class=\"pth-feat-text\">One click fills in the exact pixel dimensions for Instagram posts and stories, YouTube thumbnails and channel art, Facebook covers, LinkedIn banners, X headers, WhatsApp DPs, and Pinterest pins. No more guessing whether a YouTube thumbnail is 1280\u00d7720 or 1920\u00d71080, or hunting for a size chart in another tab.<\/p>\n  <\/div>\n  <div class=\"pth-feat-box\">\n    <p class=\"pth-feat-title\"><span aria-hidden=\"true\">\ud83d\udfe3<\/span> Bulk ZIP Export, Zero Libraries<\/p>\n    <p class=\"pth-feat-text\">Drop in 30 photos, set your export rules once, and download every processed file as a single ZIP. The ZIP is assembled byte-by-byte in your browser using a built-in encoder \u2014 no JSZip, no CropperJS, no CDN calls. Once the page loads, the tool keeps working even if your connection drops.<\/p>\n  <\/div>\n<\/div>\n \n<div class=\"pth-steps-wrap\">\n  <p class=\"pth-steps-title\">How to Use Advanced Image Studio Pro<\/p>\n  <div class=\"pth-steps-grid\">\n    <div class=\"pth-step-item\">\n      <div class=\"pth-step-num\" aria-hidden=\"true\">1<\/div>\n      <p class=\"pth-step-name\">Load Your Image<\/p>\n      <p class=\"pth-step-desc\">Drag an image onto the drop zone, click to browse, or hit Load Sample Image to try the tool immediately. Select multiple files at once to switch straight into Bulk mode.<\/p>\n    <\/div>\n    <div class=\"pth-step-item\">\n      <div class=\"pth-step-num\" aria-hidden=\"true\">2<\/div>\n      <p class=\"pth-step-name\">Set Size and Format<\/p>\n      <p class=\"pth-step-desc\">In Export &amp; QC, type exact pixel dimensions (the lock keeps the aspect ratio), or open Social Presets and click a platform. Pick WebP, JPEG, or PNG and set the quality slider.<\/p>\n    <\/div>\n    <div class=\"pth-step-item\">\n      <div class=\"pth-step-num\" aria-hidden=\"true\">3<\/div>\n      <p class=\"pth-step-name\">Edit and Refine<\/p>\n      <p class=\"pth-step-desc\">Crop by dragging a box on the canvas, rotate or flip, adjust colour, add a border or text overlay, or knock out a flat background in Chroma Key. The preview follows every change.<\/p>\n    <\/div>\n    <div class=\"pth-step-item\">\n      <div class=\"pth-step-num\" aria-hidden=\"true\">4<\/div>\n      <p class=\"pth-step-name\">Export<\/p>\n      <p class=\"pth-step-desc\">Click Apply &amp; Export for a single image, or Process All &amp; Download ZIP for a batch. Use 1-Click Web Optimize to jump straight to WebP at 85% quality capped at 1200px wide.<\/p>\n    <\/div>\n  <\/div>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Last updated: July 2026<\/p>\n\n\n\n<h2 id=\"\ud83d\udd34-web-p-jpeg-or-png-pick-once-save-megabytes\" class=\"wp-block-heading\">\ud83d\udd34&nbsp;<strong>WebP, JPEG or PNG? Pick Once, Save Megabytes<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The format dropdown is the single biggest lever on your final file size, and most people leave it on the wrong setting. Here is the decision in plain terms.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Choose WebP<\/strong>&nbsp;for anything going on a website. At the same visual quality, WebP files typically land 25\u201335% smaller than JPEG. A 1.8 MB product photo that becomes a 240 KB WebP loads noticeably faster on mobile, and every modern browser has supported it for years. This is why the 1-Click Web Optimize button forces WebP at 85% quality \u2014 that combination is the sweet spot where most people cannot see the difference from the original, but the file has shrunk by roughly 80%.<\/p>\n\n\n<figure class=\"pth-article-figure pth-img-left\" style=\"float:left; width:600px; max-width:100%; margin:4px 28px 16px 0; clear:left;\"><img decoding=\"async\" src=\"https:\/\/schoolict.net\/tools\/wp-content\/uploads\/2026\/07\/Infographic_photo_frames_file_size-800x447.jpeg\" alt=\"Comparison diagram showing the same photo exported as WebP, JPEG and PNG with relative file sizes\" width=\"600\" height=\"338\" loading=\"lazy\" data-no-lazy=\"1\" class=\"pth-article-img\" style=\"width:100%;height:auto;display:block;border-radius:10px;border:1px solid #e2e8f0;\"><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Choose JPEG<\/strong>&nbsp;when something downstream refuses WebP. Older email clients, some print shops, a few marketplace upload forms, and certain legacy CMS installs still reject it. JPEG is the safe universal photo format. Note that all 12 social presets default to JPEG for exactly this reason \u2014 Instagram and LinkedIn re-encode your upload anyway, so handing them a clean JPEG avoids a double-conversion.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Choose PNG<\/strong>&nbsp;only when you need transparency or pixel-exact fidelity: logos, icons, screenshots with sharp text, or any image you just ran through Chroma Key. PNG is lossless, so it does not blur text edges \u2014 but it is also the largest of the three by a wide margin. Exporting a photograph as PNG will often produce a file&nbsp;<em>bigger<\/em>&nbsp;than the original. The quality slider disappears when you select PNG because lossless compression has no quality dial to turn.<\/p>\n\n\n\n<h2 id=\"\ud83d\udfe1-what-the-quality-slider-is-actually-doing\" class=\"wp-block-heading\">\ud83d\udfe1&nbsp;<strong>What the Quality Slider Is Actually Doing<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Quality is not a percentage of &#8220;how good the image looks.&#8221; For WebP and JPEG it controls how aggressively the encoder discards fine detail that the human eye tends not to notice \u2014 mostly subtle colour variation in smooth areas like sky, skin, and shadow.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\ud83d\udd35\u00a0<strong>90\u2013100:<\/strong>\u00a0Near-invisible loss, but file size climbs steeply. Only worth it for hero images or photography portfolios where detail genuinely matters.<\/li>\n\n\n\n<li>\ud83d\udfe0\u00a0<strong>80\u201390:<\/strong>\u00a0The practical default. At 85, most photos are indistinguishable from the original at normal viewing size while being a fraction of the weight. This is where the tool starts.<\/li>\n\n\n\n<li>\ud83d\udfe3\u00a0<strong>Below 70:<\/strong>\u00a0Blocky artefacts appear around high-contrast edges \u2014 text, logos, tree branches against sky. Fine for a thumbnail nobody zooms into; visibly bad for anything a reader will look at closely.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">The important habit: resize before you reduce quality. Dropping a 4000px-wide photo to 1200px cuts the pixel count by roughly 90% on its own \u2014 a far bigger saving than crushing quality down to 50 while keeping it oversized. Get the dimensions right first, then reach for the quality slider only if the QC panel still shows a large estimate. If you want to work out the raw uncompressed numbers behind any resolution, the&nbsp;<a href=\"https:\/\/schoolict.net\/tools\/data-capacity-calculator-image-size\/\">Data Capacity Calculator<\/a>&nbsp;does the bit-depth maths for you.<\/p>\n\n\n\n<h3 id=\"\ud83d\udfe2-reading-the-qc-panel\" class=\"wp-block-heading\">\ud83d\udfe2&nbsp;<strong>Reading the QC Panel<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The estimate in the sidebar is a projection, not a measurement \u2014 it scales the original file size by the change in pixel area and applies a per-format multiplier. It is deliberately conservative and usually lands within about 20% of the real output, which is close enough to catch a problem before you export. The web score turns green when the format is WebP, the estimate is under 500 KB, and the width is 1920px or less; those three conditions together describe an image that will not drag down a page&#8217;s load time. If the score says Poor, the fix is almost always to reduce the width, not the quality.<\/p>\n\n\n\n<h2 id=\"\ud83d\udd34-chroma-key-vs-ai-background-removal-two-different-jobs\" class=\"wp-block-heading\">\ud83d\udd34&nbsp;<strong>Chroma Key vs AI Background Removal \u2014 Two Different Jobs<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The Chroma Key tab in this tool and the AI background remover elsewhere on the site solve different problems, and using the wrong one wastes time.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Chroma Key<\/strong>&nbsp;works on colour. It walks every pixel, measures how far that pixel&#8217;s colour sits from the colour you picked, and makes it transparent if the distance falls under your tolerance. That means it is excellent \u2014 and instant \u2014 on images with a genuinely flat background: a product shot on white seamless paper, a logo on a solid field, a green-screen frame, a scanned signature. It has no idea what a &#8220;person&#8221; or a &#8220;product&#8221; is. It only knows colour distance.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The tolerance slider is the whole game. Too low and you leave a halo of near-white pixels around the subject. Too high and you start eating into the subject itself \u2014 white shirts, pale skin, and light hair are the usual casualties. Start around 30, look at the checkerboard showing through the preview, and nudge upward until the fringe disappears but the subject stays intact. The tool switches the output format to PNG automatically after a removal, because JPEG cannot store transparency and would silently fill your new transparent area with black.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>AI removal<\/strong>&nbsp;is the opposite approach: a segmentation model that recognises subjects and separates them from cluttered, real-world backgrounds where no single colour dominates. A photo of someone standing in a park will defeat Chroma Key completely and is exactly what the&nbsp;<a href=\"https:\/\/schoolict.net\/tools\/free-ai-background-remover\/\">AI Image Eraser<\/a>&nbsp;is built for. Rule of thumb: if you can name the background colour in one word, use Chroma Key here. If you cannot, use the AI tool.<\/p>\n\n\n\n<h2 id=\"\ud83d\udfe1-getting-bulk-mode-right\" class=\"wp-block-heading\">\ud83d\udfe1&nbsp;<strong>Getting Bulk Mode Right<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Bulk mode applies the&nbsp;<em>export<\/em>&nbsp;settings \u2014 dimensions, format, quality, border, and text overlay \u2014 to every file in the queue. It does not apply per-image edits: a crop you drew on the first photo will not be replayed onto the other twenty-nine, because a crop box that makes sense on one composition rarely makes sense on another.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This has a practical consequence worth knowing before you queue up fifty files. If every image in the batch is the same aspect ratio \u2014 a folder of product shots from one shoot, for example \u2014 a single set of export dimensions works cleanly. If the batch mixes portrait and landscape, forcing a single width and height on all of them will stretch some. In that situation, set the width and unlock the aspect ratio only if you truly want a uniform canvas; otherwise process the orientations as two separate batches.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The ZIP itself is built in memory using the STORED method, which means files are packaged without a second layer of compression. That is intentional and correct: JPEG, WebP, and PNG are&nbsp;<em>already<\/em>&nbsp;compressed formats, so running them through ZIP&#8217;s deflate algorithm typically saves under 2% while costing significant processing time. A STORED archive opens normally in Windows Explorer, macOS Finder, 7-Zip, and every other standard tool.<\/p>\n\n\n\n<h2 id=\"\ud83d\udfe2-borders-corners-and-text-overlays\" class=\"wp-block-heading\">\ud83d\udfe2&nbsp;<strong>Borders, Corners and Text Overlays<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">A few details in the Overlays &amp; Frame tab that are easy to miss:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\ud83d\udd35\u00a0The border is drawn\u00a0<em>outside<\/em>\u00a0your target dimensions. A 1200\u00d7800 export with a 20px border produces a 1240\u00d7840 file. The QC panel accounts for this \u2014 watch the export size update as you drag the slider.<\/li>\n\n\n\n<li>\ud83d\udfe0\u00a0Rounded corners only survive in PNG and WebP. Export a rounded image as JPEG and the corners fill with your border colour, because JPEG has no alpha channel to make them transparent.<\/li>\n\n\n\n<li>\ud83d\udfe3\u00a0Text overlay font size is in absolute pixels, measured against the\u00a0<em>export<\/em>\u00a0canvas, not the on-screen preview. A 36px label looks prominent on a 400\u00d7400 profile picture and nearly invisible on a 2560\u00d71440 channel banner \u2014 so re-check the size after switching presets.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Nothing you load here is uploaded anywhere. Every pixel operation runs in a canvas element inside your own tab, which is why the tool works on confidential product shots, client photos, or anything you would not paste into a random web uploader. For a full breakdown of how that works under the hood, read the companion guide on&nbsp;<a href=\"https:\/\/schoolict.net\/tools\/build-secure-browser-based-image-editor-article\/\">building a secure browser-based image editor<\/a>, or browse the rest of the&nbsp;<a href=\"https:\/\/schoolict.net\/tools\/free-web-tools-by-category\/\">free offline tools by category<\/a>.<\/p>\n\n\n\n\n<style>\n.pth-faq-section{margin-top:50px;margin-bottom:40px;font-family:inherit}\n.pth-faq-header{font-size:1.8rem;font-weight:800;color:#0f172a;margin-bottom:25px;border-bottom:2px solid #e2e8f0;padding-bottom:10px;display:flex;align-items:center;gap:10px}\n.pth-faq-grid{display:grid;grid-template-columns:100%;gap:20px}\n@media(min-width:768px){.pth-faq-grid{grid-template-columns:repeat(2,1fr)}}\n@media(min-width:1024px){.pth-faq-grid{grid-template-columns:repeat(3,1fr)}}\n.pth-faq-card{background:#f8fafc;padding:24px;border-radius:12px;border:1px solid #e2e8f0;transition:transform .2s ease;break-inside:avoid}\n.pth-faq-card:hover{transform:translateY(-3px);box-shadow:0 4px 12px rgba(0,0,0,.05)}\n.pth-faq-q{color:#0f172a;font-size:1rem;font-weight:700;margin:0 0 12px;line-height:1.4}\n.pth-faq-a{margin:0;font-size:.95rem;color:#1e293b;line-height:1.6;font-weight:500}\n<\/style>\n<div class=\"pth-faq-section\">\n  <div class=\"pth-faq-header\"><span aria-hidden=\"true\">\u2753<\/span> Frequently Asked Questions<\/div>\n  <div class=\"pth-faq-grid\">\n    <div class=\"pth-faq-card\">\n      <p class=\"pth-faq-q\">Are my images uploaded to a server?<\/p>\n      <p class=\"pth-faq-a\">No. Every operation runs in your browser using the Canvas API. Nothing leaves your device, there is no account, and closing the tab discards everything. You can disconnect from the internet after the page loads and the tool still works.<\/p>\n    <\/div>\n    <div class=\"pth-faq-card\">\n      <p class=\"pth-faq-q\">Why did my transparent background turn black after export?<\/p>\n      <p class=\"pth-faq-a\">The format was set to JPEG, which has no alpha channel. Switch to PNG (or WebP) in Export &amp; QC. After a Chroma Key removal the tool sets PNG automatically, so this usually only happens if you change the format back manually afterwards.<\/p>\n    <\/div>\n    <div class=\"pth-faq-card\">\n      <p class=\"pth-faq-q\">Chroma Key is eating part of my subject. How do I fix it?<\/p>\n      <p class=\"pth-faq-a\">Lower the tolerance. High tolerance removes pixels further from your chosen colour, so white shirts, pale skin, and blonde hair start disappearing along with a white background. Drop it in steps of 5 until the subject is intact, then accept a small fringe rather than losing detail.<\/p>\n    <\/div>\n    <div class=\"pth-faq-card\">\n      <p class=\"pth-faq-q\">How many images can I process in bulk at once?<\/p>\n      <p class=\"pth-faq-a\">There is no hard cap, but everything is held in memory, so very large batches of very large photos can strain a low-RAM device. Batches of 20\u201350 typical web images are comfortable on most machines. Files are processed one at a time in sequence, not all at once.<\/p>\n    <\/div>\n    <div class=\"pth-faq-card\">\n      <p class=\"pth-faq-q\">Why is my PNG bigger than the original JPEG?<\/p>\n      <p class=\"pth-faq-a\">That is expected. PNG is lossless and stores photographic detail very inefficiently compared with JPEG or WebP. Use PNG only for transparency, logos, or sharp text. For photographs, WebP will give you a far smaller file at the same apparent quality.<\/p>\n    <\/div>\n    <div class=\"pth-faq-card\">\n      <p class=\"pth-faq-q\">Does the crop tool work on touchscreens?<\/p>\n      <p class=\"pth-faq-a\">The crop selection is driven by mouse drag events, so it is designed for a pointer. On a phone or tablet, use the exact width and height fields in Export &amp; QC, or the social presets, to size the image instead.<\/p>\n    <\/div>\n    <div class=\"pth-faq-card\">\n      <p class=\"pth-faq-q\">Will the estimated file size match the real one exactly?<\/p>\n      <p class=\"pth-faq-a\">Not exactly. It is a projection based on pixel-area change and a per-format multiplier, typically within about 20% of the actual output. It exists to catch a bad setting before you export, not to be a precise measurement. The real size is whatever the downloaded file reports.<\/p>\n    <\/div>\n    <div class=\"pth-faq-card\">\n      <p class=\"pth-faq-q\">Can I convert an SVG with this tool?<\/p>\n      <p class=\"pth-faq-a\">This studio works with raster images (JPEG, PNG, WebP). For vector-to-raster conversion with control over output scale and transparency, use the dedicated <a href=\"\/svg-to-png-converter\/\" style=\"color:#1d4ed8;font-weight:700;\">SVG to PNG Converter<\/a> instead.<\/p>\n    <\/div>\n  <\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Image Studio Pro &#8211; Live Preview &#038; Editor Edit images instantly with our Free Advanced Image Studio. Features live preview for contrast, brightness, exact pixel resizing, and 1-click web optimization. \ud83d\udfe2 Live Preview Before You Commit Every slider \u2014 brightness, contrast, blur, vignette, border, text overlay \u2014 updates the preview instantly. The QC panel on &#8230; <a title=\"Free Advanced Image Studio Pro &#8211; Compress, Crop, Convert &amp; Social Presets\" class=\"read-more\" href=\"https:\/\/schoolict.net\/tools\/free-advanced-image-studio-pro\/\" aria-label=\"Read more about Free Advanced Image Studio Pro &#8211; Compress, Crop, Convert &amp; Social Presets\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":3475,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1516","page","type-page","status-publish","has-post-thumbnail"],"_links":{"self":[{"href":"https:\/\/schoolict.net\/tools\/wp-json\/wp\/v2\/pages\/1516","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/schoolict.net\/tools\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/schoolict.net\/tools\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/schoolict.net\/tools\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/schoolict.net\/tools\/wp-json\/wp\/v2\/comments?post=1516"}],"version-history":[{"count":1,"href":"https:\/\/schoolict.net\/tools\/wp-json\/wp\/v2\/pages\/1516\/revisions"}],"predecessor-version":[{"id":6665,"href":"https:\/\/schoolict.net\/tools\/wp-json\/wp\/v2\/pages\/1516\/revisions\/6665"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/schoolict.net\/tools\/wp-json\/wp\/v2\/media\/3475"}],"wp:attachment":[{"href":"https:\/\/schoolict.net\/tools\/wp-json\/wp\/v2\/media?parent=1516"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}