{"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":"zmiana-rozmiaru-i-kompresja-obrazow-png-online","status":"publish","type":"page","link":"https:\/\/universomotero.com\/pl\/zmiana-rozmiaru-i-kompresja-obrazow-png-online\/","title":{"rendered":"Zmiana rozmiaru i kompresja obraz\u00f3w PNG online"},"content":{"rendered":"<h2 class=\"wp-block-heading has-text-align-center\">Zmiana rozmiaru i kompresja obraz\u00f3w PNG online<\/h2>\n\n\n\n<p class=\"has-text-align-center wp-block-paragraph\">Kompresuj dowolny obraz PNG online za darmo. Mo\u017cesz r\u00f3wnie\u017c b\u0142yskawicznie zmienia\u0107 rozmiar obraz\u00f3w online.<\/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=\"ikona przesy\u0142ania\">\n   <p>Przegl\u0105daj plik do przes\u0142ania<\/p>\n   <\/div>\n   <div style=\"text-align: center;\" class=\"content\">\n   <div class=\"row sizes\">\n   <div class=\"column width\">\n   <label>Szeroko\u015b\u0107<\/label>\n   <input type=\"number\">\n   <\/div>\n   <div class=\"column height\">\n   <label>Wysoko\u015b\u0107<\/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\">Zablokuj proporcje<\/label>\n   <\/div>\n   <div class=\"column quality\">\n   <input type=\"checkbox\" id=\"quality\">\n   <label for=\"quality\">Obni\u017cy\u0107 jako\u015b\u0107<\/label>\n   <\/div>\n   <\/div>\n   <button class=\"download-btn\">Pobierz obraz<\/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\">Jak to dzia\u0142a?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">To narz\u0119dzie online kompresuje obraz PNG za pomoc\u0105 algorytmu, kt\u00f3ry og\u00f3lnie nazywa si\u0119 kompresj\u0105 bezstratn\u0105. Technika kompresji bezstratnej zmniejsza rozmiar obrazu PNG, chroni\u0105c wszystkie dane obrazu bez utraty jako\u015bci. Zmienia rozmiar pliku obrazu PNG, optymalizuj\u0105c jego palet\u0119 kolor\u00f3w. Usuwa zb\u0119dne informacje i zmienia liczb\u0119 pikseli, zachowuj\u0105c proporcje obrazu.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Jak skompresowa\u0107 PNG?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Mo\u017cesz skorzysta\u0107 z naszego narz\u0119dzia do zmiany rozmiaru i kompresji obraz\u00f3w PNG online, aby zmieni\u0107 rozmiar i skompresowa\u0107 du\u017cy plik PNG do mniejszego rozmiaru, a nawet do \u017c\u0105danych wymiar\u00f3w. Nie musisz pobiera\u0107, instalowa\u0107 ani rejestrowa\u0107 si\u0119 w \u017cadnej us\u0142udze. Jak to zrobi\u0107? Oto jak to zrobi\u0107 w trzech krokach:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Prze\u015blij swoje zdj\u0119cie:<\/strong>&nbsp;Wybierz obraz PNG, kt\u00f3ry chcesz skompresowa\u0107 lub zmieni\u0107 jego rozmiar. Upu\u015b\u0107 obraz w narz\u0119dziu.<\/li>\n\n\n\n<li><strong>Dostosuj ustawienia:<\/strong>&nbsp;Po przes\u0142aniu obrazu zobaczysz opcje szeroko\u015bci i wysoko\u015bci obrazu. Wybierz szeroko\u015b\u0107 i wysoko\u015b\u0107 obrazu wed\u0142ug w\u0142asnych potrzeb. Mo\u017cesz r\u00f3wnie\u017c wybra\u0107 opcj\u0119 \u201cZmniejsz jako\u015b\u0107\u201d i \u201cZablokuj proporcje\u201d. Wybieraj\u0105c \u201eZmniejsz jako\u015b\u0107\u201d, mo\u017cesz zmniejszy\u0107 rozmiar du\u017cego pliku obrazu. \u201eZablokuj proporcje\u201d zapewni, \u017ce proporcje obrazu pozostan\u0105 takie same jak przed zmian\u0105 rozmiaru.<\/li>\n\n\n\n<li><strong>Zapisz swoje zdj\u0119cie:<\/strong>&nbsp;Obejrzyj podgl\u0105d personalizacji, aby upewni\u0107 si\u0119, \u017ce wygl\u0105da tak, jak zamierza\u0142e\u015b, i kliknij Pobierz obraz.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Dlaczego warto kompresowa\u0107 pliki PNG?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Plik PNG jest zawsze wi\u0119kszy ni\u017c plik JPEG, poniewa\u017c zawiera wi\u0119cej danych ni\u017c pliki JPEG. Pliki PNG zawieraj\u0105 wiele szczeg\u00f3\u0142\u00f3w i maj\u0105 wy\u017csz\u0105 rozdzielczo\u015b\u0107. Kompresja plik\u00f3w PNG pozwala znacznie zmniejszy\u0107 ich rozmiar i u\u0142atwi\u0107 ich u\u017cywanie, udost\u0119pnianie i przesy\u0142anie. Pozwala r\u00f3wnie\u017c zaoszcz\u0119dzi\u0107 miejsce na urz\u0105dzeniu lub serwerze. Pomo\u017ce to poprawi\u0107 wydajno\u015b\u0107 witryny poprzez zwi\u0119kszenie jej szybko\u015bci.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Czy kompresowanie plik\u00f3w PNG jest bezpieczne?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Tak, kompresja plik\u00f3w PNG jest bezpieczna. Narz\u0119dzie do kompresji PNG wykorzystuje kompresj\u0119 bezstratn\u0105, co oznacza, \u017ce zmieni rozmiar i skompresuje plik PNG bez utraty jako\u015bci ani danych. Dlatego kompresja PNG jest uwa\u017cana za bezpieczniejsz\u0105 ni\u017c kompresja JPEG.<\/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\/pl\/wp-json\/wp\/v2\/pages\/1533","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/universomotero.com\/pl\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/universomotero.com\/pl\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/universomotero.com\/pl\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/universomotero.com\/pl\/wp-json\/wp\/v2\/comments?post=1533"}],"version-history":[{"count":1,"href":"https:\/\/universomotero.com\/pl\/wp-json\/wp\/v2\/pages\/1533\/revisions"}],"predecessor-version":[{"id":2329,"href":"https:\/\/universomotero.com\/pl\/wp-json\/wp\/v2\/pages\/1533\/revisions\/2329"}],"wp:attachment":[{"href":"https:\/\/universomotero.com\/pl\/wp-json\/wp\/v2\/media?parent=1533"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}