{"id":1760,"date":"2025-08-26T16:06:42","date_gmt":"2025-08-26T16:06:42","guid":{"rendered":"https:\/\/poxiro.com\/?page_id=1760"},"modified":"2025-10-12T15:13:54","modified_gmt":"2025-10-12T15:13:54","slug":"online-image-compressor","status":"publish","type":"page","link":"https:\/\/poxiro.com\/en_gb\/online-image-compressor\/","title":{"rendered":"online-image-compressor"},"content":{"rendered":"\n

Online Image Compressor \u2013 Reduce Image Size Quickly Without Losing Quality<\/h1>\n\n\n\n\n\n\n\n\nImage Compression Tool<\/title>\n<style>\n:root {\n --primary-color: #4361ee;\n --secondary-color: #3a0ca3;\n --bg-color: #f8f9fa;\n --text-color: #333;\n --card-bg: #fff;\n --border-color: #dee2e6;\n --shadow: 0 4px 6px rgba(0,0,0,0.1);\n --transition: all 0.3s ease;\n}\n* { margin:0; padding:0; box-sizing:border-box; transition: var(--transition);}\nbody { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: var(--bg-color); color: var(--text-color); padding: 20px; }\n.container { max-width: 1000px; margin: 0 auto; }\nheader { text-align: center; margin-bottom: 30px; }\nh1 { color: var(--primary-color); margin-bottom: 10px; }\n.description { color: var(--text-color); opacity: 0.8; margin-bottom: 20px; }\n.converter-card { background-color: var(--card-bg); border-radius:12px; padding:30px; box-shadow: var(--shadow); text-align: center; }\n.upload-area { border:2px dashed var(--border-color); border-radius:8px; padding:40px 20px; cursor:pointer; margin-bottom:20px; }\n.upload-area.active { border-color: var(--primary-color); background-color: rgba(67,97,238,0.05); }\n.convert-btn { background-color: var(--primary-color); color:white; border:none; padding:12px 24px; font-size:16px; border-radius:6px; cursor:pointer; margin:10px auto; display:block; font-weight:bold; max-width:250px; }\n.convert-btn:disabled { background-color: var(--border-color); cursor:not-allowed; }\n.progress-bar { height:10px; background-color:#e9ecef; border-radius:5px; overflow:hidden; margin-top:20px; }\n.progress { height:100%; background-color:green; width:0%; transition:width 0.3s ease; }\n.image-container { display:flex; justify-content: space-between; margin-top: 20px; gap: 20px; flex-wrap: wrap;}\n.image-wrapper { flex: 1; min-width: 300px; text-align: center; }\n.image-wrapper img { max-width: 100%; max-height: 300px; border:1px solid var(--border-color); border-radius:8px; object-fit: contain; }\n.error-message { color:red; text-align:center; margin-top:10px; display:none; }\n<\/style>\n<\/head>\n<body>\n<div class=\"container\">\n<header>\n <h1>Image Compression Tool<\/h1>\n <p class=\"description\">Compress your images online quickly and efficiently. Compare original vs compressed images.<\/p>\n<\/header>\n\n<div class=\"converter-card\">\n <div class=\"upload-area\" id=\"uploadArea\">Drag & drop your image here or click to select<\/div>\n <input type=\"file\" id=\"fileInput\" accept=\"image\/\" style=\"display:none;\">\n <button id=\"convertBtn\" class=\"convert-btn\" disabled>Compress Image<\/button>\n <div class=\"progress-bar\"><div class=\"progress\" id=\"progress\"><\/div><\/div>\n <div class=\"image-container\">\n <div class=\"image-wrapper\">\n <h4>Original Image<\/h4>\n <img id=\"originalImage\" alt=\"Original Image\">\n <\/div>\n <div class=\"image-wrapper\">\n <h4>Compressed Image<\/h4>\n <img id=\"compressedImage\" alt=\"Compressed Image\">\n <a id=\"downloadLink\" href=\"#\" download class=\"convert-btn\" style=\"margin-top:10px;\">Download<\/a>\n <p id=\"compressionInfo\"><\/p>\n <\/div>\n <\/div>\n <button id=\"resetBtn\" class=\"convert-btn\" style=\"background:#e53935;display:none;\">Reset Tool<\/button>\n <div class=\"error-message\" id=\"errorMessage\"><\/div>\n<\/div>\n<\/div>\n\n<script>\nconst uploadArea = document.getElementById('uploadArea');\nconst fileInput = document.getElementById('fileInput');\nconst convertBtn = document.getElementById('convertBtn');\nconst resetBtn = document.getElementById('resetBtn');\nconst progress = document.getElementById('progress');\nconst originalImage = document.getElementById('originalImage');\nconst compressedImage = document.getElementById('compressedImage');\nconst downloadLink = document.getElementById('downloadLink');\nconst compressionInfo = document.getElementById('compressionInfo');\nconst errorMessage = document.getElementById('errorMessage');\n\nlet selectedFile = null;\n\n\/\/ Upload handlers\nuploadArea.addEventListener('click', ()=> fileInput.click());\nfileInput.addEventListener('change', handleFile);\nuploadArea.addEventListener('dragover', e => { e.preventDefault(); uploadArea.classList.add('active'); });\nuploadArea.addEventListener('dragleave', ()=> uploadArea.classList.remove('active'));\nuploadArea.addEventListener('drop', e => {\n e.preventDefault(); uploadArea.classList.remove('active');\n if(e.dataTransfer.files.length){ \n fileInput.files = e.dataTransfer.files;\n handleFile();\n }\n});\n\nfunction handleFile(){\n if(fileInput.files.length){\n selectedFile = fileInput.files[0];\n convertBtn.disabled = false;\n uploadArea.textContent = selectedFile.name;\n const reader = new FileReader();\n reader.onload = e => originalImage.src = e.target.result;\n reader.readAsDataURL(selectedFile);\n }\n}\n\n\/\/ Compress image\nconvertBtn.addEventListener('click', () => {\n if(!selectedFile) return;\n convertBtn.disabled = true;\n convertBtn.textContent = \"Compressing...\";\n errorMessage.style.display = 'none';\n progress.style.width = '30%';\n\n const reader = new FileReader();\n reader.onload = e => {\n const img = new Image();\n img.src = e.target.result;\n img.onload = () => {\n const canvas = document.createElement('canvas');\n const maxWidth = 800;\n const scale = img.width > maxWidth ? maxWidth \/ img.width : 1;\n canvas.width = img.width scale;\n canvas.height = img.height * scale;\n const ctx = canvas.getContext('2d');\n ctx.drawImage(img,0,0,canvas.width,canvas.height);\n\n \/\/ keep original extension\n const extension = selectedFile.name.split('.').pop().toLowerCase();\n const format = extension === \"png\" ? \"image\/png\" : extension === \"webp\" ? \"image\/webp\" : \"image\/jpeg\";\n let quality = 0.5; \/\/ stronger compression\n\n canvas.toBlob(blob => {\n const url = URL.createObjectURL(blob);\n compressedImage.src = url;\n downloadLink.href = url;\n downloadLink.download = selectedFile.name.replace(\/\\.[^\/.]+$\/,\"\") + \".\" + extension;\n\n const originalKB = (selectedFile.size\/1024).toFixed(2);\n const compressedKB = (blob.size\/1024).toFixed(2);\n const reduction = Math.max(0, Math.round(100 - (blob.size\/selectedFile.size)*100));\n compressionInfo.textContent = `Original: ${originalKB} KB | Compressed: ${compressedKB} KB | Reduced: ${reduction}%`;\n\n progress.style.width = '100%';\n convertBtn.textContent = \"Compress Image\";\n convertBtn.disabled = false;\n resetBtn.style.display = \"block\";\n }, format, quality);\n };\n };\n reader.readAsDataURL(selectedFile);\n});\n\n\/\/ Reset tool\nresetBtn.addEventListener('click', () => {\n fileInput.value = \"\";\n selectedFile = null;\n originalImage.src = \"\";\n compressedImage.src = \"\";\n compressionInfo.textContent = \"\";\n downloadLink.href = \"#\";\n convertBtn.disabled = true;\n uploadArea.textContent = \"Drag & drop your image here or click to select\";\n progress.style.width = \"0%\";\n resetBtn.style.display = \"none\";\n});\n<\/script>\n<\/body>\n<\/html>\n\n\n\n<div style=\"height:67px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n\n<section class=\"tool-content\">\n <div class=\"content-wrapper\">\n <h2>Free Online Image Compressor<\/h2>\n <p class=\"intro\">\n Compress your images instantly without losing quality. \n This online tool helps you reduce file size, improve website speed, \n and save storage space. Works with <strong>JPG, PNG, and WebP<\/strong> formats.\n <\/p>\n\n \n <div class=\"benefits\">\n <h3>Why Use Our Image Compression Tool?<\/h3>\n <ul>\n <li> <strong>Fast:<\/strong> Instant compression in seconds.<\/li>\n <li> <strong>Reduce File Size:<\/strong> Up to 70% smaller images.<\/li>\n <li> <strong>SEO Friendly:<\/strong> Boost your website speed & ranking.<\/li>\n <li> <strong>Multiple Formats:<\/strong> Save as JPG, PNG, or WebP.<\/li>\n <\/ul>\n <\/div>\n\n \n <div class=\"faq\">\n <h3>Frequently Asked Questions<\/h3>\n\n <details>\n <summary>Is the compression really lossless?<\/summary>\n <p>Yes! Our tool uses smart algorithms to keep your images sharp and clear while reducing the file size.<\/p>\n <\/details>\n\n <details>\n <summary>Which image formats are supported?<\/summary>\n <p>We currently support <strong>JPG, PNG, and WebP<\/strong>. More formats will be added soon.<\/p>\n <\/details>\n\n <details>\n <summary>Do I need to install any software?<\/summary>\n <p>No! Everything is done online directly in your browser.<\/p>\n <\/details>\n <\/div>\n\n \n <div class=\"cta-box\">\n <h3>Ready to Optimize Your Images?<\/h3>\n <p>Upload your images above and get fast, high-quality compression for free.<\/p>\n <a href=\"#image-compressor\" class=\"cta-btn\">Start Now<\/a>\n <\/div>\n <\/div>\n<\/section>\n\n\n<style>\n.tool-content {\n font-family: \"Segoe UI\", Tahoma, Geneva, Verdana, sans-serif;\n padding: 50px 20px;\n background: #f9fafb;\n color: #333;\n line-height: 1.7;\n}\n\n.content-wrapper {\n max-width: 900px;\n margin: auto;\n}\n\n.tool-content h2 {\n font-size: 2rem;\n margin-bottom: 15px;\n text-align: center;\n color: #222;\n}\n\n.tool-content .intro {\n font-size: 1.1rem;\n text-align: center;\n margin-bottom: 40px;\n color: #555;\n}\n\n.benefits h3,\n.faq h3 {\n margin-top: 30px;\n font-size: 1.4rem;\n color: #111;\n}\n\n.benefits ul {\n margin: 20px 0;\n padding-left: 20px;\n}\n\n.benefits li {\n margin-bottom: 10px;\n font-size: 1rem;\n}\n\n.faq details {\n background: #fff;\n padding: 12px 18px;\n margin: 10px 0;\n border-radius: 8px;\n border: 1px solid #ddd;\n transition: all 0.3s ease;\n}\n\n.faq details:hover {\n box-shadow: 0 3px 10px rgba(0,0,0,0.08);\n}\n\n.faq summary {\n cursor: pointer;\n font-weight: bold;\n}\n\n.cta-box {\n margin-top: 50px;\n padding: 30px;\n background: linear-gradient(135deg, #007bff, #0056b3);\n color: #fff;\n text-align: center;\n border-radius: 12px;\n animation: fadeInUp 1s ease-in-out;\n}\n\n.cta-box h3 {\n margin-bottom: 10px;\n font-size: 1.5rem;\n}\n\n.cta-btn {\n display: inline-block;\n margin-top: 15px;\n padding: 12px 25px;\n background: #fff;\n color: #0056b3;\n font-weight: bold;\n border-radius: 30px;\n text-decoration: none;\n transition: 0.3s;\n}\n\n.cta-btn:hover {\n background: #f1f1f1;\n}\n\n@keyframes fadeInUp {\n from {\n opacity: 0;\n transform: translateY(30px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n<\/style>\n","protected":false},"excerpt":{"rendered":"<p>Online Image Compressor \u2013 Reduce Image Size Quickly Without Losing Quality Image Compression Tool Image Compression Tool Compress your images online quickly and efficiently. Compare original vs compressed images. Drag & drop your image here or click to select Compress Image Original Image Compressed Image Download Reset Tool Free Online Image Compressor Compress your images […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","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":"","ast-breadcrumbs-content":"","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":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"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":""},"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":""}},"footnotes":""},"class_list":["post-1760","page","type-page","status-publish","hentry"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false,"trp-custom-language-flag":false},"uagb_author_info":{"display_name":"ar3508802@gmail.com","author_link":"https:\/\/poxiro.com\/en_gb\/author\/ar3508802gmail-com\/"},"uagb_comment_info":0,"uagb_excerpt":"Online Image Compressor \u2013 Reduce Image Size Quickly Without Losing Quality Image Compression Tool Image Compression Tool Compress your images online quickly and efficiently. Compare original vs compressed images. Drag & drop your image here or click to select Compress Image Original Image Compressed Image Download Reset Tool Free Online Image Compressor Compress your images…","_links":{"self":[{"href":"https:\/\/poxiro.com\/en_gb\/wp-json\/wp\/v2\/pages\/1760","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/poxiro.com\/en_gb\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/poxiro.com\/en_gb\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/poxiro.com\/en_gb\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/poxiro.com\/en_gb\/wp-json\/wp\/v2\/comments?post=1760"}],"version-history":[{"count":14,"href":"https:\/\/poxiro.com\/en_gb\/wp-json\/wp\/v2\/pages\/1760\/revisions"}],"predecessor-version":[{"id":1928,"href":"https:\/\/poxiro.com\/en_gb\/wp-json\/wp\/v2\/pages\/1760\/revisions\/1928"}],"wp:attachment":[{"href":"https:\/\/poxiro.com\/en_gb\/wp-json\/wp\/v2\/media?parent=1760"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}