{"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":"konversi-gambar-ke-format-webp-secara-instan-dan-gratis","status":"publish","type":"page","link":"https:\/\/universomotero.com\/id\/konversi-gambar-ke-format-webp-secara-instan-dan-gratis\/","title":{"rendered":"Konversi Gambar ke Format WebP Secara Instan dan Gratis"},"content":{"rendered":"<h2 class=\"wp-block-heading has-text-align-center\">Konversi Gambar ke Format WebP Secara Instan dan Gratis<\/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\">Pilih berkas<\/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\">Cara Mengonversi Gambar JPEG ke WebP<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Anda dapat dengan mudah mengkonversi gambar JPEG ke WebP menggunakan alat di atas.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Klik tombol &quot;Pilih File&quot; dan pilih gambar.<\/li>\n\n\n\n<li>Kemudian, aplikasi ini langsung mengkonversi gambar ke format WebP dan memberikan pratinjau.<\/li>\n\n\n\n<li>Klik pada gambar pratinjau untuk mengunduhnya.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Pertanyaan yang Sering Diajukan (FAQ)<\/h2>\n\n\n\n<h4 class=\"wp-block-heading\">Apa itu WebP?<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Google menciptakan format gambar WebP, yang dirancang untuk menawarkan kompresi yang lebih unggul dibandingkan format terkenal lainnya seperti JPEG dan PNG sambil mempertahankan kualitas yang sama. Format ini menggunakan metode kompresi lossy dan lossless untuk membuat ukuran file gambar lebih kecil.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Situs web dapat memperoleh manfaat dari WebP khususnya karena mempercepat pemuatan halaman dan menggunakan lebih sedikit bandwidth untuk menampilkan grafis. Hal ini dapat meningkatkan fungsionalitas situs web dan pengalaman pengguna secara keseluruhan, terutama bagi pengguna perangkat seluler dengan paket data terbatas atau koneksi internet yang lambat.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Apa itu WebP Converter?<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Konverter WebP adalah alat online yang mengubah gambar JPEG, JPG, dan PNG apa pun menjadi gambar WebP. Alat kami adalah contoh sempurna dari konverter webp gratis yang bekerja secara online dan mengubah gambar ke webp secara instan.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Mengapa Mengonversi Gambar ke WebP?<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Sederhananya, gambar WebP seringkali memiliki kompresi yang lebih baik daripada alternatifnya dan berukuran lebih kecil sambil mempertahankan kualitas yang sama. Ini berarti bahwa penggunaan gambar WebP di situs web Anda akan meningkatkan kinerja dan menggunakan lebih sedikit ruang penyimpanan.<\/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\/id\/wp-json\/wp\/v2\/pages\/1527","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/universomotero.com\/id\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/universomotero.com\/id\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/universomotero.com\/id\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/universomotero.com\/id\/wp-json\/wp\/v2\/comments?post=1527"}],"version-history":[{"count":1,"href":"https:\/\/universomotero.com\/id\/wp-json\/wp\/v2\/pages\/1527\/revisions"}],"predecessor-version":[{"id":2326,"href":"https:\/\/universomotero.com\/id\/wp-json\/wp\/v2\/pages\/1527\/revisions\/2326"}],"wp:attachment":[{"href":"https:\/\/universomotero.com\/id\/wp-json\/wp\/v2\/media?parent=1527"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}