{"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":"libreng-pag-convert-ng-mga-imahe-sa-webp-format-agad-agad","status":"publish","type":"page","link":"https:\/\/universomotero.com\/tl\/libreng-pag-convert-ng-mga-imahe-sa-webp-format-agad-agad\/","title":{"rendered":"Libreng Pag-convert ng mga Larawan sa WebP Format Agad"},"content":{"rendered":"<h2 class=\"wp-block-heading has-text-align-center\">Libreng Pag-convert ng mga Larawan sa WebP Format Agad<\/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\">Pumili ng mga file<\/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\">Paano I-convert ang mga Larawan ng JPEG sa WebP<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Madali mong mako-convert ang mga larawang JPEG patungong WebP gamit ang tool sa itaas<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Pindutin ang button na pumili ng file at pumili ng larawan<\/li>\n\n\n\n<li>Pagkatapos ay agad nitong kino-convert ang mga imahe sa WebP at binibigyan ka ng preview<\/li>\n\n\n\n<li>I-click ang preview na larawan para i-download ito<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Mga Madalas Itanong (FAQ)<\/h2>\n\n\n\n<h4 class=\"wp-block-heading\">Ano ang WebP?<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Nilikha ng Google ang format ng imahe na WebP, na nilayon upang mag-alok ng higit na mahusay na compression kaysa sa iba pang kilalang mga format tulad ng JPEG at PNG habang pinapanatili ang parehong kalidad. Gumagamit ang format ng parehong lossy at lossless compression na mga pamamaraan upang paliitin ang mga file ng larawan.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Makikinabang ang mga website sa WebP lalo na dahil pinapabilis nito ang paglo-load ng mga pahina at gumagamit ng mas kaunting bandwidth para maghatid ng mga graphics. Mapapahusay nito ang functionality at karanasan ng isang website sa pangkalahatan, lalo na para sa mga gumagamit ng mga mobile device na may mga planong limitado ang data o mas mabagal na koneksyon sa internet.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Ano ang WebP Converter?<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Ang WebP converter ay isang online na tool na nagko-convert ng anumang larawang JPEG, JPG at PNG patungo sa mga WebP na imahe. Ang aming tool ay isang perpektong halimbawa ng isang libreng webp converter na gumagana online at agad na nagko-convert ng mga larawan patungo sa webp.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Bakit Dapat I-convert ang mga Larawan sa WebP?<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Sa madaling salita, ang mga WebP na imahe ay kadalasang may mas mahusay na compression kaysa sa mga alternatibo at mas maliliit habang pinapanatili ang parehong kalidad. Nangangahulugan ito na ang paggamit ng mga WebP na imahe sa iyong website ay magpapabuti sa performance nito at gagamit ng mas kaunting espasyo sa storage.<\/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\/tl\/wp-json\/wp\/v2\/pages\/1527","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/universomotero.com\/tl\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/universomotero.com\/tl\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/universomotero.com\/tl\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/universomotero.com\/tl\/wp-json\/wp\/v2\/comments?post=1527"}],"version-history":[{"count":1,"href":"https:\/\/universomotero.com\/tl\/wp-json\/wp\/v2\/pages\/1527\/revisions"}],"predecessor-version":[{"id":2326,"href":"https:\/\/universomotero.com\/tl\/wp-json\/wp\/v2\/pages\/1527\/revisions\/2326"}],"wp:attachment":[{"href":"https:\/\/universomotero.com\/tl\/wp-json\/wp\/v2\/media?parent=1527"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}