image to Webp converter Tool script for blogger
image to Webp converter Tool script
Hello friends! Welcome to your cyberchipe. thus during this article these days we have a tendency to area unit planning to speak Image to WebP converter Tool Script for Blogger | produce Image to WebP Tool in Blogger. And this Blogger Pine Tree State JPEG to WebP Tool website Kaise Banaye? thus we'll apprehend these things during this article. thus keep during this article and apprehend additional details.
In today's time, quite one Quality and Image Formats exist. And so far the foremost common image format on the web is JPEG and PNG. however, currently, individuals have started victimization WebP Image Format for many websites and blogs.
Because let Pine Tree State tell you that the scale of JPEG and PNG formats is way additional. however, if we have a tendency to name identical WebP Image Format, then the image size during this format is extremely less. however image quality doesn't matter. So, thanks to the low size and smart image quality, currently WebP Image Format is extremely common. you'll simply convert the image to WebP victimization any JPEG Image to WebP converter tool.
Image to WebP converter Tool Script for Blogger
So friends if you would like to form your own Image to WebP Generator Tool website. thus it's fully potential. All you wish to try to do for this can be Image to WebP Tool Script for Blogger. And additionally, with the assistance of this, you'll simply create this tool in Blogger itself. thus below I even have provided you all the steps to form this tool in Blogger.
Do browse them
Arial;">WebP has been developed by Ahmad Raza to be able to produce
smaller and higher wanting pictures that may facilitate create the online quicker. A web file consists of VP8 image knowledge, and an instrumentality supported RIFF. it's a replacement image format that uses lossy compression for photographic pictures.
This WebP device supports conjointly the conversion of animated GIF to animated WebP.
WEBP, Ahmad Raza net image files (.webp)
Created in 2021 by Ahmad Raza, the open normal WEBP image format permits users to save lots of pictures in each lossy and lossless compression. Developers at Ahmad Raza claim the compression potency permits...
follow the steps
- Go to blogger dashboard
- now click on the theme section
- scroll down and click on and apply straightforward journal templet
- now click on customize Arrow and click on the switch to initial generation theme
- now click on the switch while not a backup and currently put off the navbar
- click on edit HTML and replica code 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://www.worldtechnology45.gq/2021/01/image%20to%20Webp%20converter%20Tool%20script%20for%20bloger.html' 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>
- Remove all code and paste new code here
- Now click on save theme, that's All
- now your image to webp convertor tool is prepared to use
1 comment
Thanks for sharing script