{"id":1533,"date":"2023-03-20T21:52:55","date_gmt":"2023-03-20T21:52:55","guid":{"rendered":"https:\/\/universomotero.com\/?page_id=1533"},"modified":"2025-12-06T06:00:09","modified_gmt":"2025-12-06T06:00:09","slug":"online-png-image-resize-and-compress","status":"publish","type":"page","link":"https:\/\/universomotero.com\/es\/online-png-image-resize-and-compress\/","title":{"rendered":"Redimensionar y comprimir im\u00e1genes PNG en l\u00ednea"},"content":{"rendered":"<h2 class=\"wp-block-heading has-text-align-center\">Redimensionar y comprimir im\u00e1genes PNG en l\u00ednea<\/h2>\n\n\n\n<p class=\"has-text-align-center wp-block-paragraph\">Compress any PNG image online for free. You also can resize images online instantly<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<tool-body>\n<div id=\"tool-body\" style=\"text-align: center;\" class=\"wrapper\">\n<div class=\"upload-box\">\n   <input type=\"file\" accept=\"image\/*\" hidden=\"\">\n   <img decoding=\"async\" src=\"http:\/\/universomotero.com\/wp-content\/uploads\/2023\/03\/upload-icon.webp\" alt=\"upload icon\">\n   <p>Browse File to Upload<\/p>\n   <\/div>\n   <div style=\"text-align: center;\" class=\"content\">\n   <div class=\"row sizes\">\n   <div class=\"column width\">\n   <label>Width<\/label>\n   <input type=\"number\">\n   <\/div>\n   <div class=\"column height\">\n   <label>Height<\/label>\n   <input type=\"number\">\n   <\/div>\n   <\/div>\n   <div class=\"row checkboxes\">\n   <div class=\"column ratio\">\n   <input type=\"checkbox\" id=\"ratio\" checked=\"\">\n   <label for=\"ratio\">Lock aspect ratio<\/label>\n   <\/div>\n   <div class=\"column quality\">\n   <input type=\"checkbox\" id=\"quality\">\n   <label for=\"quality\">Reduce quality<\/label>\n   <\/div>\n   <\/div>\n   <button class=\"download-btn\">Download Image<\/button>\n   <\/div>\n   <\/div>\n<\/tool-body>\n\n\n\n<style>\ntool-body{\ndisplay: flex;\nalign-items: center;\njustify-content: center;\nmin-height: 50%;\n}\n\n.wrapper{\n\/* width: 50%; *\/\nheight: 288px;\npadding: 30px;\nbackground: #fff;\nborder-radius: 9px;\ntransition: height 0.2s ease;\n}\n\n.wrapper.active{\nheight: 537px;\n}\n\n.wrapper .upload-box{\nheight: 225px;\ndisplay: flex;\ncursor: pointer;\nalign-items: center;\njustify-content: center;\nflex-direction: column;\nborder-radius: 5px;\nborder: 2px dashed #afafaf;\n}\n\n.wrapper.active .upload-box{\nborder: none;\n}\n\n.upload-box p{\nfont-size: 1.06rem;\nmargin-top: 20px;\n}\n\n.wrapper.active .upload-box p{\ndisplay: none;\n}\n\n.wrapper.active .upload-box img{\nwidth: 100%;\nheight: 100%;\nobject-fit: cover;\nborder-radius: 5px;\n}\n\n.wrapper .content{\nopacity: 0;\nmargin-top: 28px;\npointer-events: none;\n}\n\n.wrapper.active .content{\nopacity: 1;\npointer-events: auto;\ntransition: opacity 0.5s 0.05s ease;\n}\n\n.content .row{\ndisplay: flex;\njustify-content: space-between;\n}\n\n.content .row .column{\nwidth: calc(100% \/ 2 - 15px);\n}\n\n.row .column label{\nfont-size: 1.06rem;\n}\n\n.sizes .column input{\nwidth: 100%;\nheight: 49px;\noutline: none;\nmargin-top: 7px;\npadding: 0 15px;\nfont-size: 1.06rem;\nborder-radius: 4px;\nborder: 1px solid #aaa;\n}\n\n.sizes .column input:focus{\npadding: 0 14px;\nborder: 2px solid #927DFC;\n}\n\n.content .checkboxes{\nmargin-top: 20px;\n}\n\n.checkboxes .column{\ndisplay: flex;\nalign-items: center;\n}\n\n.checkboxes .column input{\nwidth: 17px;\nheight: 17px;\nmargin-right: 9px;\naccent-color: #927DFC;\n}\n\n.content .download-btn{\nwidth: 100%;\ncolor: #fff;\noutline: none;\nborder: none;\ncursor: pointer;\nfont-size: 1.06rem;\nborder-radius: 5px;\npadding: 15px 0;\nmargin: 30px 0 10px;\nbackground: #927DFC;\ntext-transform: uppercase;\n}\n<\/style>\n\n\n\n<script type=\"text\/javascript\">\nconst uploadBox = document.querySelector(\".upload-box\"),\npreviewImg = uploadBox.querySelector(\"img\"),\nfileInput = uploadBox.querySelector(\"input\"),\nwidthInput = document.querySelector(\".width input\"),\nheightInput = document.querySelector(\".height input\"),\nratioInput = document.querySelector(\".ratio input\"),\nqualityInput = document.querySelector(\".quality input\"),\ndownloadBtn = document.querySelector(\".download-btn\");\nlet ogImageRatio;\n\nconst loadFile = (e) => {\nconst file = e.target.files[0]; \/\/ getting first user selected file\nif(!file) return; \/\/ return if user hasn't selected any file\npreviewImg.src = URL.createObjectURL(file); \/\/ passing selected file url to preview img src\npreviewImg.addEventListener(\"load\", () => { \/\/ once img loaded\nwidthInput.value = previewImg.naturalWidth;\nheightInput.value = previewImg.naturalHeight;\nogImageRatio = previewImg.naturalWidth \/ previewImg.naturalHeight;\ndocument.querySelector(\".wrapper\").classList.add(\"active\");\n});\n}\n\nwidthInput.addEventListener(\"keyup\", () => {\n\/\/ getting height according to the ratio checkbox status\nconst height = ratioInput.checked ? widthInput.value \/ ogImageRatio : heightInput.value;\nheightInput.value = Math.floor(height);\n});\n\nheightInput.addEventListener(\"keyup\", () => {\n\/\/ getting width according to the ratio checkbox status\nconst width = ratioInput.checked ? heightInput.value * ogImageRatio : widthInput.value;\nwidthInput.value = Math.floor(width);\n});\n\nconst resizeAndDownload = () => {\nconst canvas = document.createElement(\"canvas\");\nconst a = document.createElement(\"a\");\nconst ctx = canvas.getContext(\"2d\");\n\n\/\/ if quality checkbox is checked, pass 0.5 to imgQuality else pass 1.0\n\/\/ 1.0 is 100% quality where 0.5 is 50% of total. you can pass from 0.1 - 1.0\nconst imgQuality = qualityInput.checked ? 0.5 : 1.0;\n\n\/\/ setting canvas height & width according to the input values\ncanvas.width = widthInput.value;\ncanvas.height = heightInput.value;\n\n\/\/ drawing user selected image onto the canvas\nctx.drawImage(previewImg, 0, 0, canvas.width, canvas.height);\n\n\/\/ passing canvas data url as href value of <a> element\na.href = canvas.toDataURL(\"image\/png\", imgQuality);\na.download = new Date().getTime(); \/\/ passing current time as download value\na.click(); \/\/ clicking <a> element so the file download\n}\n\ndownloadBtn.addEventListener(\"click\", resizeAndDownload);\nfileInput.addEventListener(\"change\", loadFile);\nuploadBox.addEventListener(\"click\", () => fileInput.click());\n<\/script>\n\n\n\n<h2 class=\"wp-block-heading\">How Does It Work?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">This online tool will compress a PNG image by using an algorithm that is generally called lossless compression. A lossless compression technique will reduce the size of a PNG image by protecting all of the image data without sacrificing quality. It will resize a PNG image file by optimizing its color palette. It removes unnecessary information and changes the number of pixels by maintaining its aspect ratio.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How To Compress A PNG?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">You can use our Online PNG Image Resize And Compress tool to resize and compress a large PNG file into a smaller file or even your desired dimensions. You do not need to download, install or sign up for any kind of service. So how can you do that? Here\u2019s how you can do it in three steps:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Upload Your Photo:<\/strong>&nbsp;Choose a PNG image you want to compress or resize. Drop the image into the Tool.<\/li>\n\n\n\n<li><strong>Customize The Settings:<\/strong>&nbsp;After uploading the image, you can see the options of width and height of the image. Choose the width and height of the image as your desire or need. Also, you can choose the option of Reduce Quality and Lock aspect ratio. By selecting &#8220;Reduce Quality&#8221; you can change a large image file into a smaller file size. &#8220;Lock aspect ratio&#8221; will ensure that the image&#8217;s ratio remains the same as before when resizing.<\/li>\n\n\n\n<li><strong>Save Your Photo:<\/strong>&nbsp;Preview the customize to ensure it looks as you intended and hit the Download image.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Why Should I Compress PNG Files?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">A PNG file is always larger than a JPEG file because PNG files contain more data than JPEG files. PNG files contain a lot of details and a higher resolution. By compressing PNG files, you can significantly reduce file size and make them easier to use, share, or upload. Also, you can save storage space on your device or server. It will help you to improve website performance by increasing your website speed.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Is It Safe To Compress PNG Files?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Yes, It is safe to Compress PNG files. A PNG compress tool uses lossless compression, which means it will resize and compress your PNG image file without losing its quality or losing any data. This is why PNG compression is considered safer than JPEG compression.<\/p>","protected":false},"excerpt":{"rendered":"<p>Online PNG Image Resize And Compress Compress any PNG image online for free. You also can resize images online instantly Browse File to Upload Width Height Lock aspect ratio Reduce quality Download Image How Does It Work? This online tool will compress a PNG image by using an algorithm that is generally called lossless compression. [&hellip;]<\/p>","protected":false},"author":4,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1533","page","type-page","status-publish"],"_links":{"self":[{"href":"https:\/\/universomotero.com\/es\/wp-json\/wp\/v2\/pages\/1533","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/universomotero.com\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/universomotero.com\/es\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/universomotero.com\/es\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/universomotero.com\/es\/wp-json\/wp\/v2\/comments?post=1533"}],"version-history":[{"count":1,"href":"https:\/\/universomotero.com\/es\/wp-json\/wp\/v2\/pages\/1533\/revisions"}],"predecessor-version":[{"id":2329,"href":"https:\/\/universomotero.com\/es\/wp-json\/wp\/v2\/pages\/1533\/revisions\/2329"}],"wp:attachment":[{"href":"https:\/\/universomotero.com\/es\/wp-json\/wp\/v2\/media?parent=1533"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}