Hey so what's up Friend's, if you don't know how to add WebP Image Converter to your website, then this post is just for you. Because in this post I'll teach you how to add the WebP Image Converter tool for Free.

Introduction:

WebP Image Converter Script or Tool For Blogger will help you to Convert any image into WebP format. Download the Free Webp image converter tool free

Are you looking for a professional blog image converter? You can implement all of your needs regarding image conversion with the help of this Webp image converter script For Blogger. It is easy to install, fast, and secure.

If you are a blogger, you can now convert your high-quality images from one format to another with Webp image Converter Script. Incorporating Webp image Converter Script into your blog posts enables you to provide a better visual experience for your readers. Convert high-quality images from one format to another!

WebP Image Converter : How to image to Webp converter tool in blogger

The WebP Image Converter Blogger Script is a free and open-source tool that can convert images into WebP format. WebP is a lossy image format that compresses images without compromising their visual quality. It is recommended by Google and is supported by all modern browsers and mobile devices. This script helps you to convert your image to WebP format. WebP is a lossless image format that is high-quality and smaller than the original image.

How To add an image to the Webp converter tool in blogger?

Follow these steps to add the image to Webp converter tool to your Blogger site:

Go to blogger/Blogspot dashboard
Now click on the theme section
Scroll down & click & apply a simple blog template
Now click on customize arrow & click on the switch to first generation theme
Now click on switch without a backup & now turn off navbar
Click on edit HTML & copy code bellow
Remove all code & paste new code here
Now click on save the theme, That's all
Now your image to Webp Converter Tool is ready to use

{{<!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://techly360.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>}
}

☝ Copy it here!!!

Conclusion:

By following these ☝ simple steps you can add the WebP Image Converter Tool to your site for more organic traffic. If you face any issues to add this tool to your site please contact me at any time and I'll assist you accordingly.

Full-Width Version (true/false)

WebP Image Converter | How to Image to Webp Converter tool in Blogger

Introduction:

How To add an image to the Webp converter tool in blogger?

Conclusion:

Post a Comment

0 Comments

Popular Posts

Vitamin D - Why Vitamin D is important to our Body?

Walking - 5 Basic Walking Strategies

Social Media Marketing : How to use Social Media for Marketing

Tranding Post

Categories

Tags

Most Recent

Random Posts

Most Popular

Vitamin D - Why Vitamin D is important to our Body?

Walking - 5 Basic Walking Strategies

Social Media Marketing : How to use Social Media for Marketing

Menu Footer Widget

Full-Width Version (true/false)

WebP Image Converter | How to Image to Webp Converter tool in Blogger

Introduction:

How To add an image to the Webp converter tool in blogger?

Conclusion:

Post a Comment

0 Comments

Social Plugin

Popular Posts

Vitamin D - Why Vitamin D is important to our Body?

Walking - 5 Basic Walking Strategies

Social Media Marketing : How to use Social Media for Marketing

Tranding Post

Categories

Tags

Most Recent

Random Posts

Most Popular

Vitamin D - Why Vitamin D is important to our Body?

Walking - 5 Basic Walking Strategies

Social Media Marketing : How to use Social Media for Marketing

Menu Footer Widget