Image To Webp
January 28, 2023Image To Webp
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="icon" type="image/x-icon" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0yfu8Gbvupol44PCxcpMHpvG13m2ACMuHd9IwSLKNyTLGUWOjuRt-Y4bsD8wOOuAnxHRihMv0ejHTs96Gua9bZTx3TQEWeKMK5mqiDM0KLJT7nFp5pMZZtYjMyj-NF48XdYMs0V5idnhGBONuCYbVfb6RpeO33KYtpbCKp441QkP8YOq7OvgKqk2a/s3264/toolme%20logo%20.webp">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
<title>Free Image To Webp Converter</title>
<meta name="viewport" content="width=device-width, user-scalable=no">
<meta name="description" content="With the help of this tool, you can convert any image to webp for free...">
<meta name="keywords" content="image to webp,">
<meta name="language" content="English">
<style>
body {
margin-left: 110px;
margin-right: 110px;
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
background-color: lightskyblue;
text-align: center;
}
@media only screen and (max-width: 600px) {
body {
margin-left: 5px;
margin-right: 5px;
}
}
/*--------------------- banner style stat--------------------------*/
@keyframes fade{
from{
opacity:0.4;
}
to{
opacity:1;
}
}
#slider{
margin:0 auto;
width:100%;
overflow:hidden;
}
.slides{
overflow:hidden;
animation-name:fade;
animation-duration:1s;
display:none;
}
img{
width:99%;
border-radius: 7px;
}
#dot{
margin:0 auto;
text-align:center;
}
.dot{
display:inline-block;
border-radius:50%;
background:#d3d3d3;
padding:8px;
margin:10px 5px;
}
.active{
background: red;
}
@media (max-width:567px){
#slider{
width:100%;
}
}
#heading{
display:block;
text-align:center;
font-size:2em;
margin:10px 0px;
}
/*------------------------banner style end---------------------------------------*/
/*uplod*/
.drag-area{
box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
background-color: white;
height: 300px;
width: 100%;
border-radius: 5px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.drag-area.active{
border: 2px solid rgb(236, 14, 14);
}
.drag-area .icon{
font-size: 100px;
color: red;
}
.drag-area .icon:hover{
color: rgb(8, 187, 8);
}
.drag-area p{
font-size: 25px;
font-weight: 500;
color: black;
margin: 10px 0 15px 0;
}
.drag-area span{
font-size: 16px;
font-weight: 500;
color: black;
margin: 10px 0 15px 0;
}
.drag-area button{
padding: 10px 25px;
font-size: 20px;
font-weight: 500;
border: none;
outline: none;
background: red;
color: #f1f1f1;
border-radius: 5px;
cursor: pointer;
}
.drag-area button:hover{
background-color: rgb(8, 187, 8);
}
.drag-area img{
height: 100%;
width: 100%;
object-fit: cover;
border-radius: 5px;
}
/*uplod*/
#previews > div {
box-sizing: border-box;
height: auto;
width: 240px;
padding: 20px;
display: inline-flex;
justify-content: center;
align-items: center;
vertical-align: top;
}
#previews > div > progress {
width: 80%;
}
/*footer css*/
.footer{
padding: 40px 0;
background-color: black;
border-radius: 7px;
}
.footer .social{
text-align: center;
padding-bottom: 25px;
color: red;
}
.footer .social a{
font-size: 35px;
color: red;
border: none;
width: 40px;
height: 40px;
line-height: 38px;
display: inline-block;
text-align: center;
margin: 0 8px;
}
.footer .social a:hover{
color: white;
}
.footer ul{
margin-top: 0;
padding: 0;
list-style: none;
font-size: 20px;
line-height: 1.7;
margin-bottom: 0;
text-align: center;
}
.footer ul a{
text-decoration: none;
color: white;
}
.footer ul li{
display:inline-block;
padding: 0 15px;
}
.footer ul a:hover{
color: red;
}
.copyright{
color: rgba(255, 255, 255, 0.658);
text-align: center;
font-size: 17px;
}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 95%;
height: auto;
border-radius: 7px;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
/*footer css end*/
.home-bt{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.home-bt a{
position: relative;
background-color: red;
color: white;
text-decoration: none;
text-transform: uppercase;
font-size: 2rem;
font-weight: 400;
padding: 10px 30px;
border-radius: 7px;
transition: 0.5s;
}
.home-bt a:hover{
letter-spacing: 0.25em;
background-color: rgb(27, 255, 6);
box-shadow: 0 0 35px rgb(27, 255, 6);
}
.content-box{
background-color: white;
border-radius: 7px;
padding: 20px;
text-align: left;
}
</style>
<link rel="me" href="https://www.blogger.com/profile/04040344459232068184" />
<meta name='google-adsense-platform-account' content='ca-host-pub-1556223355139109'/>
<meta name='google-adsense-platform-domain' content='blogspot.com'/>
</head>
<body>
<!----------------------banner hear------------------------------>
<div class="slides">
<a href="https://image-editor.toolme.xyz/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5TYbyHh8tDTr0lEcmXbR3drWxlYJnoRkHRbqJ_Q3ToAdhhdjxfnBL7YC6GLEyb25HFekghTBk2xdiCOeXQathsdkNY1iyWFJc_9BkhEbFv1aZkHWmBcixl49FTNd1rul39Sjegn5xtCzwT-eN31cDYywR-p_eSHuFkfO0bDDpKEAuo3jLFYj-qc4K/s3264/image%20editor%20.png.webp" width="100%" /></a>
</div>
<div class="slides">
<a href="https://qrcode.toolme.xyz/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjv1S95bobqW4BOa5PxrVdXvtQy5T-bfHHiLtmdqRY1qYkn9Dlepy2Ht_aaj-Mhbu-VPWhxsjUWiYxh9jcYtE9VZ07VatipYXPHtbmYK3jYWFadbvfDlNdPrPK9TAC8AI7nYYC-FQvqP-SQZdmf67estSkLvFr6xQDIwcdGGV_1hu7iVlwwhZdLYbtz/s3264/QR%20code%20.png.webp" width="100%" /></a>
</div>
<div class="slides">
<a href="https://text-number.toolme.xyz/?m=1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7jt4nh-TGj-fSGv2zrRsSGHMG2QB7443WwkcUil5TaA0iw99FjjpKU5f9As42h0XQeB61Lo6ojbuQDGMcKRJ7wLdNRAqVF7PHuTy_UHuyfakQ5eI4ZsCbctfOXZC8t756aJVPQs-H4I-nshuAoCFnO8DvHG7E_3WtTahTQbLjkvyf3aFnr3IV6nVK/s3264/text%20to%20imoji%20.png.webp" width="100%"/></a>
</div>
<div id="dot">
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
<!----------------------banner end hear------------------------------>
<br/>
<div class="home-bt">
<a href="https://toolme.xyz"><span><i class="fas fa-home"></i> Home</span></a>
</div>
<br/>
<div class="layout">
<div class="up-img">
<label class="btn btn-outline-info btn-lg">
<div class="drag-area">
<div class="icon"><i class="fas fa-cloud-upload-alt"></i></div>
<p>Image to Webp</p>
<button>
<label>
Choose Image
<input
type="file" multiple accept="image/*"
hidden
class="form-control-file"
(change)="fileChanged($event)"
/>
<i class="fa-solid fa-images"></i>
</label>
</button>
<span>Click on image to download</span>
</div>
<br/>
<div id="previews"></div>
<br/>
<div class="content-box">
<h2 style="text-align: left;"><span style="color: red;">How to use this tool</span></h2><p>By clicking on choose image, you can convert any image to webp in few seconds.</p><p><b>What is WebP image format and what are its benefits?</b></p><p>WebP is a modern image format. This image format was developed by Google on 30 September 2010. Which provides better lossless and lossy compression for images on the web. That is, it can reduce the size of the image without losing the image quality. Due to which the work time is taken even when the image is loaded in the website and due to this the performance of the website is good.</p><p>The main purpose of this image format is to help in creating smaller size and better quality images and images that load faster in the web. WebP lossless images are 35% smaller than PNG and WebP lossy images are 25-30% smaller than JPEG. The extension of this image format is .webp.</p><p>WebP image format is based on two technologies Lossless and Lossy Image which means that you can reduce the size of the image without losing the quality of the image. Whereas with loss of image size in lossy image, the quality also decreases.</p><p>Here the webp extension is natively supported in Google chrome, Firefox, Edge, Opera browser, and many other tools and software.</p>
</div>
<!-----footer bar---------->
<br/>
<section class="footer">
<div class="social">
<a href=""><i class="fab fa-instagram"></i></a>
<a href=""><i class="fab fa-facebook"></i></a>
<a href=""><i class="fab fa-snapchat"></i></a>
<a href=""><i class="fab fa-youtube"></i></a>
</div>
<ul class="list">
<li>
<a class="myBtn_multi">About Us</a>
</li>
<li>
<a class="myBtn_multi">Contect Us</a>
</li>
<li>
<a class="myBtn_multi">Privacy Policy</a>
</li>
</ul>
<!-- about us hear---->
<div class="modal modal_multi">
<div class="modal-content">
<span class="close close_multi">×</span>
<p>Some text in the Modal..1</p>
</div>
</div>
<!------ contat us hear----- -->
<div class="modal modal_multi">
<div class="modal-content">
<span class="close close_multi">×</span>
<p>Some text in the Modal..2</p>
</div>
</div>
<!------ privacy policy hear ------->
<div class="modal modal_multi">
<div class="modal-content">
<span class="close close_multi">×</span>
<p>Some text in the Modal..3</p>
</div>
</div>
<p class="copyright">
copyright by shamshad
</p>
</section>
<!-----footer bar end------->
<script>
// banner js
var index = 0;
var slides = document.querySelectorAll(".slides");
var dot = document.querySelectorAll(".dot");
function changeSlide(){
if(index<0){
index = slides.length-1;
}
if(index>slides.length-1){
index = 0;
}
for(let i=0;i<slides.length;i++){
slides[i].style.display = "none";
dot[i].classList.remove("active");
}
slides[index].style.display= "block";
dot[index].classList.add("active");
index++;
setTimeout(changeSlide,4000);
}
changeSlide();
// banner js end
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);
// Get the modal in footer
var modalparent = document.getElementsByClassName("modal_multi");
// Get the button that opens the modal
var modal_btn_multi = document.getElementsByClassName("myBtn_multi");
// Get the <span> element that closes the modal
var span_close_multi = document.getElementsByClassName("close_multi");
// When the user clicks the button, open the modal
function setDataIndex() {
for (i = 0; i < modal_btn_multi.length; i++)
{
modal_btn_multi[i].setAttribute('data-index', i);
modalparent[i].setAttribute('data-index', i);
span_close_multi[i].setAttribute('data-index', i);
}
}
for (i = 0; i < modal_btn_multi.length; i++)
{
modal_btn_multi[i].onclick = function() {
var ElementIndex = this.getAttribute('data-index');
modalparent[ElementIndex].style.display = "block";
};
// When the user clicks on <span> (x), close the modal
span_close_multi[i].onclick = function() {
var ElementIndex = this.getAttribute('data-index');
modalparent[ElementIndex].style.display = "none";
};
}
window.onload = function() {
setDataIndex();
};
//Get Modal End
</script>
</body>
</html>
0 blogger-facebook