Hello, Bloggers! Welcome to Raghavendra Technic.
In this tutorial, we are going to show you Image to Webp Image Converter Tool Scripts For Blogger
WebP is a Google Open Source image format that offers smaller images than JPG and PNG formats to create better looking pictures. WebP, like PNG and GIF pictures, enables transparency.
WebP is a contemporary picture format that offers improved online image compression without loss. By using WebP, webmasters and developers, smaller, richer and quicker online pictures may be created. WebP pictures that do not lose are 26% smaller than PNGs.
What is tool script?
This picture may be used to convert photos to WebP image converter to webP format immediately. With one click, you may easily convert several picture files.
You may access your local computer directly to convert picture files. The programme contains an integrated WebP encoder, which is available with the browser's native WebP encoder.
How to make image to Webp Image Converter?
Step 1: First of all Login to your Blogger Dashboard.
Step 2: On Blogger Dashboard, click Pages.
Step 3: Click on the new page to Create
Step 4: Click on the top pencil icon and choose "HTML view"
Step 5: Copy the code and paste after Publish your page.
<style>/* Accordion */ .showH{margin:1.7em 0;font-size:.93rem;font-family:Google Sans Text,Arial,Helvetica,sans-serif;line-height:1.7em} details.ac{padding:18px 15px;background:#fff;box-shadow:0 5px 35px rgba(0,0,0,.07);margin:20px 0;border-radius:10px} details.ac summary{font-weight:700;cursor:default; display:flex;align-items:baseline; transition:all .1s ease;cursor:pointer} details.ac summary::before{content:'\203A'; flex:0 0 25px;display:flex;align-items:center;justify-content:flex-start;padding:0 5px; font-weight:400;font-size:1.33rem;color:inherit} details.ac[open] summary{color:$(link.color)} details.ac:not(.alt)[open] summary::before{transform:rotate(90deg);padding:0 0 0 5px;justify-content:center} details.ac.alt summary::before{content:'\002B'; padding:0 2px} details.ac.alt[open] summary::before{content:'\2212'} details.ac .aC{padding:0 15px;opacity:.9} .pRelate{padding:16px 20px;background:#fff;box-shadow:0 5px 35px rgb(0 0 qW0/7%);border:0;border-radius:10px;font-size:14px}.pRelate b{font-weight:400;margin:0;opacity:.8}
.drK .pRelate{background:$(dark.bgAlt)} .drK details.sp, .drK details.ac{background:$(dark.bgSec)} .drK details.sp summary::after{background:$(dark.link)}</style>
<div class="pRelate"><div class="layout">
<div><center>
<input class="button" type="file" multiple accept="image/*">
</center> </div>
<center><div id="previews"></div></center>
<center><div class="dropTarget">upload and convert multiple files instantly!</div></center>
</div></div>
<!--[ Accordion start ]-->
<div class='showH'>
<!--[ Accordion line 1 ]-->
<details class='ac'>
<summary>How To Use?</summary>
<div class='aC'>
<p>click on choose files, upload single or multiple images after that it will convert it into .webp format click on images to download,</p>
</div>
</details>
<!--[ Accordion line 2 ]-->
<details class='ac alt'>
<summary>Benifits of Webp</summary>
<div class='aC'>
<p>We‘ve been talking a lot lately about website loading time and design mistakes that can drop your rating and kill your SEO. Using images to enhance your site is a kind of a trade-off between increasing website weight, and hence loading time and improving the user experience with better visualization (unless you use AMP).
Thanks to WebP, you don’t have to make these trade-offs anymore. WebP is a fantastic tool for web developers and designers to create websites with better UI/UX Design and optimal loading time and weight.</p>
</div>
</details>
</div>
<script>/*<![CDATA[*/
let refs = {}; refs.imagePreviews = document.querySelector('#previews'); refs.fileSelector = document.querySelector('input[type=file]'); function addImageBox(container) { let imageBox = document.createElement("div"); let progressBox = document.createElement("progress"); imageBox.appendChild(progressBox); container.appendChild(imageBox); return imageBox; } function processFile(file) { if (!file) { return; } console.log(file); let imageBox = addImageBox(refs.imagePreviews); new Promise(function (resolve, reject) { let rawImage = new Image(); rawImage.addEventListener("load", function () { resolve(rawImage); }); rawImage.src = URL.createObjectURL(file); }) .then(function (rawImage) { return new Promise(function (resolve, reject) { let canvas = document.createElement('canvas'); let ctx = canvas.getContext("2d"); canvas.width = rawImage.width; canvas.height = rawImage.height; ctx.drawImage(rawImage, 0, 0); canvas.toBlob(function (blob) { resolve(URL.createObjectURL(blob)); }, "image/webp"); }); }) .then(function (imageURL) { return new Promise(function (resolve, reject) { let scaledImg = new Image(); scaledImg.addEventListener("load", function () { resolve({imageURL, scaledImg}); }); scaledImg.setAttribute("src", imageURL); }); }) .then(function (data) { let imageLink = document.createElement("a"); imageLink.setAttribute("href", data.imageURL); imageLink.setAttribute('download', `${file.name}.webp`); imageLink.appendChild(data.scaledImg); imageBox.innerHTML = ""; imageBox.appendChild(imageLink); }); } function processFiles(files) { for (let file of files) { processFile(file); } } function fileSelectorChanged() { processFiles(refs.fileSelector.files); refs.fileSelector.value = ""; } refs.fileSelector.addEventListener("change", fileSelectorChanged); function dragenter(e) { e.stopPropagation(); e.preventDefault(); } function dragover(e) { e.stopPropagation(); e.preventDefault(); } function drop(callback, e) { e.stopPropagation(); e.preventDefault(); callback(e.dataTransfer.files); } function setDragDrop(area, callback) { area.addEventListener("dragenter", dragenter, false); area.addEventListener("dragover", dragover, false); area.addEventListener("drop", function (e) { drop(callback, e); }, false); } setDragDrop(document.documentElement, processFiles);
/*]]>*/</script>Step 6: That's done!
Credit
Blogging375.
Conclusion
In this article I have made a tutorial on Image to Webp Image Converter Tool Scripts For Blogger. I hope you have liked it and Please do share with your friends and follow our blog for more
If you face any problems in code or have any questions please feel free to ask in comments section or join our Telegram Group for discussion.
Our All Posts Are Protected By DMCA. So Don't Try To Copy Our Posts And Reproduction In Any Way Is Strictly Prohibited! Or else Legal Actions Will Be Taken. © Raghavendra Technic | All Rights Reserved
© Copyright:
raghavendratechnic.blogspot.com