Create WebP Image Converter Tool in Blogger | Spider Blogging

 Hello Guys , Today in this Post am sharing another script , in which you can convert an images into WebP Online , and too you can create it on your blog also. It Supports all the theme.

Create WebP Image Converter Tool in Blogger 


What is WebP?

WebP is an Open Source image format developed at Google, which promises to generate images smaller in size compared to JPG and PNG formats, while generating better looking images. WebP supports transparency, like PNG and GIF images.

WebP is a modern image format that provides superior lossless and lossy compression for images on the web. Using WebP, webmasters and web developers can create smaller, richer images that make the web faster. WebP lossless images are 26% smaller in size compared to PNGs.

Should I use WebP images on my website?

WebP is an incredibly useful format because it offers both performance and features. Unlike other formats, WebP supports both lossy and lossless compression, as well as transparency and animation. Even with these features, WebP provides consistently smaller file sizes than its alternatives.

Here is one Example what google suggest about WebP:

Source: google.com


Benefits of WebP Images

Can you tell the difference? (Hint: the WebP version is on the right.)


By seeing above example you may understood the difference between WebP and Non-WebP

its Proved that Site page speed will increase , So I prefer you to use WebP images in your site.

How to Create WebP Converter Tool Page?

Its very easy to create just follow below steps...

Create one Page:

  1. Go to Blogger Dashboard
  2. Go to Page Section
  3. And Create one new page 
  4. Paste Below Code:


<div class="layout">
    <h1>Convert image to webp format</h1>
    <div>
      <input type="file" multiple accept="image/*">
    </div>
    <div id="previews"></div>
    <div class="dropTarget"></div>
  </div>

<style>
  input[type=file] { margin: 20px 0; } img { max-height: 100%; max-width: 100%; box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.75); } .dropTarget { position: relative; border: 3px dashed silver; flex-basis: auto; flex-grow: 20; } .dropTarget::before { content: 'Drop files here'; color: silver; font-size: 5vh; height: 5vh; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; text-align: center; pointer-events: none; user-select: none; } #previews > div { box-sizing: border-box; height: 240px; width: 240px; padding: 20px; display: inline-flex; justify-content: center; align-items: center; vertical-align: top; } #previews > div:after{ Content:'Click To Download'; display:block; font-weight:bold; font-size:10px; position: absolute;border:1px solid silver; padding: 2px 9px; background: #fff; } #previews > div > progress { width: 80%; } .layout { display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; align-content: stretch; height: calc(100vh - 40px); }
</style>


<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>
     5. That's it , Your Tool is ready for use.

When you open tool page , your page widgets may look od but don't its not a big issue. It will not affect other pages.

You can comment your issue, We will reply soon.