{"id":1527,"date":"2023-03-20T21:41:17","date_gmt":"2023-03-20T21:41:17","guid":{"rendered":"https:\/\/universomotero.com\/?page_id=1527"},"modified":"2025-12-06T06:00:04","modified_gmt":"2025-12-06T06:00:04","slug":"darmowa-konwersja-obrazow-do-formatu-webp-natychmiast","status":"publish","type":"page","link":"https:\/\/universomotero.com\/pl\/darmowa-konwersja-obrazow-do-formatu-webp-natychmiast\/","title":{"rendered":"Darmowa konwersja obraz\u00f3w do formatu WebP natychmiast"},"content":{"rendered":"<h2 class=\"wp-block-heading has-text-align-center\">Darmowa konwersja obraz\u00f3w do formatu WebP natychmiast<\/h2>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<div style=\"text-align: center;\" class=\"layout\">\n<div style=\"margin-bottom: 20px; text-align: center;\">\n<input style=\"display:none;\" type=\"file\" id=\"files\" multiple=\"\" accept=\"image\/*\">\n<label class=\"upload-image-button\" for=\"files\">Wybierz pliki<\/label>\n<\/div>\n<div id=\"previews\"><\/div>\n<div class=\"dropTarget\"><\/div>\n<\/div>\n\n\n\n<style>\nh1 {\nmargin-top: 0;\n}\n\n[type=\"file\"] + label {\nbackground: hsl(214deg 62% 46%);\nborder: none;\nborder-radius: 5px;\ncolor: #fff;\ncursor: pointer;\ndisplay: inline-block;\nfont-family: 'Rubik', sans-serif;\nfont-size: inherit;\nfont-weight: 500;\nmargin-bottom: 1rem;\noutline: none;\nposition: relative;\ntransition: all 0.3s;\nvertical-align: middle;\n}\n\n.upload-btn:hover {\nbox-shadow: 0 4px darken(#f8eae3, 10%);\ntop: 2px;\nbackground: #545b62!important;\n}\n\n.upload-image-button {\n\/* Style the color of the message that says 'No file chosen' *\/\ncolor: #878787;\n}\n\n.upload-image-button {\ncolor: #fff;\ncursor: pointer;\noutline: none;\npadding: 10px 25px;\ntext-transform: uppercase;\ntransition: all 1s ease;\nmargin: 10px 0px 10px 0px;\n}\n\n#previews img {\nmax-height: 100%;\nmax-width: 100%;\nbox-shadow: 0px 0px 25px 0px rgba(0,0,0,0.75);\n}\n\n.dropTarget {\nposition: relative;\nborder: 3px dashed silver;\nflex-basis: auto;\nflex-grow: 20;\nheight: 30px;\nwidth: 100%;\n}\n\n.dropTarget::before {\ncontent: 'Drop files here';\ncolor: silver;\nfont-size: 5vh;\nheight: 5vh;\nposition: absolute;\ntop: 0;\nbottom: 0;\nleft: 0;\nright: 0;\nmargin: auto;\ntext-align: center;\npointer-events: none;\nuser-select: none;\n}\n\n#previews > div {\nbox-sizing: border-box;\nheight: 150px;\nwidth: 150px;\npadding: 20px;\ndisplay: inline-flex;\nvertical-align: top;\njustify-content: center;\n}\n\n#previews > div > progress {\nwidth: 50;\nmax-height: 100px;\n}\n\n.layout {\ndisplay: flex;\nflex-direction: column;\njustify-content: flex-start;\nalign-items: stretch;\nalign-content: stretch;\nheight: calc(100vh - 40px);\n}\n\n[type=\"file\"] {\nheight: 0;\noverflow: hidden;\nwidth: 0;\n}\n<\/style>\n\n\n\n<script type=\"text\/javascript\">\nlet refs = {};\nrefs.imagePreviews = document.querySelector('#previews');\nrefs.fileSelector = document.querySelector('input[type=file]');\n\nfunction addImageBox(container) {\nlet imageBox = document.createElement(\"div\");\nlet progressBox = document.createElement(\"progress\");\nimageBox.appendChild(progressBox);\ncontainer.appendChild(imageBox);\nreturn imageBox;\n}\n\nfunction processFile(file) {\nif (!file) {\nreturn;\n}\nconsole.log(file);\n\nlet imageBox = addImageBox(refs.imagePreviews);\n\/\/ Load the data into an image\nnew Promise(function (resolve, reject) {\nlet rawImage = new Image();\n\nrawImage.addEventListener(\"load\", function () {\nresolve(rawImage);\n});\n\nrawImage.src = URL.createObjectURL(file);\n})\n.then(function (rawImage) {\n\/\/ Convert image to webp ObjectURL via a canvas blob\nreturn new Promise(function (resolve, reject) {\nlet canvas = document.createElement('canvas');\nlet ctx = canvas.getContext(\"2d\");\n\ncanvas.width = rawImage.width;\ncanvas.height = rawImage.height;\nctx.drawImage(rawImage, 0, 0);\n\ncanvas.toBlob(function (blob) {\nresolve(URL.createObjectURL(blob));\n}, \"image\/webp\");\n});\n})\n.then(function (imageURL) {\n\/\/ Load image for display on the page\nreturn new Promise(function (resolve, reject) {\nlet scaledImg = new Image();\n\nscaledImg.addEventListener(\"load\", function () {\nresolve({imageURL, scaledImg});\n});\n\nscaledImg.setAttribute(\"src\", imageURL);\n});\n})\n.then(function (data) {\n\/\/ Inject into the DOM\nlet imageLink = document.createElement(\"a\");\n\nimageLink.setAttribute(\"href\", data.imageURL);\nimageLink.setAttribute('download', `${file.name}.webp`);\nimageLink.appendChild(data.scaledImg);\n\nimageBox.innerHTML = \"\";\nimageBox.appendChild(imageLink);\n});\n}\n\nfunction processFiles(files) {\nfor (let file of files) {\nprocessFile(file);\n}\n}\n\nfunction fileSelectorChanged() {\nprocessFiles(refs.fileSelector.files);\nrefs.fileSelector.value = \"\";\n}\n\nrefs.fileSelector.addEventListener(\"change\", fileSelectorChanged);\n\/\/ Set up Drag and Drop\nfunction dragenter(e) {\ne.stopPropagation();\ne.preventDefault();\n}\n\nfunction dragover(e) {\ne.stopPropagation();\ne.preventDefault();\n}\n\nfunction drop(callback, e) {\ne.stopPropagation();\ne.preventDefault();\ncallback(e.dataTransfer.files);\n}\n\nfunction setDragDrop(area, callback) {\narea.addEventListener(\"dragenter\", dragenter, false);\narea.addEventListener(\"dragover\", dragover, false);\narea.addEventListener(\"drop\", function (e) { drop(callback, e); }, false);\n}\nsetDragDrop(document.documentElement, processFiles);\n<\/script>\n\n\n\n<h2 class=\"wp-block-heading\">Jak konwertowa\u0107 obrazy JPEG do formatu WebP<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Mo\u017cesz \u0142atwo przekonwertowa\u0107 obrazy JPEG na WebP za pomoc\u0105 powy\u017cszego narz\u0119dzia<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Kliknij przycisk \u201eWybierz plik\u201d i wybierz obraz<\/li>\n\n\n\n<li>Nast\u0119pnie natychmiast konwertuje obrazy do formatu WebP i wy\u015bwietla podgl\u0105d<\/li>\n\n\n\n<li>Kliknij na obraz podgl\u0105du, aby go pobra\u0107<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Cz\u0119sto zadawane pytania<\/h2>\n\n\n\n<h4 class=\"wp-block-heading\">Czym jest WebP?<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Google stworzy\u0142 format obrazu WebP, kt\u00f3ry ma oferowa\u0107 lepsz\u0105 kompresj\u0119 ni\u017c inne znane formaty, takie jak JPEG i PNG, przy jednoczesnym zachowaniu tej samej jako\u015bci. Format ten wykorzystuje zar\u00f3wno metody kompresji stratnej, jak i bezstratnej, aby zmniejszy\u0107 rozmiar plik\u00f3w graficznych.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Strony internetowe mog\u0105 czerpa\u0107 korzy\u015bci ze stosowania technologii WebP, poniewa\u017c przyspiesza ona \u0142adowanie stron i zu\u017cywa mniej przepustowo\u015bci do wy\u015bwietlania grafiki. Mo\u017ce to poprawi\u0107 funkcjonalno\u015b\u0107 strony internetowej i og\u00f3lne wra\u017cenia u\u017cytkownika, zw\u0142aszcza w przypadku u\u017cytkownik\u00f3w urz\u0105dze\u0144 mobilnych z ograniczonym transferem danych lub wolniejszym po\u0142\u0105czeniem internetowym.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Czym jest konwerter WebP?<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Konwerter WebP to narz\u0119dzie online, kt\u00f3re konwertuje dowolny obraz JPEG, JPG i PNG do formatu WebP. Nasze narz\u0119dzie to doskona\u0142y przyk\u0142ad darmowego konwertera WebP, kt\u00f3ry dzia\u0142a online i natychmiast konwertuje obrazy do formatu WebP.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Dlaczego warto konwertowa\u0107 obrazy do formatu WebP?<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">M\u00f3wi\u0105c pro\u015bciej, obrazy WebP cz\u0119sto charakteryzuj\u0105 si\u0119 lepsz\u0105 kompresj\u0105 ni\u017c ich alternatywy i s\u0105 mniejsze, zachowuj\u0105c t\u0119 sam\u0105 jako\u015b\u0107. Oznacza to, \u017ce wykorzystanie obraz\u00f3w WebP na stronie internetowej poprawi jej wydajno\u015b\u0107 i ograniczy zu\u017cycie miejsca.<\/p>","protected":false},"excerpt":{"rendered":"<p>Free Convert Images To WebP Format Instantly Choose files How To Convert JPEG Images To WebP You can easily convert JPEG images to WebP using the above tool FAQs What Is WebP? Google created the WebP image format, which is intended to offer superior compression over other well-known formats like JPEG and PNG while preserving [&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-1527","page","type-page","status-publish"],"_links":{"self":[{"href":"https:\/\/universomotero.com\/pl\/wp-json\/wp\/v2\/pages\/1527","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=1527"}],"version-history":[{"count":1,"href":"https:\/\/universomotero.com\/pl\/wp-json\/wp\/v2\/pages\/1527\/revisions"}],"predecessor-version":[{"id":2326,"href":"https:\/\/universomotero.com\/pl\/wp-json\/wp\/v2\/pages\/1527\/revisions\/2326"}],"wp:attachment":[{"href":"https:\/\/universomotero.com\/pl\/wp-json\/wp\/v2\/media?parent=1527"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}