{"id":9689,"date":"2026-07-29T14:14:11","date_gmt":"2026-07-29T14:14:11","guid":{"rendered":"https:\/\/tradegoai.app\/?post_type=tools&#038;p=9689"},"modified":"2026-07-29T14:14:11","modified_gmt":"2026-07-29T14:14:11","slug":"compressore-di-immagini-e-convertitore-webp","status":"publish","type":"tools","link":"https:\/\/tradegoai.app\/it\/tools\/image-compressor-webp-converter\/","title":{"rendered":"Compressore di immagini e convertitore in WebP"},"content":{"rendered":"\t<main\n\t\tid=\"tga-image-compressor-1\"\n\t\tclass=\"tga-image-compressor\"\n\t\taria-labelledby=\"tga-image-compressor-1-title\"\n\t>\n\t\t<style>\n\t\t\t#tga-image-compressor-1 {\n\t\t\t\t--tga-tool-navy: #0f1831;\n\t\t\t\t--tga-tool-purple: #6528f7;\n\t\t\t\t--tga-tool-purple-dark: #501bd8;\n\t\t\t\t--tga-tool-lilac: #f2efff;\n\t\t\t\t--tga-tool-muted: #64748b;\n\t\t\t\t--tga-tool-line: #e2e8f0;\n\t\t\t\t--tga-tool-white: #ffffff;\n\t\t\t\t--tga-tool-success: #047857;\n\t\t\t\t--tga-tool-warning: #a16207;\n\t\t\t\t--tga-tool-danger: #b91c1c;\n\t\t\t\twidth: 100%;\n\t\t\t\tmax-width: 1180px;\n\t\t\t\tmargin: 44px auto 72px;\n\t\t\t\tpadding: 0 22px;\n\t\t\t\tbox-sizing: border-box;\n\t\t\t\tcolor: var(--tga-tool-navy);\n\t\t\t\tfont-family: inherit;\n\t\t\t}\n\t\t\t#tga-image-compressor-1 *,\n\t\t\t#tga-image-compressor-1 *::before,\n\t\t\t#tga-image-compressor-1 *::after { box-sizing: border-box; }\n\t\t\t#tga-image-compressor-1 button,\n\t\t\t#tga-image-compressor-1 input { font: inherit; }\n\t\t\t#tga-image-compressor-1 .tga-imgc-hero {\n\t\t\t\tposition: relative;\n\t\t\t\toverflow: hidden;\n\t\t\t\tpadding: 46px 48px;\n\t\t\t\tborder-radius: 22px;\n\t\t\t\tbackground:\n\t\t\t\t\tradial-gradient(circle at 88% 18%, rgba(101, 40, 247, .78), transparent 34%),\n\t\t\t\t\tlinear-gradient(135deg, #081127 0%, #131d42 100%);\n\t\t\t\tcolor: var(--tga-tool-white);\n\t\t\t}\n\t\t\t#tga-image-compressor-1 .tga-imgc-hero::after {\n\t\t\t\tposition: absolute;\n\t\t\t\tright: -78px;\n\t\t\t\tbottom: -118px;\n\t\t\t\twidth: 320px;\n\t\t\t\theight: 320px;\n\t\t\t\tborder: 1px solid rgba(255, 255, 255, .16);\n\t\t\t\tborder-radius: 50%;\n\t\t\t\tcontent: \"\";\n\t\t\t}\n\t\t\t#tga-image-compressor-1 .tga-imgc-eyebrow {\n\t\t\t\tposition: relative;\n\t\t\t\tz-index: 1;\n\t\t\t\tmargin-bottom: 12px;\n\t\t\t\tcolor: #cbbcff;\n\t\t\t\tfont-size: 12px;\n\t\t\t\tfont-weight: 800;\n\t\t\t\tletter-spacing: .12em;\n\t\t\t\ttext-transform: uppercase;\n\t\t\t}\n\t\t\t#tga-image-compressor-1 .tga-imgc-hero h1 {\n\t\t\t\tposition: relative;\n\t\t\t\tz-index: 1;\n\t\t\t\tmax-width: 960px;\n\t\t\t\tmargin: 0;\n\t\t\t\tcolor: var(--tga-tool-white);\n\t\t\t\tfont-size: clamp(36px, 5.5vw, 62px);\n\t\t\t\tline-height: 1.03;\n\t\t\t\tletter-spacing: -.04em;\n\t\t\t}\n\t\t\t#tga-image-compressor-1 .tga-imgc-hero p {\n\t\t\t\tposition: relative;\n\t\t\t\tz-index: 1;\n\t\t\t\tmax-width: 850px;\n\t\t\t\tmargin: 20px 0 0;\n\t\t\t\tcolor: #dce4ff;\n\t\t\t\tfont-size: 18px;\n\t\t\t\tline-height: 1.65;\n\t\t\t}\n\t\t\t#tga-image-compressor-1 .tga-imgc-workspace {\n\t\t\t\tdisplay: grid;\n\t\t\t\tgrid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);\n\t\t\t\tgap: 24px;\n\t\t\t\tmargin-top: 28px;\n\t\t\t\talign-items: start;\n\t\t\t}\n\t\t\t#tga-image-compressor-1 .tga-imgc-panel,\n\t\t\t#tga-image-compressor-1 .tga-imgc-section {\n\t\t\t\tmin-width: 0;\n\t\t\t\tborder: 1px solid var(--tga-tool-line);\n\t\t\t\tborder-radius: 18px;\n\t\t\t\tbackground: var(--tga-tool-white);\n\t\t\t\tbox-shadow: 0 16px 45px rgba(15, 24, 49, .06);\n\t\t\t}\n\t\t\t#tga-image-compressor-1 .tga-imgc-panel { padding: 28px; }\n\t\t\t#tga-image-compressor-1 .tga-imgc-section {\n\t\t\t\tmargin-top: 28px;\n\t\t\t\tpadding: 30px;\n\t\t\t}\n\t\t\t#tga-image-compressor-1 .tga-imgc-panel h2,\n\t\t\t#tga-image-compressor-1 .tga-imgc-section h2 {\n\t\t\t\tmargin: 0;\n\t\t\t\tcolor: var(--tga-tool-navy);\n\t\t\t\tfont-size: 25px;\n\t\t\t\tline-height: 1.25;\n\t\t\t\tletter-spacing: -.02em;\n\t\t\t}\n\t\t\t#tga-image-compressor-1 .tga-imgc-copy {\n\t\t\t\tmargin: 9px 0 0;\n\t\t\t\tcolor: var(--tga-tool-muted);\n\t\t\t\tline-height: 1.65;\n\t\t\t}\n\t\t\t#tga-image-compressor-1 .tga-imgc-drop {\n\t\t\t\tdisplay: grid;\n\t\t\t\tmin-height: 210px;\n\t\t\t\tmargin-top: 22px;\n\t\t\t\tpadding: 26px;\n\t\t\t\tplace-items: center;\n\t\t\t\tborder: 2px dashed #cbd5e1;\n\t\t\t\tborder-radius: 14px;\n\t\t\t\tbackground: #f8fafc;\n\t\t\t\ttext-align: center;\n\t\t\t\tcursor: pointer;\n\t\t\t\ttransition: border-color .18s ease, background .18s ease;\n\t\t\t}\n\t\t\t#tga-image-compressor-1 .tga-imgc-drop:hover,\n\t\t\t#tga-image-compressor-1 .tga-imgc-drop.is-dragging {\n\t\t\t\tborder-color: var(--tga-tool-purple);\n\t\t\t\tbackground: var(--tga-tool-lilac);\n\t\t\t}\n\t\t\t#tga-image-compressor-1 .tga-imgc-drop strong {\n\t\t\t\tdisplay: block;\n\t\t\t\tmargin-bottom: 8px;\n\t\t\t\tfont-size: 18px;\n\t\t\t}\n\t\t\t#tga-image-compressor-1 .tga-imgc-drop span {\n\t\t\t\tdisplay: block;\n\t\t\t\tcolor: var(--tga-tool-muted);\n\t\t\t\tfont-size: 13px;\n\t\t\t\tline-height: 1.55;\n\t\t\t}\n\t\t\t#tga-image-compressor-1 .tga-imgc-file {\n\t\t\t\tposition: absolute;\n\t\t\t\twidth: 1px;\n\t\t\t\theight: 1px;\n\t\t\t\toverflow: hidden;\n\t\t\t\tclip: rect(0 0 0 0);\n\t\t\t\tclip-path: inset(50%);\n\t\t\t\twhite-space: nowrap;\n\t\t\t}\n\t\t\t#tga-image-compressor-1 .tga-imgc-selected {\n\t\t\t\tdisplay: none;\n\t\t\t\tmargin-top: 14px;\n\t\t\t\tpadding: 12px 14px;\n\t\t\t\tborder: 1px solid var(--tga-tool-line);\n\t\t\t\tborder-radius: 10px;\n\t\t\t\tbackground: #f8fafc;\n\t\t\t\tfont-size: 13px;\n\t\t\t\tline-height: 1.55;\n\t\t\t\toverflow-wrap: anywhere;\n\t\t\t}\n\t\t\t#tga-image-compressor-1 .tga-imgc-selected.is-visible { display: block; }\n\t\t\t#tga-image-compressor-1 .tga-imgc-fields {\n\t\t\t\tdisplay: grid;\n\t\t\t\tgrid-template-columns: repeat(2, minmax(0, 1fr));\n\t\t\t\tgap: 17px;\n\t\t\t\tmargin-top: 20px;\n\t\t\t}\n\t\t\t#tga-image-compressor-1 .tga-imgc-field label,\n\t\t\t#tga-image-compressor-1 .tga-imgc-label {\n\t\t\t\tdisplay: block;\n\t\t\t\tmargin-bottom: 7px;\n\t\t\t\tfont-size: 14px;\n\t\t\t\tfont-weight: 750;\n\t\t\t\tline-height: 1.4;\n\t\t\t}\n\t\t\t#tga-image-compressor-1 .tga-imgc-field input[type=\"number\"] {\n\t\t\t\twidth: 100%;\n\t\t\t\tmin-height: 48px;\n\t\t\t\tpadding: 10px 13px;\n\t\t\t\tborder: 1px solid #cbd5e1;\n\t\t\t\tborder-radius: 10px;\n\t\t\t\tbackground: var(--tga-tool-white);\n\t\t\t\tcolor: var(--tga-tool-navy);\n\t\t\t\toutline: none;\n\t\t\t}\n\t\t\t#tga-image-compressor-1 .tga-imgc-field input[type=\"number\"]:focus {\n\t\t\t\tborder-color: var(--tga-tool-purple);\n\t\t\t\tbox-shadow: 0 0 0 3px rgba(101, 40, 247, .12);\n\t\t\t}\n\t\t\t#tga-image-compressor-1 .tga-imgc-range-row {\n\t\t\t\tdisplay: flex;\n\t\t\t\tgap: 12px;\n\t\t\t\talign-items: center;\n\t\t\t\tmin-height: 48px;\n\t\t\t}\n\t\t\t#tga-image-compressor-1 .tga-imgc-range-row input {\n\t\t\t\tflex: 1;\n\t\t\t\taccent-color: var(--tga-tool-purple);\n\t\t\t}\n\t\t\t#tga-image-compressor-1 .tga-imgc-quality-value {\n\t\t\t\tmin-width: 48px;\n\t\t\t\tpadding: 5px 8px;\n\t\t\t\tborder-radius: 8px;\n\t\t\t\tbackground: var(--tga-tool-lilac);\n\t\t\t\tcolor: var(--tga-tool-purple-dark);\n\t\t\t\tfont-weight: 800;\n\t\t\t\ttext-align: center;\n\t\t\t}\n\t\t\t#tga-image-compressor-1 .tga-imgc-help {\n\t\t\t\tdisplay: block;\n\t\t\t\tmargin-top: 6px;\n\t\t\t\tcolor: var(--tga-tool-muted);\n\t\t\t\tfont-size: 12px;\n\t\t\t\tline-height: 1.5;\n\t\t\t}\n\t\t\t#tga-image-compressor-1 .tga-imgc-primary {\n\t\t\t\twidth: 100%;\n\t\t\t\tmin-height: 50px;\n\t\t\t\tmargin-top: 22px;\n\t\t\t\tpadding: 12px 18px;\n\t\t\t\tborder: 0;\n\t\t\t\tborder-radius: 10px;\n\t\t\t\tbackground: var(--tga-tool-purple);\n\t\t\t\tcolor: var(--tga-tool-white);\n\t\t\t\tfont-weight: 800;\n\t\t\t\tcursor: pointer;\n\t\t\t\ttransition: background .18s ease, transform .18s ease;\n\t\t\t}\n\t\t\t#tga-image-compressor-1 .tga-imgc-primary:hover {\n\t\t\t\tbackground: var(--tga-tool-purple-dark);\n\t\t\t\ttransform: translateY(-1px);\n\t\t\t}\n\t\t\t#tga-image-compressor-1 .tga-imgc-primary:disabled {\n\t\t\t\tbackground: #94a3b8;\n\t\t\t\tcursor: not-allowed;\n\t\t\t\ttransform: none;\n\t\t\t}\n\t\t\t#tga-image-compressor-1 .tga-imgc-status {\n\t\t\t\tmin-height: 22px;\n\t\t\t\tmargin: 12px 0 0;\n\t\t\t\tcolor: var(--tga-tool-success);\n\t\t\t\tfont-size: 13px;\n\t\t\t\tfont-weight: 700;\n\t\t\t\tline-height: 1.5;\n\t\t\t}\n\t\t\t#tga-image-compressor-1 .tga-imgc-status.is-error { color: var(--tga-tool-danger); }\n\t\t\t#tga-image-compressor-1 .tga-imgc-status.is-warning { color: var(--tga-tool-warning); }\n\t\t\t#tga-image-compressor-1 .tga-imgc-empty {\n\t\t\t\tdisplay: grid;\n\t\t\t\tmin-height: 420px;\n\t\t\t\tpadding: 30px;\n\t\t\t\tplace-items: center;\n\t\t\t\tborder: 1px dashed #cbd5e1;\n\t\t\t\tborder-radius: 14px;\n\t\t\t\tbackground: #f8fafc;\n\t\t\t\ttext-align: center;\n\t\t\t}\n\t\t\t#tga-image-compressor-1 .tga-imgc-empty strong {\n\t\t\t\tdisplay: block;\n\t\t\t\tmargin-bottom: 8px;\n\t\t\t\tfont-size: 20px;\n\t\t\t}\n\t\t\t#tga-image-compressor-1 .tga-imgc-empty p {\n\t\t\t\tmax-width: 430px;\n\t\t\t\tmargin: 0;\n\t\t\t\tcolor: var(--tga-tool-muted);\n\t\t\t\tline-height: 1.65;\n\t\t\t}\n\t\t\t#tga-image-compressor-1 .tga-imgc-result[hidden] { display: none !important; }\n\t\t\t#tga-image-compressor-1 .tga-imgc-preview-wrap {\n\t\t\t\tdisplay: grid;\n\t\t\t\tmin-height: 280px;\n\t\t\t\tpadding: 14px;\n\t\t\t\tplace-items: center;\n\t\t\t\toverflow: hidden;\n\t\t\t\tborder-radius: 14px;\n\t\t\t\tbackground:\n\t\t\t\t\tlinear-gradient(45deg, #eef2f7 25%, transparent 25%),\n\t\t\t\t\tlinear-gradient(-45deg, #eef2f7 25%, transparent 25%),\n\t\t\t\t\tlinear-gradient(45deg, transparent 75%, #eef2f7 75%),\n\t\t\t\t\tlinear-gradient(-45deg, transparent 75%, #eef2f7 75%);\n\t\t\t\tbackground-position: 0 0, 0 8px, 8px -8px, -8px 0;\n\t\t\t\tbackground-size: 16px 16px;\n\t\t\t}\n\t\t\t#tga-image-compressor-1 .tga-imgc-preview {\n\t\t\t\tdisplay: block;\n\t\t\t\tmax-width: 100%;\n\t\t\t\tmax-height: 360px;\n\t\t\t\tborder-radius: 8px;\n\t\t\t\tbox-shadow: 0 10px 30px rgba(15, 24, 49, .18);\n\t\t\t}\n\t\t\t#tga-image-compressor-1 .tga-imgc-metrics {\n\t\t\t\tdisplay: grid;\n\t\t\t\tgrid-template-columns: repeat(2, minmax(0, 1fr));\n\t\t\t\tgap: 10px;\n\t\t\t\tmargin-top: 16px;\n\t\t\t}\n\t\t\t#tga-image-compressor-1 .tga-imgc-metric {\n\t\t\t\tmin-width: 0;\n\t\t\t\tpadding: 13px 14px;\n\t\t\t\tborder: 1px solid var(--tga-tool-line);\n\t\t\t\tborder-radius: 11px;\n\t\t\t\tbackground: #f8fafc;\n\t\t\t}\n\t\t\t#tga-image-compressor-1 .tga-imgc-metric span {\n\t\t\t\tdisplay: block;\n\t\t\t\tmargin-bottom: 4px;\n\t\t\t\tcolor: var(--tga-tool-muted);\n\t\t\t\tfont-size: 11px;\n\t\t\t\tfont-weight: 800;\n\t\t\t\tletter-spacing: .04em;\n\t\t\t\ttext-transform: uppercase;\n\t\t\t}\n\t\t\t#tga-image-compressor-1 .tga-imgc-metric strong {\n\t\t\t\tdisplay: block;\n\t\t\t\toverflow-wrap: anywhere;\n\t\t\t\tfont-size: 15px;\n\t\t\t}\n\t\t\t#tga-image-compressor-1 .tga-imgc-result-note {\n\t\t\t\tdisplay: none;\n\t\t\t\tmargin: 14px 0 0;\n\t\t\t\tpadding: 11px 13px;\n\t\t\t\tborder-left: 4px solid var(--tga-tool-warning);\n\t\t\t\tborder-radius: 8px;\n\t\t\t\tbackground: #fffbeb;\n\t\t\t\tcolor: #854d0e;\n\t\t\t\tfont-size: 13px;\n\t\t\t\tline-height: 1.55;\n\t\t\t}\n\t\t\t#tga-image-compressor-1 .tga-imgc-result-note.is-visible { display: block; }\n\t\t\t#tga-image-compressor-1 .tga-imgc-actions {\n\t\t\t\tdisplay: flex;\n\t\t\t\tflex-wrap: wrap;\n\t\t\t\tgap: 10px;\n\t\t\t\tmargin-top: 18px;\n\t\t\t}\n\t\t\t#tga-image-compressor-1 .tga-imgc-action {\n\t\t\t\tdisplay: inline-flex;\n\t\t\t\tmin-height: 42px;\n\t\t\t\tpadding: 9px 14px;\n\t\t\t\talign-items: center;\n\t\t\t\tjustify-content: center;\n\t\t\t\tborder: 1px solid #cbd5e1;\n\t\t\t\tborder-radius: 9px;\n\t\t\t\tbackground: var(--tga-tool-white);\n\t\t\t\tcolor: var(--tga-tool-navy);\n\t\t\t\tfont-weight: 750;\n\t\t\t\tcursor: pointer;\n\t\t\t\ttext-decoration: none;\n\t\t\t}\n\t\t\t#tga-image-compressor-1 .tga-imgc-action:hover {\n\t\t\t\tborder-color: var(--tga-tool-purple);\n\t\t\t\tcolor: var(--tga-tool-purple-dark);\n\t\t\t}\n\t\t\t#tga-image-compressor-1 .tga-imgc-info-grid,\n\t\t\t#tga-image-compressor-1 .tga-imgc-related-grid {\n\t\t\t\tdisplay: grid;\n\t\t\t\tgrid-template-columns: repeat(3, minmax(0, 1fr));\n\t\t\t\tgap: 16px;\n\t\t\t\tmargin-top: 20px;\n\t\t\t}\n\t\t\t#tga-image-compressor-1 .tga-imgc-info,\n\t\t\t#tga-image-compressor-1 .tga-imgc-related {\n\t\t\t\tpadding: 20px;\n\t\t\t\tborder: 1px solid var(--tga-tool-line);\n\t\t\t\tborder-radius: 13px;\n\t\t\t\tbackground: var(--tga-tool-white);\n\t\t\t}\n\t\t\t#tga-image-compressor-1 .tga-imgc-info strong,\n\t\t\t#tga-image-compressor-1 .tga-imgc-related strong {\n\t\t\t\tdisplay: block;\n\t\t\t\tmargin-bottom: 8px;\n\t\t\t\tfont-size: 17px;\n\t\t\t}\n\t\t\t#tga-image-compressor-1 .tga-imgc-info p,\n\t\t\t#tga-image-compressor-1 .tga-imgc-related p {\n\t\t\t\tmargin: 0;\n\t\t\t\tcolor: var(--tga-tool-muted);\n\t\t\t\tfont-size: 14px;\n\t\t\t\tline-height: 1.6;\n\t\t\t}\n\t\t\t#tga-image-compressor-1 .tga-imgc-related {\n\t\t\t\tcolor: inherit;\n\t\t\t\ttext-decoration: none;\n\t\t\t\ttransition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;\n\t\t\t}\n\t\t\t#tga-image-compressor-1 .tga-imgc-related:hover,\n\t\t\t#tga-image-compressor-1 .tga-imgc-related:focus-visible {\n\t\t\t\tborder-color: var(--tga-tool-purple);\n\t\t\t\tbox-shadow: 0 10px 24px rgba(15, 24, 49, .08);\n\t\t\t\ttransform: translateY(-2px);\n\t\t\t}\n\t\t\t#tga-image-compressor-1 .tga-imgc-cta {\n\t\t\t\tdisplay: grid;\n\t\t\t\tgrid-template-columns: minmax(0, 1fr) auto;\n\t\t\t\tgap: 24px;\n\t\t\t\talign-items: center;\n\t\t\t\tbackground: linear-gradient(135deg, var(--tga-tool-navy), #34206f);\n\t\t\t\tcolor: var(--tga-tool-white);\n\t\t\t}\n\t\t\t#tga-image-compressor-1 .tga-imgc-cta h2 { color: var(--tga-tool-white); }\n\t\t\t#tga-image-compressor-1 .tga-imgc-cta p {\n\t\t\t\tmax-width: 720px;\n\t\t\t\tcolor: #dce4ff;\n\t\t\t}\n\t\t\t#tga-image-compressor-1 .tga-imgc-cta a {\n\t\t\t\tdisplay: inline-flex;\n\t\t\t\tmin-height: 48px;\n\t\t\t\tpadding: 12px 18px;\n\t\t\t\talign-items: center;\n\t\t\t\tjustify-content: center;\n\t\t\t\tborder-radius: 10px;\n\t\t\t\tbackground: var(--tga-tool-white);\n\t\t\t\tcolor: var(--tga-tool-navy);\n\t\t\t\tfont-weight: 800;\n\t\t\t\ttext-decoration: none;\n\t\t\t\twhite-space: nowrap;\n\t\t\t}\n\t\t\t#tga-image-compressor-1 .tga-imgc-faq {\n\t\t\t\tdisplay: grid;\n\t\t\t\tgap: 10px;\n\t\t\t\tmargin-top: 17px;\n\t\t\t}\n\t\t\t#tga-image-compressor-1 .tga-imgc-faq details {\n\t\t\t\tborder: 1px solid var(--tga-tool-line);\n\t\t\t\tborder-radius: 12px;\n\t\t\t\tbackground: var(--tga-tool-white);\n\t\t\t}\n\t\t\t#tga-image-compressor-1 .tga-imgc-faq summary {\n\t\t\t\tpadding: 16px 18px;\n\t\t\t\tfont-weight: 800;\n\t\t\t\tcursor: pointer;\n\t\t\t}\n\t\t\t#tga-image-compressor-1 .tga-imgc-faq details p {\n\t\t\t\tmargin: 0;\n\t\t\t\tpadding: 0 18px 18px;\n\t\t\t\tcolor: var(--tga-tool-muted);\n\t\t\t\tline-height: 1.7;\n\t\t\t}\n\t\t\t#tga-image-compressor-1 button:focus-visible,\n\t\t\t#tga-image-compressor-1 a:focus-visible,\n\t\t\t#tga-image-compressor-1 summary:focus-visible,\n\t\t\t#tga-image-compressor-1 input:focus-visible,\n\t\t\t#tga-image-compressor-1 .tga-imgc-drop:focus-within {\n\t\t\t\toutline: 3px solid rgba(101, 40, 247, .24);\n\t\t\t\toutline-offset: 3px;\n\t\t\t}\n\t\t\t#tga-image-compressor-1 .tga-imgc-i18n {\n\t\t\t\tposition: absolute !important;\n\t\t\t\twidth: 1px !important;\n\t\t\t\theight: 1px !important;\n\t\t\t\toverflow: hidden !important;\n\t\t\t\tclip: rect(0 0 0 0) !important;\n\t\t\t\tclip-path: inset(50%) !important;\n\t\t\t\twhite-space: nowrap !important;\n\t\t\t}\n\t\t\t@media (max-width: 900px) {\n\t\t\t\t#tga-image-compressor-1 .tga-imgc-workspace,\n\t\t\t\t#tga-image-compressor-1 .tga-imgc-cta { grid-template-columns: 1fr; }\n\t\t\t\t#tga-image-compressor-1 .tga-imgc-info-grid,\n\t\t\t\t#tga-image-compressor-1 .tga-imgc-related-grid { grid-template-columns: 1fr; }\n\t\t\t\t#tga-image-compressor-1 .tga-imgc-empty { min-height: 260px; }\n\t\t\t}\n\t\t\t@media (max-width: 600px) {\n\t\t\t\t#tga-image-compressor-1 {\n\t\t\t\t\tmargin-top: 24px;\n\t\t\t\t\tpadding: 0 15px;\n\t\t\t\t}\n\t\t\t\t#tga-image-compressor-1 .tga-imgc-hero {\n\t\t\t\t\tpadding: 31px 23px;\n\t\t\t\t\tborder-radius: 16px;\n\t\t\t\t}\n\t\t\t\t#tga-image-compressor-1 .tga-imgc-hero h1 { font-size: 39px; }\n\t\t\t\t#tga-image-compressor-1 .tga-imgc-hero p { font-size: 16px; }\n\t\t\t\t#tga-image-compressor-1 .tga-imgc-panel,\n\t\t\t\t#tga-image-compressor-1 .tga-imgc-section { padding: 22px 18px; }\n\t\t\t\t#tga-image-compressor-1 .tga-imgc-fields,\n\t\t\t\t#tga-image-compressor-1 .tga-imgc-metrics { grid-template-columns: 1fr; }\n\t\t\t\t#tga-image-compressor-1 .tga-imgc-field input[type=\"number\"] { font-size: 16px; }\n\t\t\t\t#tga-image-compressor-1 .tga-imgc-actions { display: grid; }\n\t\t\t\t#tga-image-compressor-1 .tga-imgc-action,\n\t\t\t\t#tga-image-compressor-1 .tga-imgc-cta a { width: 100%; }\n\t\t\t}\n\t\t<\/style>\n\n\t\t<header class=\"tga-imgc-hero\">\n\t\t\t<div class=\"tga-imgc-eyebrow\">Smaller Images, Faster Pages<\/div>\n\t\t\t<h1 id=\"tga-image-compressor-1-title\">Image Compressor &amp; WebP Converter<\/h1>\n\t\t\t<p>Compress product, campaign, and website images in your browser, convert them to WebP, and download smaller files ready to publish.<\/p>\n\t\t<\/header>\n\n\t\t<div class=\"tga-imgc-workspace\">\n\t\t\t<form class=\"tga-imgc-panel\" novalidate>\n\t\t\t\t<h2>Choose and Optimize an Image<\/h2>\n\t\t\t\t<p class=\"tga-imgc-copy\">Select one JPEG, PNG, or WebP image and choose the output quality and maximum dimension.<\/p>\n\n\t\t\t\t<label class=\"tga-imgc-drop\" for=\"tga-image-compressor-1-file\">\n\t\t\t\t\t<span>\n\t\t\t\t\t\t<strong>Drop an Image Here or Select a File<\/strong>\n\t\t\t\t\t\t<span>JPEG, PNG, or WebP \u00b7 maximum 25 MB \u00b7 one image at a time<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<input\n\t\t\t\t\t\tclass=\"tga-imgc-file\"\n\t\t\t\t\t\tid=\"tga-image-compressor-1-file\"\n\t\t\t\t\t\tname=\"image\"\n\t\t\t\t\t\ttype=\"file\"\n\t\t\t\t\t\taccept=\"image\/jpeg,image\/png,image\/webp\"\n\t\t\t\t\t\trequired\n\t\t\t\t\t>\n\t\t\t\t<\/label>\n\t\t\t\t<div class=\"tga-imgc-selected\" aria-live=\"polite\"><\/div>\n\n\t\t\t\t<div class=\"tga-imgc-fields\">\n\t\t\t\t\t<div class=\"tga-imgc-field\">\n\t\t\t\t\t\t<label for=\"tga-image-compressor-1-quality\">WebP Quality<\/label>\n\t\t\t\t\t\t<div class=\"tga-imgc-range-row\">\n\t\t\t\t\t\t\t<input id=\"tga-image-compressor-1-quality\" name=\"quality\" type=\"range\" min=\"40\" max=\"95\" step=\"1\" value=\"82\">\n\t\t\t\t\t\t\t<output class=\"tga-imgc-quality-value\" for=\"tga-image-compressor-1-quality\">82<\/output>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<span class=\"tga-imgc-help\">Lower values usually create smaller files with more visible compression.<\/span>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t<div class=\"tga-imgc-field\">\n\t\t\t\t\t\t<label for=\"tga-image-compressor-1-dimension\">Maximum Width or Height<\/label>\n\t\t\t\t\t\t<input id=\"tga-image-compressor-1-dimension\" name=\"dimension\" type=\"number\" min=\"320\" max=\"8000\" step=\"1\" value=\"1920\" inputmode=\"numeric\" required>\n\t\t\t\t\t\t<span class=\"tga-imgc-help\">The image keeps its proportions and is never enlarged.<\/span>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\n\t\t\t\t<button class=\"tga-imgc-primary\" type=\"submit\">Compress and Convert to WebP<\/button>\n\t\t\t\t<div class=\"tga-imgc-status\" role=\"status\" aria-live=\"polite\"><\/div>\n\t\t\t<\/form>\n\n\t\t\t<section class=\"tga-imgc-panel\" aria-labelledby=\"tga-image-compressor-1-result-title\">\n\t\t\t\t<h2 id=\"tga-image-compressor-1-result-title\">Optimized Image<\/h2>\n\t\t\t\t<p class=\"tga-imgc-copy\">Compare the file size and dimensions, inspect the preview, then download the WebP file.<\/p>\n\n\t\t\t\t<div class=\"tga-imgc-empty\">\n\t\t\t\t\t<div>\n\t\t\t\t\t\t<strong>Your Optimized Image Will Appear Here<\/strong>\n\t\t\t\t\t\t<p>Select an image and run the converter to see the preview, size comparison, and download actions.<\/p>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\n\t\t\t\t<div class=\"tga-imgc-result\" hidden>\n\t\t\t\t\t<div class=\"tga-imgc-preview-wrap\">\n\t\t\t\t\t\t<img decoding=\"async\" class=\"tga-imgc-preview\" src=\"\" alt=\"Optimized WebP preview\">\n\t\t\t\t\t<\/div>\n\t\t\t\t\t<div class=\"tga-imgc-metrics\">\n\t\t\t\t\t\t<div class=\"tga-imgc-metric\"><span>Original File<\/span><strong data-metric=\"original-size\">\u2014<\/strong><\/div>\n\t\t\t\t\t\t<div class=\"tga-imgc-metric\"><span>WebP File<\/span><strong data-metric=\"output-size\">\u2014<\/strong><\/div>\n\t\t\t\t\t\t<div class=\"tga-imgc-metric\"><span>Size Change<\/span><strong data-metric=\"savings\">\u2014<\/strong><\/div>\n\t\t\t\t\t\t<div class=\"tga-imgc-metric\"><span>Output Dimensions<\/span><strong data-metric=\"dimensions\">\u2014<\/strong><\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t<p class=\"tga-imgc-result-note\">This WebP is larger than the source. Try a lower quality or dimension, or keep the original image.<\/p>\n\t\t\t\t\t<div class=\"tga-imgc-actions\">\n\t\t\t\t\t\t<a class=\"tga-imgc-action\" data-action=\"download\" href=\"#\" download>Download WebP<\/a>\n\t\t\t\t\t\t<button class=\"tga-imgc-action\" data-action=\"copy\" type=\"button\">Copy Result Summary<\/button>\n\t\t\t\t\t\t<button class=\"tga-imgc-action\" data-action=\"reset\" type=\"button\">Reset<\/button>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t<\/section>\n\t\t<\/div>\n\n\t\t<section class=\"tga-imgc-section\">\n\t\t\t<h2>How to Prepare an Image for Publishing<\/h2>\n\t\t\t<p class=\"tga-imgc-copy\">Use the smallest dimensions and quality that still preserve the product or campaign details your visitors need.<\/p>\n\t\t\t<div class=\"tga-imgc-info-grid\">\n\t\t\t\t<div class=\"tga-imgc-info\"><strong>1. Choose the Source<\/strong><p>Start with the cleanest available JPEG, PNG, or WebP instead of repeatedly compressing an already degraded copy.<\/p><\/div>\n\t\t\t\t<div class=\"tga-imgc-info\"><strong>2. Set the Display Size<\/strong><p>Match the maximum dimension to the largest size the image will actually occupy on the page or document.<\/p><\/div>\n\t\t\t\t<div class=\"tga-imgc-info\"><strong>3. Inspect Before Publishing<\/strong><p>Check text, product edges, gradients, transparency, and fine details at the size visitors will see.<\/p><\/div>\n\t\t\t<\/div>\n\t\t<\/section>\n\n\t\t<section class=\"tga-imgc-section\">\n\t\t\t<h2>Image and Result Guidance<\/h2>\n\t\t\t<p class=\"tga-imgc-copy\">Compression is a visual tradeoff. File size alone does not determine whether an image is ready to publish.<\/p>\n\t\t\t<div class=\"tga-imgc-info-grid\">\n\t\t\t\t<div class=\"tga-imgc-info\"><strong>Processed in Your Browser<\/strong><p>The selected image is not uploaded by this tool. Closing or resetting the page removes the generated browser preview.<\/p><\/div>\n\t\t\t\t<div class=\"tga-imgc-info\"><strong>WebP Browser Support<\/strong><p>Current major browsers support WebP, but confirm the requirements of older publishing systems, marketplaces, and document workflows.<\/p><\/div>\n\t\t\t\t<div class=\"tga-imgc-info\"><strong>Keep an Original Copy<\/strong><p>Save your high-quality source separately. WebP conversion does not replace an editable master or add missing image detail.<\/p><\/div>\n\t\t\t<\/div>\n\t\t<\/section>\n\n\t\t<section class=\"tga-imgc-section tga-imgc-cta\">\n\t\t\t<div>\n\t\t\t\t<div class=\"tga-imgc-eyebrow\">TradeGoAI Services<\/div>\n\t\t\t\t<h2>Turn Better Assets Into a Stronger International Trade Presence<\/h2>\n\t\t\t\t<p class=\"tga-imgc-copy\">Explore services for international market research, content systems, sales assets, trade documentation, and measurable visibility growth.<\/p>\n\t\t\t<\/div>\n\t\t\t<a href=\"https:\/\/tradegoai.app\/it\/services\/\">Explore Services \u2192<\/a>\n\t\t<\/section>\n\n\t\t<section class=\"tga-imgc-section\" aria-labelledby=\"tga-image-compressor-1-faq-title\">\n\t\t\t<h2 id=\"tga-image-compressor-1-faq-title\">Frequently Asked Questions<\/h2>\n\t\t\t<p class=\"tga-imgc-copy\">Understand supported files, browser processing, quality choices, and result limits.<\/p>\n\t\t\t<div class=\"tga-imgc-faq\">\n\t\t\t\t\t\t\t\t\t<details>\n\t\t\t\t\t\t<summary>Which image formats can I use?<\/summary>\n\t\t\t\t\t\t<p>You can select a JPEG, PNG, or WebP image. The downloaded result is a WebP file. Animated images and SVG files are not processed by this tool.<\/p>\n\t\t\t\t\t<\/details>\n\t\t\t\t\t\t\t\t\t<details>\n\t\t\t\t\t\t<summary>Are my images uploaded or stored?<\/summary>\n\t\t\t\t\t\t<p>No. The selected image is decoded, resized, and compressed in your browser. The image and generated file are not uploaded to TradeGoAI by this tool.<\/p>\n\t\t\t\t\t<\/details>\n\t\t\t\t\t\t\t\t\t<details>\n\t\t\t\t\t\t<summary>What quality setting should I choose?<\/summary>\n\t\t\t\t\t\t<p>A quality between 75 and 85 is a practical starting point for most product and website images. Review fine text, edges, gradients, and product details before publishing.<\/p>\n\t\t\t\t\t<\/details>\n\t\t\t\t\t\t\t\t\t<details>\n\t\t\t\t\t\t<summary>Why can the WebP file be larger than the original?<\/summary>\n\t\t\t\t\t\t<p>An already optimized source, a small image, transparency, or a high quality setting can produce a WebP file that is not smaller. Compare the result and keep the original when it is better.<\/p>\n\t\t\t\t\t<\/details>\n\t\t\t\t\t\t\t\t\t<details>\n\t\t\t\t\t\t<summary>Does converting an image improve its resolution?<\/summary>\n\t\t\t\t\t\t<p>No. Compression and format conversion do not add real image detail. This tool can reduce dimensions but does not enlarge the image or restore detail missing from the source.<\/p>\n\t\t\t\t\t<\/details>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\n\t\t<section class=\"tga-imgc-section\" aria-labelledby=\"tga-image-compressor-1-related-title\">\n\t\t\t<h2 id=\"tga-image-compressor-1-related-title\">Related Free Tools<\/h2>\n\t\t\t<p class=\"tga-imgc-copy\">Continue from optimized images into product information, campaign tracking, and search presentation.<\/p>\n\t\t\t<div class=\"tga-imgc-related-grid\">\n\t\t\t\t<a class=\"tga-imgc-related\" href=\"https:\/\/tradegoai.app\/it\/tools\/product-specification-table-builder\/\"><strong>Product Specification Table Builder<\/strong><p>Turn product attributes into clean HTML, Markdown, and CSV specification tables.<\/p><\/a>\n\t\t\t\t<a class=\"tga-imgc-related\" href=\"https:\/\/tradegoai.app\/it\/tools\/utm-campaign-builder\/\"><strong>UTM Campaign Builder<\/strong><p>Build consistent tracking links for email, social, partner, and paid campaigns.<\/p><\/a>\n\t\t\t\t<a class=\"tga-imgc-related\" href=\"https:\/\/tradegoai.app\/it\/tools\/seo-title-meta-preview\/\"><strong>SEO Title &amp; Meta Preview<\/strong><p>Preview page titles and descriptions across desktop and mobile search layouts.<\/p><\/a>\n\t\t\t<\/div>\n\t\t<\/section>\n\n\t\t<div class=\"tga-imgc-i18n\" aria-hidden=\"true\">\n\t\t\t<span data-key=\"unsupported\">Choose a JPEG, PNG, or WebP image.<\/span>\n\t\t\t<span data-key=\"tooLarge\">Choose an image smaller than 25 MB.<\/span>\n\t\t\t<span data-key=\"tooManyPixels\">This image has too many pixels for safe browser processing. Choose a smaller source image.<\/span>\n\t\t\t<span data-key=\"invalidDimension\">Enter a maximum dimension from 320 to 8000 pixels.<\/span>\n\t\t\t<span data-key=\"selected\">Selected:<\/span>\n\t\t\t<span data-key=\"processing\">Processing image\u2026<\/span>\n\t\t\t<span data-key=\"ready\">WebP image created and ready to download.<\/span>\n\t\t\t<span data-key=\"larger\">The WebP file is larger than the source. Review the warning below the result.<\/span>\n\t\t\t<span data-key=\"failed\">This browser could not process the selected image. Try another supported image or browser.<\/span>\n\t\t\t<span data-key=\"downloaded\">WebP image downloaded.<\/span>\n\t\t\t<span data-key=\"copied\">Result summary copied.<\/span>\n\t\t\t<span data-key=\"copyError\">Copy is unavailable in this browser. Select and copy the result details manually.<\/span>\n\t\t\t<span data-key=\"reset\">Image and result reset.<\/span>\n\t\t\t<span data-key=\"original\">Original<\/span>\n\t\t\t<span data-key=\"output\">WebP<\/span>\n\t\t\t<span data-key=\"sizeChange\">Size Change<\/span>\n\t\t\t<span data-key=\"smaller\">smaller<\/span>\n\t\t\t<span data-key=\"largerWord\">larger<\/span>\n\t\t\t<span data-key=\"noChange\">no material size change<\/span>\n\t\t\t<span data-key=\"button\">Compress and Convert to WebP<\/span>\n\t\t<\/div>\n\n\t\t<script>\n\t\t(function () {\n\t\t\tconst root = document.getElementById(\"tga-image-compressor-1\");\n\t\t\tif (!root || root.dataset.ready === '1') return;\n\t\t\troot.dataset.ready = '1';\n\n\t\t\tconst form = root.querySelector('form');\n\t\t\tconst fileInput = form.querySelector('input[type=\"file\"]');\n\t\t\tconst dropZone = root.querySelector('.tga-imgc-drop');\n\t\t\tconst selected = root.querySelector('.tga-imgc-selected');\n\t\t\tconst quality = form.querySelector('[name=\"quality\"]');\n\t\t\tconst qualityValue = root.querySelector('.tga-imgc-quality-value');\n\t\t\tconst dimension = form.querySelector('[name=\"dimension\"]');\n\t\t\tconst submit = form.querySelector('button[type=\"submit\"]');\n\t\t\tconst status = root.querySelector('.tga-imgc-status');\n\t\t\tconst empty = root.querySelector('.tga-imgc-empty');\n\t\t\tconst result = root.querySelector('.tga-imgc-result');\n\t\t\tconst preview = root.querySelector('.tga-imgc-preview');\n\t\t\tconst resultNote = root.querySelector('.tga-imgc-result-note');\n\t\t\tconst download = root.querySelector('[data-action=\"download\"]');\n\t\t\tconst labels = {};\n\t\t\tconst allowedTypes = new Set(['image\/jpeg', 'image\/png', 'image\/webp']);\n\t\t\tconst maxBytes = 25 * 1024 * 1024;\n\t\t\tconst maxPixels = 80000000;\n\t\t\tlet currentFile = null;\n\t\t\tlet resultBlob = null;\n\t\t\tlet resultUrl = '';\n\t\t\tlet resultSummary = '';\n\n\t\t\troot.querySelectorAll('.tga-imgc-i18n [data-key]').forEach(function (node) {\n\t\t\t\tlabels[node.dataset.key] = node.textContent.trim();\n\t\t\t});\n\n\t\t\tfunction setStatus(message, type) {\n\t\t\t\tstatus.textContent = message || '';\n\t\t\t\tstatus.classList.toggle('is-error', type === 'error');\n\t\t\t\tstatus.classList.toggle('is-warning', type === 'warning');\n\t\t\t}\n\n\t\t\tfunction formatBytes(bytes) {\n\t\t\t\tif (!Number.isFinite(bytes) || bytes < 0) return '\u2014';\n\t\t\t\tif (bytes < 1024) return bytes + ' B';\n\t\t\t\tif (bytes < 1048576) return (bytes \/ 1024).toFixed(bytes < 10240 ? 1 : 0) + ' KB';\n\t\t\t\treturn (bytes \/ 1048576).toFixed(2) + ' MB';\n\t\t\t}\n\n\t\t\tfunction safeBaseName(name) {\n\t\t\t\tconst withoutExtension = String(name || 'image').replace(\/\\.[^.]+$\/, '');\n\t\t\t\tconst cleaned = withoutExtension.normalize('NFKC')\n\t\t\t\t\t.replace(\/[^\\p{L}\\p{N}._-]+\/gu, '-')\n\t\t\t\t\t.replace(\/-+\/g, '-')\n\t\t\t\t\t.replace(\/^[.-]+|[.-]+$\/g, '');\n\t\t\t\treturn cleaned || 'image';\n\t\t\t}\n\n\t\t\tfunction clearResult() {\n\t\t\t\tif (resultUrl) URL.revokeObjectURL(resultUrl);\n\t\t\t\tresultBlob = null;\n\t\t\t\tresultUrl = '';\n\t\t\t\tresultSummary = '';\n\t\t\t\tpreview.removeAttribute('src');\n\t\t\t\tdownload.removeAttribute('href');\n\t\t\t\tdownload.removeAttribute('download');\n\t\t\t\tresult.hidden = true;\n\t\t\t\tempty.hidden = false;\n\t\t\t\tresultNote.classList.remove('is-visible');\n\t\t\t}\n\n\t\t\tfunction validateFile(file) {\n\t\t\t\tif (!file || !allowedTypes.has(file.type)) {\n\t\t\t\t\tsetStatus(labels.unsupported, 'error');\n\t\t\t\t\treturn false;\n\t\t\t\t}\n\t\t\t\tif (file.size > maxBytes) {\n\t\t\t\t\tsetStatus(labels.tooLarge, 'error');\n\t\t\t\t\treturn false;\n\t\t\t\t}\n\t\t\t\treturn true;\n\t\t\t}\n\n\t\t\tfunction selectFile(file) {\n\t\t\t\tclearResult();\n\t\t\t\tif (!validateFile(file)) {\n\t\t\t\t\tcurrentFile = null;\n\t\t\t\t\tselected.classList.remove('is-visible');\n\t\t\t\t\tselected.textContent = '';\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tcurrentFile = file;\n\t\t\t\tselected.textContent = labels.selected + ' ' + file.name + ' \u00b7 ' + formatBytes(file.size);\n\t\t\t\tselected.classList.add('is-visible');\n\t\t\t\tsetStatus('', '');\n\t\t\t}\n\n\t\t\tfunction loadImage(file) {\n\t\t\t\tif ('createImageBitmap' in window) {\n\t\t\t\t\treturn createImageBitmap(file).then(function (bitmap) {\n\t\t\t\t\t\treturn {\n\t\t\t\t\t\t\tsource: bitmap,\n\t\t\t\t\t\t\twidth: bitmap.width,\n\t\t\t\t\t\t\theight: bitmap.height,\n\t\t\t\t\t\t\tcleanup: function () { bitmap.close(); }\n\t\t\t\t\t\t};\n\t\t\t\t\t});\n\t\t\t\t}\n\n\t\t\t\treturn new Promise(function (resolve, reject) {\n\t\t\t\t\tconst objectUrl = URL.createObjectURL(file);\n\t\t\t\t\tconst image = new Image();\n\t\t\t\t\timage.onload = function () {\n\t\t\t\t\t\tresolve({\n\t\t\t\t\t\t\tsource: image,\n\t\t\t\t\t\t\twidth: image.naturalWidth,\n\t\t\t\t\t\t\theight: image.naturalHeight,\n\t\t\t\t\t\t\tcleanup: function () { URL.revokeObjectURL(objectUrl); }\n\t\t\t\t\t\t});\n\t\t\t\t\t};\n\t\t\t\t\timage.onerror = function () {\n\t\t\t\t\t\tURL.revokeObjectURL(objectUrl);\n\t\t\t\t\t\treject(new Error('decode'));\n\t\t\t\t\t};\n\t\t\t\t\timage.src = objectUrl;\n\t\t\t\t});\n\t\t\t}\n\n\t\t\tfunction canvasToWebP(canvas, outputQuality) {\n\t\t\t\treturn new Promise(function (resolve, reject) {\n\t\t\t\t\tcanvas.toBlob(function (blob) {\n\t\t\t\t\t\tif (!blob || blob.type !== 'image\/webp') {\n\t\t\t\t\t\t\treject(new Error('webp'));\n\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t}\n\t\t\t\t\t\tresolve(blob);\n\t\t\t\t\t}, 'image\/webp', outputQuality);\n\t\t\t\t});\n\t\t\t}\n\n\t\t\tasync function processImage() {\n\t\t\t\tif (!validateFile(currentFile)) return;\n\n\t\t\t\tconst maxDimension = Number.parseInt(dimension.value, 10);\n\t\t\t\tif (!Number.isFinite(maxDimension) || maxDimension < 320 || maxDimension > 8000) {\n\t\t\t\t\tsetStatus(labels.invalidDimension, 'error');\n\t\t\t\t\tdimension.focus();\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tsubmit.disabled = true;\n\t\t\t\tsubmit.textContent = labels.processing;\n\t\t\t\tsetStatus(labels.processing, '');\n\t\t\t\tclearResult();\n\n\t\t\t\tlet decoded = null;\n\t\t\t\ttry {\n\t\t\t\t\tdecoded = await loadImage(currentFile);\n\t\t\t\t\tif (!decoded.width || !decoded.height || decoded.width * decoded.height > maxPixels) {\n\t\t\t\t\t\tthrow new RangeError('pixels');\n\t\t\t\t\t}\n\n\t\t\t\t\tconst scale = Math.min(1, maxDimension \/ Math.max(decoded.width, decoded.height));\n\t\t\t\t\tconst outputWidth = Math.max(1, Math.round(decoded.width * scale));\n\t\t\t\t\tconst outputHeight = Math.max(1, Math.round(decoded.height * scale));\n\t\t\t\t\tconst canvas = document.createElement('canvas');\n\t\t\t\t\tcanvas.width = outputWidth;\n\t\t\t\t\tcanvas.height = outputHeight;\n\t\t\t\t\tconst context = canvas.getContext('2d', { alpha: true });\n\t\t\t\t\tif (!context) throw new Error('canvas');\n\t\t\t\t\tcontext.imageSmoothingEnabled = true;\n\t\t\t\t\tcontext.imageSmoothingQuality = 'high';\n\t\t\t\t\tcontext.drawImage(decoded.source, 0, 0, outputWidth, outputHeight);\n\n\t\t\t\t\tresultBlob = await canvasToWebP(canvas, Number(quality.value) \/ 100);\n\t\t\t\t\tresultUrl = URL.createObjectURL(resultBlob);\n\t\t\t\t\tconst savings = (1 - resultBlob.size \/ currentFile.size) * 100;\n\t\t\t\t\tconst outputName = safeBaseName(currentFile.name) + '-optimized.webp';\n\t\t\t\t\tconst changeText = Math.abs(savings) < 0.05\n\t\t\t\t\t\t? labels.noChange\n\t\t\t\t\t\t: Math.abs(savings).toFixed(1) + '% ' + (savings >= 0 ? labels.smaller : labels.largerWord);\n\n\t\t\t\t\tpreview.src = resultUrl;\n\t\t\t\t\tpreview.alt = outputName + ' preview';\n\t\t\t\t\troot.querySelector('[data-metric=\"original-size\"]').textContent = formatBytes(currentFile.size);\n\t\t\t\t\troot.querySelector('[data-metric=\"output-size\"]').textContent = formatBytes(resultBlob.size);\n\t\t\t\t\troot.querySelector('[data-metric=\"savings\"]').textContent = changeText;\n\t\t\t\t\troot.querySelector('[data-metric=\"dimensions\"]').textContent = outputWidth + ' \u00d7 ' + outputHeight + ' px';\n\t\t\t\t\tdownload.href = resultUrl;\n\t\t\t\t\tdownload.download = outputName;\n\t\t\t\t\tresultSummary = [\n\t\t\t\t\t\tlabels.original + ': ' + formatBytes(currentFile.size) + ' \u00b7 ' + decoded.width + ' \u00d7 ' + decoded.height + ' px',\n\t\t\t\t\t\tlabels.output + ': ' + formatBytes(resultBlob.size) + ' \u00b7 ' + outputWidth + ' \u00d7 ' + outputHeight + ' px',\n\t\t\t\t\t\tlabels.sizeChange + ': ' + changeText\n\t\t\t\t\t].join('\\n');\n\n\t\t\t\t\tempty.hidden = true;\n\t\t\t\t\tresult.hidden = false;\n\t\t\t\t\tresultNote.classList.toggle('is-visible', savings < 0);\n\t\t\t\t\tsetStatus(savings < 0 ? labels.larger : labels.ready, savings < 0 ? 'warning' : '');\n\t\t\t\t} catch (error) {\n\t\t\t\t\tclearResult();\n\t\t\t\t\tsetStatus(error instanceof RangeError ? labels.tooManyPixels : labels.failed, 'error');\n\t\t\t\t} finally {\n\t\t\t\t\tif (decoded && decoded.cleanup) decoded.cleanup();\n\t\t\t\t\tsubmit.disabled = false;\n\t\t\t\t\tsubmit.textContent = labels.button;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tasync function copySummary() {\n\t\t\t\tif (!resultSummary) return;\n\t\t\t\ttry {\n\t\t\t\t\tif (navigator.clipboard && window.isSecureContext) {\n\t\t\t\t\t\tawait navigator.clipboard.writeText(resultSummary);\n\t\t\t\t\t} else {\n\t\t\t\t\t\tconst helper = document.createElement('textarea');\n\t\t\t\t\t\thelper.value = resultSummary;\n\t\t\t\t\t\thelper.setAttribute('readonly', '');\n\t\t\t\t\t\thelper.style.position = 'fixed';\n\t\t\t\t\t\thelper.style.opacity = '0';\n\t\t\t\t\t\tdocument.body.appendChild(helper);\n\t\t\t\t\t\thelper.select();\n\t\t\t\t\t\tif (!document.execCommand('copy')) throw new Error('copy');\n\t\t\t\t\t\thelper.remove();\n\t\t\t\t\t}\n\t\t\t\t\tsetStatus(labels.copied, '');\n\t\t\t\t} catch (error) {\n\t\t\t\t\tsetStatus(labels.copyError, 'error');\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tfunction resetTool() {\n\t\t\t\tclearResult();\n\t\t\t\tform.reset();\n\t\t\t\tcurrentFile = null;\n\t\t\t\tfileInput.value = '';\n\t\t\t\tselected.textContent = '';\n\t\t\t\tselected.classList.remove('is-visible');\n\t\t\t\tqualityValue.textContent = quality.value;\n\t\t\t\tsetStatus(labels.reset, '');\n\t\t\t}\n\n\t\t\tquality.addEventListener('input', function () {\n\t\t\t\tqualityValue.textContent = quality.value;\n\t\t\t});\n\t\t\tfileInput.addEventListener('change', function () {\n\t\t\t\tselectFile(fileInput.files && fileInput.files[0] ? fileInput.files[0] : null);\n\t\t\t});\n\t\t\t['dragenter', 'dragover'].forEach(function (eventName) {\n\t\t\t\tdropZone.addEventListener(eventName, function (event) {\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\tdropZone.classList.add('is-dragging');\n\t\t\t\t});\n\t\t\t});\n\t\t\t['dragleave', 'drop'].forEach(function (eventName) {\n\t\t\t\tdropZone.addEventListener(eventName, function (event) {\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\tdropZone.classList.remove('is-dragging');\n\t\t\t\t});\n\t\t\t});\n\t\t\tdropZone.addEventListener('drop', function (event) {\n\t\t\t\tconst file = event.dataTransfer && event.dataTransfer.files ? event.dataTransfer.files[0] : null;\n\t\t\t\tselectFile(file);\n\t\t\t});\n\t\t\tform.addEventListener('submit', function (event) {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tprocessImage();\n\t\t\t});\n\t\t\tdownload.addEventListener('click', function () {\n\t\t\t\tif (resultBlob) setStatus(labels.downloaded, '');\n\t\t\t});\n\t\t\troot.querySelector('[data-action=\"copy\"]').addEventListener('click', copySummary);\n\t\t\troot.querySelector('[data-action=\"reset\"]').addEventListener('click', resetTool);\n\t\t\twindow.addEventListener('pagehide', function () {\n\t\t\t\tif (resultUrl) URL.revokeObjectURL(resultUrl);\n\t\t\t}, { once: true });\n\t\t})();\n\t\t<\/script>\n\t<\/main>\n\t\n","protected":false},"excerpt":{"rendered":"<p>Comprimi le immagini di prodotti, campagne e siti web nel tuo browser, convertil\u0435 in WebP e scarica file pi\u00f9 leggeri pronti per la pubblicazione.<\/p>","protected":false},"featured_media":9691,"template":"","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"disabled","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"spectra_gs_classes":"[\"\"]"},"tool_categories":[33,50],"class_list":["post-9689","tools","type-tools","status-publish","has-post-thumbnail","hentry","tool_categories-content-creation","tool_categories-marketing-content-utilities"],"spectra_custom_meta":{"spectra_gs_classes":["[\"\"]"],"rank_math_internal_links_processed":["1"],"site-post-title":["disabled"],"ast-breadcrumbs-content":["disabled"],"_thumbnail_id":["9691"],"rank_math_title":["%title% %sep% %sitename%"],"rank_math_description":["%excerpt%"],"rank_math_robots":["a:2:{i:0;s:5:\"index\";i:1;s:6:\"follow\";}"],"rank_math_facebook_image":["https:\/\/tradegoai.app\/wp-content\/uploads\/2026\/07\/image-compressor-webp-converter-social-share.webp"],"rank_math_facebook_image_id":["9691"],"rank_math_twitter_use_facebook":["on"],"rank_math_twitter_card_type":["summary_large_image"],"rank_math_schema_SoftwareApplication":["a:7:{s:5:\"@type\";s:19:\"SoftwareApplication\";s:4:\"name\";s:33:\"Image Compressor & WebP Converter\";s:11:\"description\";s:130:\"Compress product, campaign, and website images in your browser, convert them to WebP, and download smaller files ready to publish.\";s:3:\"url\";s:60:\"https:\/\/tradegoai.app\/tools\/image-compressor-webp-converter\/\";s:19:\"applicationCategory\";s:21:\"MultimediaApplication\";s:15:\"operatingSystem\";s:11:\"Web Browser\";s:6:\"offers\";a:3:{s:5:\"@type\";s:5:\"Offer\";s:5:\"price\";s:1:\"0\";s:13:\"priceCurrency\";s:3:\"USD\";}}"],"wp_statistics_words_count":["1"],"astra_style_timestamp_css":["1787216032"],"_uag_page_assets":["a:9:{s:3:\"css\";s:4963:\".uag-blocks-common-selector{z-index:var(--z-index-desktop) !important}@media (max-width: 976px){.uag-blocks-common-selector{z-index:var(--z-index-tablet) !important}}@media (max-width: 767px){.uag-blocks-common-selector{z-index:var(--z-index-mobile) !important}}\n.uagb-icon-list__wrap{display:flex;align-items:flex-start;justify-content:flex-start}.wp-block-uagb-icon-list-child{padding:0;transition:all 0.2s;display:inline-flex;color:#3a3a3a;align-items:center;text-decoration:none;box-shadow:none}.wp-block-uagb-icon-list-child span.uagb-icon-list__source-wrap{display:block;align-items:center}.uagb-icon-list__source-wrap svg{display:block}.uagb-icon-list__source-image{width:40px}.uagb-icon-list__outer-wrap .uagb-icon-list__content-wrap{color:#3a3a3a;display:flex;align-items:center}\n.wp-block-uagb-icon-list-child{position:relative}.wp-block-uagb-icon-list-child>a{position:absolute;top:0;left:0;width:100%;height:100%}img.uagb-icon-list__source-image{max-width:unset}.wp-block-uagb-icon-list-child .uagb-icon-list__label{word-break:break-word}\n.wp-block-uagb-icon-list.uagb-block-b5768981 .uagb-icon-list__source-image{width: 16px;}.wp-block-uagb-icon-list.uagb-block-b5768981 .wp-block-uagb-icon-list-child .uagb-icon-list__source-wrap svg{width: 16px;height: 16px;font-size: 16px;}.wp-block-uagb-icon-list.uagb-block-b5768981 .wp-block-uagb-icon-list-child .uagb-icon-list__source-wrap{padding: 0px;border-radius: 0px;border-width: 0px;align-self: center;}.wp-block-uagb-icon-list.uagb-block-b5768981 .wp-block-uagb-icon-list-child .uagb-icon-list__label{text-decoration: !important;font-weight: 600;line-height: em;}.wp-block-uagb-icon-list.uagb-block-b5768981 .uagb-icon-list__wrap{display: flex;flex-direction: column;justify-content: center;-webkit-box-pack: center;-ms-flex-pack: center;-webkit-box-align: flex-start;-ms-flex-align: flex-start;align-items: flex-start;margin-top: 30px;margin-right: 0px;margin-bottom: 0px;margin-left: 0px;padding-top: 0px;padding-right: 0px;padding-bottom: 0px;padding-left: 0px;}.wp-block-uagb-icon-list.uagb-block-b5768981 .uagb-icon-list__label{text-align: left;}.wp-block-uagb-icon-list.uagb-block-b5768981 .wp-block-uagb-icon-list-child{text-decoration: !important;font-weight: 600;line-height: em;}.wp-block-uagb-icon-list.uagb-block-b5768981.wp-block-uagb-icon-list .wp-block-uagb-icon-list-child{margin-left: 0;margin-right: 0;margin-bottom: 10px;}.wp-block-uagb-icon-list.uagb-block-b5768981 .uagb-icon-list__source-wrap{margin-right: 15px;}.uagb-block-75fa870d.wp-block-uagb-icon-list-child .uagb-icon-list__source-wrap{background:  !important;border-color:  !important;}.uagb-block-75fa870d.wp-block-uagb-icon-list-child:hover .uagb-icon-list__source-wrap{background:  !important;border-color:  !important;}.uagb-block-5bf81fd2.wp-block-uagb-icon-list-child .uagb-icon-list__source-wrap{background:  !important;border-color:  !important;}.uagb-block-5bf81fd2.wp-block-uagb-icon-list-child:hover .uagb-icon-list__source-wrap{background:  !important;border-color:  !important;}@media only screen and (max-width: 976px) {.wp-block-uagb-icon-list.uagb-block-b5768981 .uagb-icon-list__source-image{width: 16px;}.wp-block-uagb-icon-list.uagb-block-b5768981 .wp-block-uagb-icon-list-child .uagb-icon-list__source-wrap svg{width: 16px;height: 16px;font-size: 16px;}.wp-block-uagb-icon-list.uagb-block-b5768981 .wp-block-uagb-icon-list-child .uagb-icon-list__source-wrap {padding: 0px;border-width: 0px;align-self: center;}.wp-block-uagb-icon-list.uagb-block-b5768981 .uagb-icon-list__wrap{display: flex;flex-direction: column;justify-content: center;-webkit-box-pack: center;-ms-flex-pack: center;-webkit-box-align: flex-start;-ms-flex-align: flex-start;align-items: flex-start;}.wp-block-uagb-icon-list.uagb-block-b5768981 .uagb-icon-list__label{text-align: left;}.wp-block-uagb-icon-list.uagb-block-b5768981.wp-block-uagb-icon-list .wp-block-uagb-icon-list-child{margin-left: 0;margin-right: 0;margin-bottom: 10px;}}@media only screen and (max-width: 767px) {.wp-block-uagb-icon-list.uagb-block-b5768981 .uagb-icon-list__source-image{width: 16px;}.wp-block-uagb-icon-list.uagb-block-b5768981 .uagb-icon-list__label{text-align: center;}.wp-block-uagb-icon-list.uagb-block-b5768981 .wp-block-uagb-icon-list-child .uagb-icon-list__source-wrap svg{width: 16px;height: 16px;font-size: 16px;}.wp-block-uagb-icon-list.uagb-block-b5768981 .wp-block-uagb-icon-list-child .uagb-icon-list__source-wrap{padding: 0px;border-width: 0px;align-self: center;}.wp-block-uagb-icon-list.uagb-block-b5768981 .uagb-icon-list__wrap{display: flex;flex-direction: column;justify-content: center;-webkit-box-pack: center;-ms-flex-pack: center;-webkit-box-align: center;-ms-flex-align: center;align-items: center;margin-top: 0px;margin-right: 0px;margin-bottom: 0px;margin-left: 0px;}.wp-block-uagb-icon-list.uagb-block-b5768981.wp-block-uagb-icon-list .wp-block-uagb-icon-list-child{margin-left: 0;margin-right: 0;margin-bottom: 10px;}}\";s:2:\"js\";s:0:\"\";s:18:\"current_block_list\";a:10:{i:0;s:11:\"core\/search\";i:1;s:10:\"core\/group\";i:2;s:12:\"core\/heading\";i:3;s:17:\"core\/latest-posts\";i:4;s:20:\"core\/latest-comments\";i:5;s:13:\"core\/archives\";i:6;s:15:\"core\/categories\";i:7;s:14:\"uagb\/icon-list\";i:8;s:20:\"uagb\/icon-list-child\";i:9;s:14:\"core\/shortcode\";}s:8:\"uag_flag\";b:1;s:11:\"uag_version\";s:10:\"1787709447\";s:6:\"gfonts\";a:0:{}s:10:\"gfonts_url\";s:0:\"\";s:12:\"gfonts_files\";a:0:{}s:14:\"uag_faq_layout\";b:0;}"],"_uag_css_file_name":["uag-css-9689.css"]},"uagb_featured_image_src":{"full":["https:\/\/tradegoai.app\/wp-content\/uploads\/2026\/07\/image-compressor-webp-converter-social-share.webp",1200,630,false],"thumbnail":["https:\/\/tradegoai.app\/wp-content\/uploads\/2026\/07\/image-compressor-webp-converter-social-share-150x150.webp",150,150,true],"medium":["https:\/\/tradegoai.app\/wp-content\/uploads\/2026\/07\/image-compressor-webp-converter-social-share-300x158.webp",300,158,true],"medium_large":["https:\/\/tradegoai.app\/wp-content\/uploads\/2026\/07\/image-compressor-webp-converter-social-share-768x403.webp",768,403,true],"large":["https:\/\/tradegoai.app\/wp-content\/uploads\/2026\/07\/image-compressor-webp-converter-social-share-1024x538.webp",1024,538,true],"1536x1536":["https:\/\/tradegoai.app\/wp-content\/uploads\/2026\/07\/image-compressor-webp-converter-social-share.webp",1200,630,false],"2048x2048":["https:\/\/tradegoai.app\/wp-content\/uploads\/2026\/07\/image-compressor-webp-converter-social-share.webp",1200,630,false],"trp-custom-language-flag":["https:\/\/tradegoai.app\/wp-content\/uploads\/2026\/07\/image-compressor-webp-converter-social-share-18x9.webp",18,9,true]},"uagb_author_info":{"display_name":"","author_link":"https:\/\/tradegoai.app\/it\/author\/"},"uagb_comment_info":0,"uagb_excerpt":"Compress product, campaign, and website images in your browser, convert them to WebP, and download smaller files ready to publish.","_links":{"self":[{"href":"https:\/\/tradegoai.app\/it\/wp-json\/wp\/v2\/tools\/9689","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tradegoai.app\/it\/wp-json\/wp\/v2\/tools"}],"about":[{"href":"https:\/\/tradegoai.app\/it\/wp-json\/wp\/v2\/types\/tools"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tradegoai.app\/it\/wp-json\/wp\/v2\/media\/9691"}],"wp:attachment":[{"href":"https:\/\/tradegoai.app\/it\/wp-json\/wp\/v2\/media?parent=9689"}],"wp:term":[{"taxonomy":"tool_categories","embeddable":true,"href":"https:\/\/tradegoai.app\/it\/wp-json\/wp\/v2\/tool_categories?post=9689"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}