{"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-kep-atmeretezese-es-tomoritese","status":"publish","type":"page","link":"https:\/\/universomotero.com\/hu\/online-png-kep-atmeretezese-es-tomoritese\/","title":{"rendered":"Online PNG k\u00e9p \u00e1tm\u00e9retez\u00e9se \u00e9s t\u00f6m\u00f6r\u00edt\u00e9se"},"content":{"rendered":"<h2 class=\"wp-block-heading has-text-align-center\">Online PNG k\u00e9p \u00e1tm\u00e9retez\u00e9se \u00e9s t\u00f6m\u00f6r\u00edt\u00e9se<\/h2>\n\n\n\n<p class=\"has-text-align-center wp-block-paragraph\">T\u00f6m\u00f6r\u00edts b\u00e1rmilyen PNG k\u00e9pet online ingyen. A k\u00e9peket azonnal \u00e1t is m\u00e9retezheted 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=\"felt\u00f6lt\u00e9s ikon\">\n   <p>Felt\u00f6ltend\u0151 f\u00e1jl tall\u00f3z\u00e1sa<\/p>\n   <\/div>\n   <div style=\"text-align: center;\" class=\"content\">\n   <div class=\"row sizes\">\n   <div class=\"column width\">\n   <label>Sz\u00e9less\u00e9g<\/label>\n   <input type=\"number\">\n   <\/div>\n   <div class=\"column height\">\n   <label>Magass\u00e1g<\/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\">K\u00e9par\u00e1ny r\u00f6gz\u00edt\u00e9se<\/label>\n   <\/div>\n   <div class=\"column quality\">\n   <input type=\"checkbox\" id=\"quality\">\n   <label for=\"quality\">Min\u0151s\u00e9g cs\u00f6kkent\u00e9se<\/label>\n   <\/div>\n   <\/div>\n   <button class=\"download-btn\">K\u00e9p let\u00f6lt\u00e9se<\/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\">Hogyan m\u0171k\u00f6dik?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Ez az online eszk\u00f6z egy PNG k\u00e9pet t\u00f6m\u00f6r\u00edt egy algoritmus seg\u00edts\u00e9g\u00e9vel, amelyet \u00e1ltal\u00e1ban vesztes\u00e9gmentes t\u00f6m\u00f6r\u00edt\u00e9snek neveznek. A vesztes\u00e9gmentes t\u00f6m\u00f6r\u00edt\u00e9si technika cs\u00f6kkenti a PNG k\u00e9p m\u00e9ret\u00e9t az\u00e1ltal, hogy megv\u00e9di az \u00f6sszes k\u00e9padatot a min\u0151s\u00e9g fel\u00e1ldoz\u00e1sa n\u00e9lk\u00fcl. \u00c1tm\u00e9retezi a PNG k\u00e9pf\u00e1jlt a sz\u00ednpaletta optimaliz\u00e1l\u00e1s\u00e1val. Elt\u00e1vol\u00edtja a felesleges inform\u00e1ci\u00f3kat, \u00e9s megv\u00e1ltoztatja a pixelek sz\u00e1m\u00e1t a k\u00e9par\u00e1ny megtart\u00e1s\u00e1val.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Hogyan lehet t\u00f6m\u00f6r\u00edteni egy PNG-t?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Online PNG k\u00e9p\u00e1tm\u00e9retez\u0151 \u00e9s -t\u00f6m\u00f6r\u00edt\u0151 eszk\u00f6z\u00fcnkkel \u00e1tm\u00e9retezhetsz \u00e9s t\u00f6m\u00f6r\u00edthetsz egy nagy PNG f\u00e1jlt kisebb f\u00e1jll\u00e1, vagy ak\u00e1r a k\u00edv\u00e1nt m\u00e9retekk\u00e9. Nem kell let\u00f6ltened, telep\u00edtened vagy regisztr\u00e1lnod semmilyen szolg\u00e1ltat\u00e1sra. Sz\u00f3val hogyan teheted ezt meg? \u00cdme, hogyan teheted meg h\u00e1rom l\u00e9p\u00e9sben:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>T\u00f6ltsd fel a fot\u00f3dat:<\/strong>&nbsp;V\u00e1lassz ki egy PNG k\u00e9pet, amelyet t\u00f6m\u00f6r\u00edteni vagy \u00e1tm\u00e9retezni szeretn\u00e9l. H\u00fazd a k\u00e9pet az Eszk\u00f6zbe.<\/li>\n\n\n\n<li><strong>A be\u00e1ll\u00edt\u00e1sok testreszab\u00e1sa:<\/strong>&nbsp;A k\u00e9p felt\u00f6lt\u00e9se ut\u00e1n megtekintheted a k\u00e9p sz\u00e9less\u00e9g\u00e9re \u00e9s magass\u00e1g\u00e1ra vonatkoz\u00f3 be\u00e1ll\u00edt\u00e1sokat. V\u00e1laszd ki a k\u00e9p sz\u00e9less\u00e9g\u00e9t \u00e9s magass\u00e1g\u00e1t az ig\u00e9nyeid szerint. V\u00e1laszthatod a Min\u0151s\u00e9g cs\u00f6kkent\u00e9se \u00e9s a K\u00e9par\u00e1ny r\u00f6gz\u00edt\u00e9se opci\u00f3kat is. A \u201cMin\u0151s\u00e9g cs\u00f6kkent\u00e9se\u201d opci\u00f3 kiv\u00e1laszt\u00e1s\u00e1val egy nagy k\u00e9pf\u00e1jlt kisebb f\u00e1jlm\u00e9ret\u0171v\u00e9 alak\u00edthatsz. A \u201cK\u00e9par\u00e1ny r\u00f6gz\u00edt\u00e9se\u201d opci\u00f3 biztos\u00edtja, hogy a k\u00e9p ar\u00e1nya \u00e1tm\u00e9retez\u00e9skor v\u00e1ltozatlan maradjon.<\/li>\n\n\n\n<li><strong>Mentsd el a fot\u00f3dat:<\/strong>&nbsp;Tekintse meg a testreszabott k\u00e9pet, hogy biztosan \u00fagy n\u00e9zzen ki, ahogy szerette volna, majd kattintson a K\u00e9p let\u00f6lt\u00e9se gombra.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Mi\u00e9rt kellene t\u00f6m\u00f6r\u00edtenem a PNG f\u00e1jlokat?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Egy PNG f\u00e1jl mindig nagyobb, mint egy JPEG f\u00e1jl, mivel a PNG f\u00e1jlok t\u00f6bb adatot tartalmaznak, mint a JPEG f\u00e1jlok. A PNG f\u00e1jlok sok r\u00e9szletet \u00e9s nagyobb felbont\u00e1st tartalmaznak. A PNG f\u00e1jlok t\u00f6m\u00f6r\u00edt\u00e9s\u00e9vel jelent\u0151sen cs\u00f6kkentheti a f\u00e1jlm\u00e9retet, \u00e9s megk\u00f6nny\u00edtheti a haszn\u00e1latukat, megoszt\u00e1sukat vagy felt\u00f6lt\u00e9s\u00fcket. Emellett t\u00e1rhelyet takar\u00edthat meg az eszk\u00f6z\u00e9n vagy a szerver\u00e9n. Ez seg\u00edt jav\u00edtani a webhely teljes\u00edtm\u00e9ny\u00e9t a webhely sebess\u00e9g\u00e9nek n\u00f6vel\u00e9s\u00e9vel.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Biztons\u00e1gos a PNG f\u00e1jlok t\u00f6m\u00f6r\u00edt\u00e9se?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Igen, biztons\u00e1gos a PNG f\u00e1jlok t\u00f6m\u00f6r\u00edt\u00e9se. A PNG t\u00f6m\u00f6r\u00edt\u0151 eszk\u00f6z vesztes\u00e9gmentes t\u00f6m\u00f6r\u00edt\u00e9st haszn\u00e1l, ami azt jelenti, hogy \u00e1tm\u00e9retezi \u00e9s t\u00f6m\u00f6r\u00edti a PNG k\u00e9pf\u00e1jlt an\u00e9lk\u00fcl, hogy elvesz\u00edten\u00e9 annak min\u0151s\u00e9g\u00e9t vagy adatait. Ez\u00e9rt tekinthet\u0151 a PNG t\u00f6m\u00f6r\u00edt\u00e9s biztons\u00e1gosabbnak, mint a JPEG t\u00f6m\u00f6r\u00edt\u00e9s.<\/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\/hu\/wp-json\/wp\/v2\/pages\/1533","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/universomotero.com\/hu\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/universomotero.com\/hu\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/universomotero.com\/hu\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/universomotero.com\/hu\/wp-json\/wp\/v2\/comments?post=1533"}],"version-history":[{"count":1,"href":"https:\/\/universomotero.com\/hu\/wp-json\/wp\/v2\/pages\/1533\/revisions"}],"predecessor-version":[{"id":2329,"href":"https:\/\/universomotero.com\/hu\/wp-json\/wp\/v2\/pages\/1533\/revisions\/2329"}],"wp:attachment":[{"href":"https:\/\/universomotero.com\/hu\/wp-json\/wp\/v2\/media?parent=1533"}],"curies":[{"name":"munkaf\u00fczet","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}