Reduza o Peso das Imagens e Acelere seu Blogger
Quer diminuir o tempo de carregamento do seu blog? O formato WebP, desenvolvido pelo Google, é a solução! Ele mantém a qualidade visual mas com um arquivo até 35% mais leve que os formatos tradicionais (JPG e PNG).
Conversor de imagens JPG e PNG para WEBP para Blogger.
<div class="layout">
<div class="layout1">
<input accept="image/*" multiple="" type="file" />
</div>
<div id="previews"></div>
</div>
<style>#sidebar-wrapper{display:none !important;} #main-wrapper{width:100%!important;} #entry-post{ width:100%!important;}.layout1{background-color: var(--widget-bg);margin: 0 0 30px;border: 1px solid var(--border-color);;border-radius: 10px;position: relative;clear: both;display: flex;justify-content: center;} input[type=file] { margin: 20px 0; } img { max-height: 100%; max-width: 100%; }#previews > div { box-sizing: border-box; height:100%; padding: 20px 0; display: inline-flex; justify-content: center; align-items: center; vertical-align: top; } #previews > div:after{ Content:'Clique para baixar'; 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; }</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>
Instruções Rápidas:
Para instalar a ferramenta de conversão no seu Blogger é muito fácil:
Crie uma nova página.
Mude o editor para a visualização em HTML.
Cole o código da ferramenta na página.
Publique e aproveite para converter suas imagens!
Com essa simples ação, você melhora o desempenho do seu site e a experiência dos seus visitantes. Boa sorte na otimização!
