Tạo công cụ chuyển đổi hình ảnh WebP bằng Blogger

Xin chào các bạn, Hôm nay trong bài viết này tôi chia sẻ một script khác, trong đó bạn có thể chuyển đổi một hình ảnh thành WebP Online và bạn cũng có thể tạo nó trên blog của mình. Nó hỗ trợ tất cả các chủ đề.



{tocify} $title={Table of content}

Định dạng ảnh WebP là gì?

WebP là định dạng hình ảnh Mã nguồn mở được phát triển tại Google , hứa hẹn tạo ra hình ảnh có kích thước nhỏ hơn so với định dạng JPG và PNG, đồng thời tạo ra hình ảnh đẹp hơn. WebP hỗ trợ độ trong suốt, như ảnh PNG và GIF.


WebP là một định dạng hình ảnh hiện đại cung cấp khả năng nén không mất dữ liệu và mất dữ liệu vượt trội cho hình ảnh trên web. Sử dụng WebP, quản trị viên web và nhà phát triển web có thể tạo hình ảnh nhỏ hơn, phong phú hơn để làm cho web nhanh hơn. Hình ảnh không mất dữ liệu WebP có kích thước nhỏ hơn 26% so với PNG.

Tôi có nên sử dụng hình ảnh WebP trên trang web của mình không?

WebP là một định dạng cực kỳ hữu ích vì nó cung cấp cả hiệu suất và tính năng. Không giống như các định dạng khác, WebP hỗ trợ cả nén mất dữ liệu và không mất dữ liệu, cũng như tính minh bạch và hoạt ảnh. Ngay cả với những tính năng này, WebP luôn cung cấp kích thước tệp nhỏ hơn so với các lựa chọn thay thế của nó.

Đây là một ví dụ mà google đề xuất về WebP:


Nguồn: google.com


Lợi ích của Hình ảnh WebP


Bạn có thể chỉ cho tôi điểm khác biệt? (Gợi ý: phiên bản WebP ở bên phải.)

Bằng cách xem ví dụ trên, bạn có thể hiểu sự khác biệt giữa WebP và Non-WebP

Nó đã chứng minh rằng tốc độ trang của Trang web sẽ tăng lên, Vì vậy, tôi muốn bạn sử dụng hình ảnh WebP trong trang web của mình.

Làm thế nào để tạo trang công cụ chuyển đổi ảnh WebP?

Nó rất dễ tạo chỉ cần làm theo các bước dưới đây ...
Đăng nhập vào trang Blogger mà bạn quản lí. Rồi tạo một Trang mới:
  1. Đi tới Trang tổng quan Blogger
  2. Đi đến phần Trang
  3. Và tạo một trang mới
  4. Copy và dán đoạn code bên dưới vào trang của bạn, nhớ là ở trình soạn thảo HTML nhé:
<div class="layout"> <h1>Convert image to webp format</h1> <div> <input type="file" multiple accept="image/*"> </div> <div id="previews"></div> <div class="dropTarget"></div> </div> <style> input[type=file] { margin: 20px 0; } 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:after{ Content:'Click To Download'; 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; height: calc(100vh - 40px); } </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>{codeBox}

     

        5. Vậy là xong, Công cụ của bạn đã sẵn sàng để sử dụng.

Khi bạn mở trang công cụ, các tiện ích con trên trang của bạn có thể trông khác lạ nhưng đó không phải là vấn đề lớn. Nó sẽ không ảnh hưởng đến các trang khác.
Nguyễn Hoàng

Thích viết, thích chia sẻ những gì mình biết. Mặc dù viết không hay. Nên không quan tâm người ta có thích đọc không? :D

Đăng nhận xét

Mới hơn Cũ hơn