{"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":"free-convert-images-to-webp-format-instantly","status":"publish","type":"page","link":"https:\/\/universomotero.com\/ur\/free-convert-images-to-webp-format-instantly\/","title":{"rendered":"\u0645\u0641\u062a \u062a\u0635\u0627\u0648\u06cc\u0631 \u06a9\u0648 \u0641\u0648\u0631\u06cc \u0637\u0648\u0631 \u067e\u0631 WebP \u0641\u0627\u0631\u0645\u06cc\u0679 \u0645\u06cc\u06ba \u062a\u0628\u062f\u06cc\u0644 \u06a9\u0631\u06cc\u06ba\u06d4"},"content":{"rendered":"<h2 class=\"wp-block-heading has-text-align-center\">\u0645\u0641\u062a \u062a\u0635\u0627\u0648\u06cc\u0631 \u06a9\u0648 \u0641\u0648\u0631\u06cc \u0637\u0648\u0631 \u067e\u0631 WebP \u0641\u0627\u0631\u0645\u06cc\u0679 \u0645\u06cc\u06ba \u062a\u0628\u062f\u06cc\u0644 \u06a9\u0631\u06cc\u06ba\u06d4<\/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\">Choose files<\/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\">How To Convert JPEG Images To WebP<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">You can easily convert JPEG images to WebP using the above tool<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Click on choose file button and select an image<\/li>\n\n\n\n<li>Then it instantly converts images to WebP and gives you a preview<\/li>\n\n\n\n<li>Click on the preview image to download it<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">FAQs<\/h2>\n\n\n\n<h4 class=\"wp-block-heading\">What Is WebP?<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Google created the WebP image format, which is intended to offer superior compression over other well-known formats like JPEG and PNG while preserving the same quality. The format employs both lossy and lossless compression methods to make the picture files smaller.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Websites can benefit from WebP in particular since it speeds up page loads and uses less bandwidth to deliver graphics. This can enhance a website&#8217;s functionality and user experience overall, especially for users of mobile devices with data-constrained plans or slower internet connections.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">What Is WebP Converter?<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">WebP converter is an online tool that converts any image JPEG, JPG and PNG to WebP images. Our tool is a perfect example of a free webp converter that works online and converts images to webp instantly.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Why Convert Images To WebP?<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Simply put, WebP images often have better compression than their alternatives and are smaller while maintaining the same quality. This implies that utilizing WebP pictures on your website will improve its performance and use less storage space.<\/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\/ur\/wp-json\/wp\/v2\/pages\/1527","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/universomotero.com\/ur\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/universomotero.com\/ur\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/universomotero.com\/ur\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/universomotero.com\/ur\/wp-json\/wp\/v2\/comments?post=1527"}],"version-history":[{"count":1,"href":"https:\/\/universomotero.com\/ur\/wp-json\/wp\/v2\/pages\/1527\/revisions"}],"predecessor-version":[{"id":2326,"href":"https:\/\/universomotero.com\/ur\/wp-json\/wp\/v2\/pages\/1527\/revisions\/2326"}],"wp:attachment":[{"href":"https:\/\/universomotero.com\/ur\/wp-json\/wp\/v2\/media?parent=1527"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}