{"id":1624,"date":"2024-12-15T20:19:08","date_gmt":"2024-12-15T14:49:08","guid":{"rendered":"http:\/\/localhost:10038\/?page_id=1624"},"modified":"2024-12-15T20:58:23","modified_gmt":"2024-12-15T15:28:23","slug":"free-online-imager-compression","status":"publish","type":"page","link":"https:\/\/epiction.co\/softworks\/free-online-imager-compression\/","title":{"rendered":"Free Online Image Compression Tool"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"1624\" class=\"elementor elementor-1624\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2d3f9fb e-flex e-con-boxed e-con e-parent\" data-id=\"2d3f9fb\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9bf4fd1 elementor-widget elementor-widget-spacer\" data-id=\"9bf4fd1\" data-element_type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fcd1f80 elementor-widget elementor-widget-shortcode\" data-id=\"fcd1f80\" data-element_type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-shortcode\">        <div class=\"advanced-image-compression-tool\">\n            <div class=\"compression-container\">\n                <h2>Image Compression Tool<\/h2>\n                \n                <form id=\"image-compression-form\" enctype=\"multipart\/form-data\">\n                    <div class=\"file-upload-container\">\n                        <div id=\"drop-box\" class=\"drop-box\">\n                            <p>Drag & Drop Image Here<\/p>\n                            <p>or<\/p>\n                            <input \n                                type=\"file\" \n                                id=\"image-input\" \n                                name=\"image\" \n                                accept=\"image\/*\" \n                                class=\"file-input\"\n                            \/>\n                            <label for=\"image-input\" class=\"file-input-label\">\n                                <span class=\"upload-icon\">\ud83d\udce4<\/span>\n                                <span class=\"upload-text\">Choose Image<\/span>\n                            <\/label>\n                        <\/div>\n                        <span id=\"file-name\" class=\"file-name\">No file selected<\/span>\n                    <\/div>\n    \n                    <div class=\"compression-settings\">\n                        <label for=\"compression-quality\">Compression Quality: <span id=\"quality-value\">70%<\/span><\/label>\n                        <input \n                            type=\"range\" \n                            id=\"compression-quality\" \n                            min=\"0\" \n                            max=\"1\" \n                            step=\"0.1\" \n                            value=\"0.7\" \n                            class=\"quality-slider\"\n                        \/>\n                    <\/div>\n    \n                    <button type=\"submit\" class=\"compress-button\" disabled>\n                        Compress Image\n                    <\/button>\n                <\/form>\n    \n                <div id=\"compression-result\" class=\"compression-result\">\n                    <div class=\"result-stats\">\n                        <p>Original Size: <span id=\"original-size\">-<\/span> KB<\/p>\n                        <p>Compressed Size: <span id=\"compressed-size\">-<\/span> KB<\/p>\n                        <p>Size Reduction: <span id=\"size-reduction\">-<\/span>%<\/p>\n                    <\/div>\n                    <div id=\"download-container\" class=\"download-container\" style=\"display:none;\">\n                        <a href=\"#\" id=\"download-link\" class=\"download-link\">\n                            Download Compressed Image\n                        <\/a>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n    \n        <script>\n        (function($) {\n            $(document).ready(function() {\n                const $dropBox = $('#drop-box');\n                const $fileInput = $('#image-input');\n                const $fileName = $('#file-name');\n                const $compressButton = $('.compress-button');\n                const $qualitySlider = $('#compression-quality');\n                const $qualityValue = $('#quality-value');\n                \n                \/\/ Drag and drop events\n                $dropBox.on('dragover', function(e) {\n                    e.preventDefault();\n                    e.stopPropagation();\n                    $(this).addClass('dragging');\n                });\n    \n                $dropBox.on('dragleave', function(e) {\n                    e.preventDefault();\n                    e.stopPropagation();\n                    $(this).removeClass('dragging');\n                });\n    \n                $dropBox.on('drop', function(e) {\n                    e.preventDefault();\n                    e.stopPropagation();\n                    $(this).removeClass('dragging');\n    \n                    const files = e.originalEvent.dataTransfer.files;\n                    if (files && files.length > 0) {\n                        const file = files[0];\n                        $fileName.text(file.name);\n                        $compressButton.prop('disabled', false);\n                        $fileInput[0].files = e.originalEvent.dataTransfer.files; \/\/ Attach the dropped files to the file input\n                    }\n                });\n    \n                \/\/ File input change handler\n                $fileInput.on('change', function() {\n                    const file = this.files[0];\n                    if (file) {\n                        $fileName.text(file.name);\n                        $compressButton.prop('disabled', false);\n                    }\n                });\n    \n                \/\/ Quality slider handler\n                $qualitySlider.on('input', function() {\n                    $qualityValue.text(Math.round(this.value * 100) + '%');\n                });\n    \n                \/\/ Form submission handler\n                $('#image-compression-form').on('submit', function(e) {\n                    e.preventDefault();\n                    const file = $fileInput[0].files[0];\n                    const quality = $qualitySlider.val();\n    \n                    if (!file) return;\n    \n                    const reader = new FileReader();\n                    reader.onload = function(event) {\n                        const img = new Image();\n                        img.onload = function() {\n                            const canvas = document.createElement('canvas');\n                            const ctx = canvas.getContext('2d');\n                            \n                            \/\/ Smart resizing\n                            const MAX_WIDTH = 1920;\n                            const MAX_HEIGHT = 1080;\n                            let width = img.width;\n                            let height = img.height;\n    \n                            if (width > height) {\n                                if (width > MAX_WIDTH) {\n                                    height *= MAX_WIDTH \/ width;\n                                    width = MAX_WIDTH;\n                                }\n                            } else {\n                                if (height > MAX_HEIGHT) {\n                                    width *= MAX_HEIGHT \/ height;\n                                    height = MAX_HEIGHT;\n                                }\n                            }\n    \n                            canvas.width = width;\n                            canvas.height = height;\n                            ctx.drawImage(img, 0, 0, width, height);\n    \n                            canvas.toBlob(function(blob) {\n                                const originalSize = file.size \/ 1024;\n                                const compressedSize = blob.size \/ 1024;\n                                const reduction = ((originalSize - compressedSize) \/ originalSize * 100).toFixed(2);\n    \n                                $('#original-size').text(originalSize.toFixed(2));\n                                $('#compressed-size').text(compressedSize.toFixed(2));\n                                $('#size-reduction').text(reduction);\n    \n                                const url = URL.createObjectURL(blob);\n                                const $downloadLink = $('#download-link');\n                                $downloadLink.attr('href', url);\n                                $downloadLink.attr('download', 'compressed_' + file.name);\n                                $('#download-container').show();\n                            }, 'image\/jpeg', quality);\n                        };\n                        img.src = event.target.result;\n                    };\n                    reader.readAsDataURL(file);\n                });\n            });\n        })(jQuery);\n        <\/script>\n    \n        <style>\n            .drop-box {\n                border: 2px dashed #cccccc;\n                padding: 20px;\n                text-align: center;\n                margin-bottom: 15px;\n                border-radius: 10px;\n                transition: border-color 0.3s ease;\n            }\n            .drop-box.dragging {\n                border-color: #0073a0;\n                background-color: #f1f8ff;\n            }\n            .drop-box p {\n                margin: 10px 0;\n                color: #666;\n            }\n        <\/style>\n        <\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-9f7a30b e-flex e-con-boxed e-con e-parent\" data-id=\"9f7a30b\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-27a6024 elementor-widget elementor-widget-spacer\" data-id=\"27a6024\" data-element_type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c9f3f37 elementor-widget elementor-widget-text-editor\" data-id=\"c9f3f37\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<h3><strong>Free Image Compression Tool Online<\/strong><\/h3><p>Effortlessly compress images without losing quality. Drag and drop images or upload from your device to reduce file sizes. Optimize JPEG, PNG, and other formats for web, email, or storage. Adjustable compression settings ensure high-quality visuals with reduced sizes.<\/p><p>Compress your images quickly and efficiently with our advanced image compression tool. Reduce file sizes for faster website load times, easier sharing, and more efficient storage. Our tool supports drag-and-drop functionality, customizable compression levels, and compatibility with popular formats like JPEG, PNG, and WebP.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-40df61f e-flex e-con-boxed e-con e-parent\" data-id=\"40df61f\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-616652e elementor-widget elementor-widget-spacer\" data-id=\"616652e\" data-element_type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-608f728 elementor-widget elementor-widget-digtek-heading-title-widget\" data-id=\"608f728\" data-element_type=\"widget\" data-widget_type=\"digtek-heading-title-widget.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\r\n\t\r\n\r\n<div class=\"section-title-area\">\r\n\t<div class=\"section-title\">\r\n\t\t\t\t<div class=\"sub-title wow fadeInUp\">\r\n\t\t\t<span>Sponsored<\/span>\r\n\t\t<\/div>\r\n\t\t\t\t\t<\/div>\r\n\t<\/div>\r\n\r\n\t\r\n\r\n             \r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2819e62 elementor-widget-mobile__width-initial elementor-hidden-tablet elementor-hidden-mobile elementor-widget elementor-widget-digtek-image-cta-widget\" data-id=\"2819e62\" data-element_type=\"widget\" data-widget_type=\"digtek-image-cta-widget.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\r\n\t<section class=\"cta-counter-section fix section-padding pt-0\">\r\n\t\t<div class=\"bg-shape\">\r\n\t\t\t\t<\/div>\r\n\t\t<div class=\"container\">\r\n\t\t\t<div class=\"cta-counter-wrapper bg-cover\" style=\"background-image: url('https:\/\/epiction.co\/softworks\/wp-content\/uploads\/2024\/12\/Tosca-White-Memphis-Vector-Business-Agency-Video-2.gif');\">\r\n\t\t\t\t<div class=\"shape-img\">\r\n\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t<div class=\"counter-box-area\">\r\n\t\t\t\t\t\t\t\t\t\t<div class=\"counter-text wow fadeInUp\" data-wow-delay=\".3s\">\r\n\t\t\t\t\t\t<h2>\r\n\t\t\t\t\t\t\tGet professional help for your business\t\t\t\t\t\t<\/h2>\r\n\t\t\t\t\t\t<p>\n\n\u2705 Web development \u2705 Ecommerce \u2705 Optimization + many more<\/p>\r\n\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/epiction.co\/softworks\/services\/\" class=\"circle-button\">\r\n\t\t\t\t\t\t<i class=\"fa-regular fa-arrow-up-right\"><\/i>\r\n\t\t\t\t\t\t<span class=\"text-circle\">\r\n\t\t\t\t\t\t   \r\n\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/epiction.co\/softworks\/wp-content\/uploads\/2024\/11\/text-circlw.png\" alt=\"\"\/>\r\n\t\t\t\t\t\t\t\t\t\t\t\t<\/span>\r\n\t\t\t\t\t<\/a>\r\n\t\t\t\t<\/div>\r\n\t\t\t<\/div>\r\n\t\t<\/div>\r\n\t<\/section>\r\n\r\n\t\r\n\r\n             \r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0089f6e elementor-hidden-desktop elementor-widget elementor-widget-digtek-marketing-cta-widget\" data-id=\"0089f6e\" data-element_type=\"widget\" data-widget_type=\"digtek-marketing-cta-widget.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\r\n\r\n\t<section class=\"cta-contact-section fix\">\r\n\t\t<div class=\"container\">\r\n\t\t\t<div class=\"cta-contact-wrapper bg-cover\" style=\"background-image: url('https:\/\/epiction.co\/softworks\/wp-content\/uploads\/2024\/11\/cta-counter-bg.jpg');\">\r\n\t\t\t\t<div class=\"cta-image wow img-custom-anim-left\" data-wow-duration=\"1.5s\" data-wow-delay=\"0.3s\">\r\n\t\t\t\t   \r\n\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/epiction.co\/softworks\/wp-content\/uploads\/2024\/11\/hero-bg-2.png\" alt=\"\"\/>\r\n\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t<div class=\"section-title mb-0\">\r\n\t\t\t\t\t<div class=\"sub-title bg-color-3 wow fadeInUp\">\r\n\t\t\t\t\t\t<span>Improve your online presense<\/span>\r\n\t\t\t\t\t<\/div>\r\n\t\t\t\t\t<h2 class=\"text-white wow fadeInUp\" data-wow-delay=\".3s\">\r\n\t\t\t\t\t\tGet professional IT services for your business\t\t\t\t\t<\/h2>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t<div class=\"main-button wow fadeInUp\" data-wow-delay=\".5s\">\r\n\t\t\t\t\t<a href=\"https:\/\/epiction.co\/softworks\/contact\/\"> <span class=\"theme-btn\">Discuss your project <\/span><span class=\"arrow-btn\"><i class=\"fa-regular fa-arrow-up-right\"><\/i><\/span><\/a>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t<\/div>\r\n\t\t<\/div>\r\n\t<\/section>\r\n\r\n\t\r\n\r\n             \r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Free Image Compression Tool Online Effortlessly compress images without losing quality. Drag and drop images or upload from your device to reduce file sizes. Optimize JPEG, PNG, and other formats for web, email, or storage. Adjustable compression settings ensure high-quality visuals with reduced sizes. Compress your images quickly and efficiently with our advanced image compression<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"inline_featured_image":false,"footnotes":""},"class_list":["post-1624","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/epiction.co\/softworks\/wp-json\/wp\/v2\/pages\/1624","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/epiction.co\/softworks\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/epiction.co\/softworks\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/epiction.co\/softworks\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/epiction.co\/softworks\/wp-json\/wp\/v2\/comments?post=1624"}],"version-history":[{"count":0,"href":"https:\/\/epiction.co\/softworks\/wp-json\/wp\/v2\/pages\/1624\/revisions"}],"wp:attachment":[{"href":"https:\/\/epiction.co\/softworks\/wp-json\/wp\/v2\/media?parent=1624"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}