create image to Webp converter tool in blogger

Create Image To Webp Converter Tool in Blogger [Free Script For Blogger]

If you are running a blog on any platform like blogger or WordPress you might have definitely use an image in your articles/ blogpost and followingly you also have used different image formats to reduce the image size.

People on the internet are using PNG and JPEG format images for being a long time but recently Webp format images are becoming popular and started using by a majority of people, it is growing up exponentially.

By seeing high demand and advantage, a tool is booming in the internet, name image to Webp converter tool

on that basis, many bloggers created an image to Webp generator tool website in order to get high traffic and earning.

If you also want to create the same tool then read this article full because in this blog post you will learn how to create image to Webp converter tool in blogger.

As always I will provide you a free script and help you to make the tool.

So let's start the blog post!!

ALSO READ: How to Create a Youtube Video Downloader Tool in Blogger [Get Free Script]

How to create image to Webp converter tool in Blogger?

Follow the given steps to Create image to Webp converter tool in blogger.

Open Your Blogger Dashboard.

Navigate To Theme Option.

Scroll Down, Select & Appy Simple Blog Theme.

Click on Drop-down Arrow & Click on 'First Generation Classic Theme'.

Then Click on 'Switch Without a Backup' & Now Turn Off Navbar.

Click on edit HTML & Copy the Code Given Below.

<!DOCTYPE html>
<html>
<title>Convert Image to Webp Format</title>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="description" content="Jpeg To Webp Converter, Jpeg To Webp Converter Tool, Convert Jpeg To Webp, Compress Webp, Jpg To Webp Python, Jpg To Url, Webp Converter Download Free Convert Jpeg To Webp"/>
	<meta name="robots" content="index,follow" />
	<meta name="keywords" content="Jpeg To Webp Converter, Jpeg To Webp Converter Tool, Convert Jpeg To Webp, Compress Webp, Jpg To Webp Python, Jpg To Url, Webp Converter Download Free Convert Jpeg To Webp" />
     <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
	 <link href='https://craze-marketing.com/image-to-webp-converter-tool-script-for-blogger/' rel='canonical'/>
	 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="icon" href="favicon.png" sizes="16x16" type="image/png">
  <style>
  body {
  width: 700px;
  margin: 0 auto;
  padding: 20px;
  font-family: sans-serif;
}
h1 {
  margin-top: 0;
}
input[type=file] {
  margin: 20px 0;
  margin-left: 200px;
}
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 > progress {
  width: 80%;
}
.layout {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  align-content: stretch;
  height: calc(100vh - 40px);
  margin: 2% auto;
  padding: 15px;
  background-color: #FFFFFF;
  -webkit-box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
}
.ads {  
   margin: auto;
   padding: 60px 0; 
   max-width: 640px;   
   box-shadow: 0 5px 15px rgba(0,0,0,.16);  
   border-radius: 5px;  
   margin-top: 1em;  
   background: #fff;  
   text-align: left;  
 }
  </style>
</head>
<body style="background-image: linear-gradient(to right, #2d75e1, #00a3ff, #00c6da, #00df87, #a8eb12);">
<div class="container">
  <div class="layout">
  <h1>Convert Image to Webp Format</h1>
  <div>
  <div class="ads container">  
         Place Your Ad Code     
            </div> 
    <input type="file" multiple accept="image/*">
  </div>
  <div id="previews"></div>
  <div class="dropTarget"></div>
</div>
</div>
 </div>
<br>

</body>
<script>
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);

  // Load the data into an image
  new Promise(function (resolve, reject) {
    let rawImage = new Image();

    rawImage.addEventListener("load", function () {
      resolve(rawImage);
    });

    rawImage.src = URL.createObjectURL(file);
  })
  .then(function (rawImage) {
    // Convert image to webp ObjectURL via a canvas blob
    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) {
    // Load image for display on the page
    return new Promise(function (resolve, reject) {
      let scaledImg = new Image();

      scaledImg.addEventListener("load", function () {
        resolve({imageURL, scaledImg});
      });

      scaledImg.setAttribute("src", imageURL);
    });
  })
  .then(function (data) {
    // Inject into the DOM
    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);

// Set up Drag and Drop
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>
</html>

credit techly360.com

Delete All existing Code & Paste The new Code There.

Congratulations, Your Webp Converter Tool is Ready.

>>>SEE A LIVE DEMO OF THE WEBP TOOL <<<

ALSO READ: How To Add Preloading Effect To Blogger?

Can I Get AdSense approval on Webp Converter Tool Website?

You can get AdSense Approval on Webp converter tool website but only if you follow some guidelines.

Follow The given Step To get AdSense Approval on Tool Website?

Purchase and Connect any TLD Domain Name.

Create Additional Pages Like about, Contact us, Privacy Policy in Your Website.

Produce Some Related Content To Your Tool.

Apply for Google Adsense & Wait for Reply.

How To Convert Images To Webp Format With This Tool?

1. Click on choose file

2. Choose the image which you want to convert into Webp Format

3. Click on the image when it is uploaded

4. Your image will be successfully converted into Webp Format.

How The Webp Converter Tool Works?

This is a free online Webp image converter tool which delivers High-Quality & High-resolution image without any loss, this tool converts all type of image format like JPG, PNG, GIF into Webp Format easily in Seconds and reduce the image size up to 35% and Provide the Same image with Best-Quality and in Minimum File Size.

Why Webp image Format is The Best image Format To Use?

It is not PNG nor it is JPG but actually, the best image format is Webp format, because it uses both lossy and lossless compression and delivers the same image in high-quality and without any loss

The Webp format reduces image size up to 35% which is good compare to JPG & PNG formats.

See live comparison between WebP, JPG, PNG formats

Webp Format vs JPEG & PNG Format

JPEG PNG

Size: 48.8 KB Size:184 KB

WEBP

Size: 17.8 KB

CONCLUSION

I hope you get some help after reading this article if you are facing some kind of problem then notify me in the comment box I will try my best to solve it, till that read my other blogpost & join our newsletter fast !!

ALSO READ: 2 Ways To Remove m=1 easily from blogger without harming your blog SEO

Craze-Marketing

Create Image To Webp Converter Tool in Blogger [copy free script]