{"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":"zdarma-a-okamzite-prevadet-obrazky-do-formatu-webp","status":"publish","type":"page","link":"https:\/\/universomotero.com\/cs\/zdarma-a-okamzite-prevadet-obrazky-do-formatu-webp\/","title":{"rendered":"Okam\u017eit\u00fd p\u0159evod obr\u00e1zk\u016f do form\u00e1tu WebP zdarma"},"content":{"rendered":"<h2 class=\"wp-block-heading has-text-align-center\">Okam\u017eit\u00fd p\u0159evod obr\u00e1zk\u016f do form\u00e1tu WebP zdarma<\/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\">Vyberte soubory<\/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 p\u0159ev\u00e9st obr\u00e1zky JPEG do form\u00e1tu WebP<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Obr\u00e1zky JPEG m\u016f\u017eete snadno p\u0159ev\u00e9st do form\u00e1tu WebP pomoc\u00ed v\u00fd\u0161e uveden\u00e9ho n\u00e1stroje<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Klikn\u011bte na tla\u010d\u00edtko Vybrat soubor a vyberte obr\u00e1zek<\/li>\n\n\n\n<li>Pak okam\u017eit\u011b p\u0159evede obr\u00e1zky do form\u00e1tu WebP a zobraz\u00ed v\u00e1m n\u00e1hled.<\/li>\n\n\n\n<li>Klikn\u011bte na n\u00e1hledov\u00fd obr\u00e1zek pro jeho sta\u017een\u00ed<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">\u010casto kladen\u00e9 ot\u00e1zky<\/h2>\n\n\n\n<h4 class=\"wp-block-heading\">Co je WebP?<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Spole\u010dnost Google vytvo\u0159ila obrazov\u00fd form\u00e1t WebP, kter\u00fd m\u00e1 nab\u00edzet lep\u0161\u00ed kompresi ne\u017e jin\u00e9 zn\u00e1m\u00e9 form\u00e1ty, jako jsou JPEG a PNG, a z\u00e1rove\u0148 zachovat stejnou kvalitu. Form\u00e1t vyu\u017e\u00edv\u00e1 ztr\u00e1tovou i bezztr\u00e1tovou kompresi, aby se zmen\u0161ily obrazov\u00e9 soubory.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Webov\u00e9 str\u00e1nky mohou z WebP t\u011b\u017eit zejm\u00e9na proto, \u017ee zrychluje na\u010d\u00edt\u00e1n\u00ed str\u00e1nek a vyu\u017e\u00edv\u00e1 men\u0161\u00ed \u0161\u00ed\u0159ku p\u00e1sma k zobrazov\u00e1n\u00ed grafiky. To m\u016f\u017ee zlep\u0161it funk\u010dnost webov\u00fdch str\u00e1nek a celkovou u\u017eivatelskou zku\u0161enost, zejm\u00e9na pro u\u017eivatele mobiln\u00edch za\u0159\u00edzen\u00ed s omezen\u00fdmi datov\u00fdmi tarify nebo pomalej\u0161\u00edm internetov\u00fdm p\u0159ipojen\u00edm.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Co je WebP p\u0159evodn\u00edk?<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">WebP converter je online n\u00e1stroj, kter\u00fd p\u0159ev\u00e1d\u00ed libovoln\u00fd obr\u00e1zek JPEG, JPG a PNG do form\u00e1tu WebP. N\u00e1\u0161 n\u00e1stroj je perfektn\u00edm p\u0159\u00edkladem bezplatn\u00e9ho webp p\u0159evodn\u00edku, kter\u00fd funguje online a okam\u017eit\u011b p\u0159ev\u00e1d\u00ed obr\u00e1zky do form\u00e1tu WebP.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Pro\u010d p\u0159ev\u00e1d\u011bt obr\u00e1zky do form\u00e1tu WebP?<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Jednodu\u0161e \u0159e\u010deno, obr\u00e1zky WebP maj\u00ed \u010dasto lep\u0161\u00ed kompresi ne\u017e jejich alternativy a jsou men\u0161\u00ed p\u0159i zachov\u00e1n\u00ed stejn\u00e9 kvality. To znamen\u00e1, \u017ee pou\u017eit\u00ed obr\u00e1zk\u016f WebP na va\u0161em webu zlep\u0161\u00ed jeho v\u00fdkon a spot\u0159ebuje m\u00e9n\u011b \u00falo\u017en\u00e9ho prostoru.<\/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\/cs\/wp-json\/wp\/v2\/pages\/1527","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/universomotero.com\/cs\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/universomotero.com\/cs\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/universomotero.com\/cs\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/universomotero.com\/cs\/wp-json\/wp\/v2\/comments?post=1527"}],"version-history":[{"count":1,"href":"https:\/\/universomotero.com\/cs\/wp-json\/wp\/v2\/pages\/1527\/revisions"}],"predecessor-version":[{"id":2326,"href":"https:\/\/universomotero.com\/cs\/wp-json\/wp\/v2\/pages\/1527\/revisions\/2326"}],"wp:attachment":[{"href":"https:\/\/universomotero.com\/cs\/wp-json\/wp\/v2\/media?parent=1527"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}